Foros del Web » Programando para Internet » Jquery »

<menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspondiente

 Estas en el tema de <menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspondiente en el foro de Jquery en Foros del Web. Estoy dandole vueltas en Firefox... pero apenas me salen unos simples alertas Código HTML: <link href= "https://fonts.googleapis.com/css?family=Abel|Glegoo| Jongle|Poiret+One|Quicksand" rel= "stylesheet" > <script src= "jquery-3.2.1.min.js" > ...
  #1 (permalink)  
Antiguo 15/01/2018, 07:29
 
Fecha de Ingreso: enero-2008
Mensajes: 581
Antigüedad: 16 años, 10 meses
Puntos: 9
<menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspondiente
Estoy dandole vueltas en Firefox... pero apenas me salen unos simples alertas

Código HTML:
 <link href="https://fonts.googleapis.com/css?family=Abel|Glegoo|
Jongle|Poiret+One|Quicksand" rel="stylesheet">

	<script src="jquery-3.2.1.min.js"></script>
	<script>
		function gFonts(){
			$("#gFonts").on("click", "menuitem", function (event) {
				console.log($(this).attr('value'));
			});
		}
	</script>
Código HTML:
<menu type="context" id="gFonts">
	<menu label="Google Fonts">
		<menuitem label="(Viajes) Abel" value="'Abel', sans-serif" icon="" onclick="gFonts()"></menuitem>
		<menuitem label="(Gourmet) Glegoo" value="'Glegoo', serif" icon="" onclick="gFonts()"></menuitem>
		<menuitem label="(Gimnasio) Junge" value="'Junge', serif" icon="" onclick="gFonts()"></menuitem>
		<menuitem label="(Música) Poiret One" value="'PoiretOne', Cursive" icon="" onclick="gFonts()"></menuitem>
		<menuitem label="(Negocios) Quicksand" value="'Quicksand', sans-serif" icon="" onclick="gFonts()"></menuitem>
	</menu>
</menu>
CONSOLA Ó ALERTAS DE FIREFOX, el primer alert sale una vez, el segundo 2 veces, el tercero 3... ¿Porque hace eso?
Cita:
Sans Serif
tabs.html:84:5
Abel
tabs.html:85:5
Sans Serif
tabs.html:84:5
Glegoo
tabs.html:85:5
Sans Serif
tabs.html:84:5
Glegoo
tabs.html:85:5
Sans Serif
tabs.html:84:5
Jongle
tabs.html:85:5
Sans Serif
tabs.html:84:5
Jongle
tabs.html:85:5
Sans Serif
tabs.html:84:5
Jongle
tabs.html:85:5
Código HTML:
<body  contextmenu="gFonts"></body>
Última edición por quico5; 15/01/2018 a las 08:20
  #2 (permalink)  
Antiguo 15/01/2018, 14:23
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: <menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspond
La función gFonts() es innecesaria puesto que su contenido establece el comportamiento de los elementos relacionados cuando se dé un clic en ellos. Toma el contenido de dicha función, colócalo por fuera de la función, elimina la función y el atributo onclick de los elementos.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #3 (permalink)  
Antiguo 16/01/2018, 14:48
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 424
Antigüedad: 9 años, 3 meses
Puntos: 12
Respuesta: <menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspond
El problema es que estas declarando dos eventos.

El primer evento, lo tienes mediante onclick que llama a la funcion, y luego, en dicha funcion estas declarando un evento de tipo click para los mismos elementros, por lo que cuando des click nuevamente, se acciona el evento onclick de la etiqueta y el de la funcion que le asignas... esto se repetira una y otra vez almacenando eventos.

Aqui mi solucion:

Mira la funcion gFont deveria de estar solo asi:
Código Javascript: 
Ver original
  1. function gFonts(object){
  2.     console.log($(object).attr("value"));
  3. }

Y el HTML asi:
Código HTML: 
Ver original
  1. <menu label="Google Fonts">
  2.         <menuitem label="(Viajes) Abel" value="'Abel', sans-serif" icon="" onclick="gFonts(this)"></menuitem>
  3. </menu>

Al hacer click al elemento, estas llamando a gFonts y le pasas el objeto seleccionado como parametro, parametro que recibes en la funcion y que accedes a su atributo value

Espero que te haya sido de utilidad e intenta instruirte respecto a los eventos, ya que a veces nos resulta un poco liado.

saludos!
  #4 (permalink)  
Antiguo 19/01/2018, 10:02
 
Fecha de Ingreso: enero-2008
Mensajes: 581
Antigüedad: 16 años, 10 meses
Puntos: 9
Respuesta: <menuitem> aplicar estilos de prueba en <body> o en la etiqueta correspond
Gracias a los dos, hasta aquí va funcionando, he pensado que seria más comodo cambiar click por focus, y como MENU>MENUITEM solo son compatibles con firefox, intentar hacerlo con SELECT>OPTION

He probado con
Código HTML:
onmouseover="gFont(this)"
pero parece que no funciona


Código completo:
Código HTML:
<!DOCTYPE html>
<html lang="en" contextmenu="gFont2">
<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Open+Sans:400,700|Lato:400,700|Oswald:400,700|Raleway:400,700|Noto+Sans:400,700|Titillium+Web:400,700|Poppins:400,700|Arimo:400,700|Nunito:400,700|Dosis:400,700|Oxygen:400,700|Cabin:400,700|Exo+2:400,700|Exo:400,700|Quicksand:400,700|Varela+Round:400,700|Asap:400,700|Signika:400,700|Maven+Pro:400,700|Isto+kWeb:400,700|Amaranth:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lobster|Pauta+One|Poiret+One|Shrikhand|Boogaloo|Monoton|Bangers|Luckiest+Guy|Fugaz+One|Carter+One|Baloo|Londrina+Shadow" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display|Indie+Flower|Kaushan+Script|Kalam|Architects+Daughter|Neucha|Merienda|Aladin|Merienda+One" rel="stylesheet">
	
	<link href="https://fonts.googleapis.com/css?family=Abel|Glegoo|Jongle|Poiret+One|Quicksand" rel="stylesheet">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
	<style>
		body{font-family: 'Titillium Web', sans-serif;}
		.tabs{display:flex; flex-wrap:wrap; margin:0;}
		.tabs>:nth-child(odd){flex:1; line-height:3em; order:-1; text-align:center; cursor:pointer; font-weight:500;}
		.tabs>:nth-child(even){margin-left:0; padding:1.5em; flex-basis:100%;}
		.tabs>:nth-child(odd):not(.active)+:nth-child(even){display:none;}
	</style>
</head>
<body>
	<center><h1>Demostración</h1></center>

	<dl class="tabs small-caps">
		<dt class="active">Tab1</dt>
		<dd>Lorem1</dd>
		<dt>Tab2</dt>
		<dd>Lorem2</dd>
		<dt>Tab3</dt>
		<dd>Lorem3</dd>
	</dl>

	<script src="jquery-3.2.1.min.js"></script>
	<script>
		$('.tabs>:nth-child(odd)').click(function(){
			$(this).addClass('active').siblings().removeClass('active');
		});
		function gFont(object){
			console.log($(object).attr('label'));
			$('body').css('font-family',$(object).attr('label'));
		}
	</script>

	<menu type="context" id="gFont">
		<menu label="Google Fonts">
			<menuitem label="Abel" icon="" onclick="gFont(this)"></menuitem>
			<menuitem label="Glegoo" icon="" onclick="gFont(this)"></menuitem>
			<menuitem label="Junge" icon="" onclick="gFont(this)"></menuitem>
			<menuitem label="Poiret One" icon="" onclick="gFont(this)"></menuitem>
			<menuitem label="Quicksand" icon="" onclick="gFont(this)"></menuitem>
		</menu>
	</menu>
	<menu type="context" id="gFont2">
		<menu label="Google Fonts">
			<menu label="Sans Serif">
				<menuitem label="Roboto" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Open Sans" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Lato" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Oswald" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Raleway" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Noto Sans" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Titillium Web" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Poppins" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Arimo" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Nunito" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Dosis" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Oxygen" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Cabin" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Exo 2" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Exo" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Quicksand" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Varela Round" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Asap" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Signika" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Maven Pro" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Istok Web" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Amaranth" icon="" onclick="gFont(this)"></menuitem>
			</menu>
			<menu label="Display">
				<menuitem label="Lobster" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Pauta One" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Poiret One" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Shrikhand" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Boogaloo" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Monoton" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Bangers" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Luckiest Guy" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Fugaz One" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Carter One" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Baloo" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Londrina Shadow" icon="" onclick="gFont(this)"></menuitem>
			</menu>
			<menu label="Handwriting">
				<menuitem label="Sedgwick Ave Display" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Indie Flower" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Kaushan Script" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Kalam" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Architects Daughter" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Neucha" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Merienda" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Aladin" icon="" onclick="gFont(this)"></menuitem>
				<menuitem label="Merienda One" icon="" onclick="gFont(this)"></menuitem>
			</menu>
		</menu>

	</menu>
</body>
</html>

Etiquetas: body, estilos, etiqueta, prueba
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:58.