javascript - tutorial - ui jquery theme
Un problema con el diálogo jquery cuando se usa themeroller css (4)
Intenté implementar un tema de themeroller con un diálogo y pestañas y resulta que el CSS de themeroller no funciona con jQuery oficial . Especialmente para el diálogo y las pestañas, modificaron las clases de elementos de los jquery oficiales. Vea aquí: http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
El comentario de un usuario:
3) el tema generado que descargué parece estar incompleto: cuando intento usarlo, mis pestañas (que funcionan con el tema de flora, código idéntico al ejemplo de documentación) no se diseñan como pestañas
Al encontrarme con 3, pensé que estaba atascado y tendría que volver a usar "flora" ... Desde entonces, he descubierto leyendo el código fuente del archivo "demo" que si ajusto mi html y doy los <li> elementos que soy usando para mis pestañas la clase "ui-tabs-nav-item", entonces funcionará.
El tema generado por themeroller lamentablemente está incompleto. Si las pestañas están incompletas, me pregunto qué más está incompleto. Fue bastante frustrante. :(
seguido por el comentario de themeroller developers:
3) Echaremos un vistazo a eso. Tiene razón en que esas clases deberían agregarse mediante el complemento. Sin embargo, por ahora, probablemente no le haría mucho daño simplemente agregarlos a su marcado para que pueda usar los temas de Microsoft. Sin embargo, lo comprobaremos. Creo que nuestros selectores podrían estar basados en el selector de ui-pestañas padre, pero creo que estábamos tratando de no usar elementos en nuestros selectores. Considéralo en la lista de cosas por hacer
Las demos para el diálogo jquery ui usan el tema "flora". Quería un tema personalizado, así que usé themeroller para generar un archivo css. Cuando lo usé, todo parecía funcionar bien, pero más tarde descubrí que no puedo controlar ningún elemento de entrada contenido en el cuadro de diálogo (es decir, no puedo escribir en un campo de texto, no puedo marcar las casillas de verificación). Investigaciones posteriores revelaron que esto sucede si establezco el atributo de diálogo "modal" en verdadero. Esto no sucede cuando uso el tema de flora.
Aquí está el archivo js:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
Aquí está el html que usa el tema de la flora:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Aquí está el html que usa el tema themeroller descargado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Como puede ver, solo los nombres de clases y archivos css mencionados son diferentes. ¿Alguien tiene una pista sobre lo que podría estar mal?
@David: Lo probé, y parece que no funciona (ni en FF ni en IE). Probé css en línea:
style="z-index:5000"
y también lo he intentado haciendo referencia a un archivo css externo:
#SERVICE03_DLG{z-index:5000;}
Pero ninguno de estos funciona. ¿Me estoy perdiendo algo de lo que sugirió?
Editar:
¡Resuelve por brostbeef!
Como originalmente estaba usando flora, había asumido erróneamente que tenía que especificar un atributo de clase. Resulta que esto solo es cierto cuando realmente usa el tema de flora (como en las muestras). Si usa el tema personalizado, especificar un atributo de clase provoca ese comportamiento extraño.
Después de jugar con esto en Firebug, si agrega un atributo z-index mayor que 1004 a su div predeterminado, id de "SERVICE03_DLG", entonces funcionará. Le daría algo extremadamente alto, como 5000, solo para estar seguro.
No estoy seguro de qué es lo que causa esto en themeroller CSS. Probablemente hayan cambiado o descuidado el atributo de posición del div de destino que se convierte en un diálogo.
Hombre, esta es una buena. He intentado hacer un montón de cosas en estas dos páginas. ¿Has intentado simplemente dejar el CSS por completo y probar ambas páginas? Utilicé Firebug para eliminar el CSS del encabezado en ambas páginas, y la entrada todavía funcionaba en una y no en la otra, pero me inclino a creer que Firebug no elimina completamente el CSS de la representación y usted Obtendrás resultados diferentes si realmente lo eliminas del código.
También descubrí que puedes pegar texto en el cuadro de texto con el mouse, pero no acepta la entrada del teclado. Sin embargo, no parece haber ningún controlador de eventos que interfiera con esto.
Creo que es porque tienes las clases diferentes.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (personalizado)
Incluso con el tema de la flora, aún se usaría la clase de ui-dialog para definirlo como un diálogo.
He hecho modales antes y nunca he definido una clase en la etiqueta. jQueryUI debería encargarse de eso por ti.
Intenta deshacerte del atributo de clase o usa la clase "ui-dialog".