Latest web development tutorials

tema de diseño de interfaz de usuario jQuery

Estructura de archivos

El tema es una manera específica para aumentar su facilidad de uso. Típicamente, la estructura de directorio de archivos es la siguiente:

  • themename/ - su tema debe estar completamente contenida en un nombre de tema por separado llamada carpeta.
  • themename/themename.css - Este es un archivo básico de CSS. Independientemente de qué plug-ins, el archivo debe ser referenciado en cada una de las páginas usando temas. El archivo debe ser ligero, incluye sólo los puntos principales.
  • themename/themename.pluginname.css - cada widget que requiere el apoyo de un archivo CSS. Nombre del plugin debe estar directamente incluido en el nombre del archivo. Por ejemplo, si la tematización de pestañas (tab) plug-in, se encuentran: themename.tabs.js .
  • themename/img.png - El tema puede contener imágenes. Pueden ser nombrados de acuerdo a su preferencia, no existe una convención de nomenclatura específica.

Para aprender cómo la estructura de archivos de temas se completa casos, visite el tema básico jQuery UI .

estilo personalizado

Escribir el estilo del tema es muy simple, es porque el tema de la flexibilidad.

Todos los temas deben tener una clase básica de CSS. La clase principal tema permite al usuario activar discapacitados. Su formato de la clase raíz debe ser .ui-themename . Y utilizarlo en un archivo HTML de la siguiente manera:

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

En el ejemplo anterior, algunas cosas importantes ocurrieron:

  • También cargamos dos temas para el documento.
  • Todas las máquinas de todo contenido de la página, se lleva a cabo de acuerdo con el tema de THEMENAME estilos.
  • Sin embargo, con la clase ui-othertheme de <div> y cada elemento (incluyendo cuadros de diálogo modales) se llevan a cabo de acuerdo con el tema de estilos othertheme.

Si abrimos themename.css archivo para su visualización, podemos ver el siguiente código:

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Tenga en cuenta, themename.css archivo incluye sólo la información de estilo global universal, la información de estilo para un widget en particular no está aquí para ser definido. Aquí el estilo de todos los temas son aplicables. No se preocupe acerca de un tema que ocupará varios archivos - éstos se simplificarán en el proceso de creación y la descarga.