Fundamentos del diseño css ui jQuery y jQuery

Los fabricantes de jQuery y jQuery UI CSS hacen un buen trabajo de documentación de la parte interna de su biblioteca. Desde una perspectiva de CSS, el material que se encuentra en jqueryui.com le informa acerca de los estilos utilizados para crear la salida que usted ha visto en varios lugares. He aquí una buena idea de cómo se presenta la página inicial de la documentación.

Una de las primeras cosas que notas en esta página es que los desarrolladores recomiendan utiliza ThemeRoller para realizar los cambios siempre que sea posible. Sin embargo, hay muchos casos en los que ThemeRoller simplemente no hacer el trabajo, por lo que necesita para hacer las modificaciones de una manera más tradicional.

Las clases se dividen en dos archivos con un número de estilos dentro de cada archivo:

jquery.ui.core.css: Contiene todos los estilos que afectan a elementos estructurales de alguna manera. Éstas incluyen

Ayudantes de diseño: Determina la disposición general de los objetos onscreen- hace que sea posible interactuar con tecnologías- de asistencia y proporciona un método para restablecer la disposición según sea necesario.
Señales de interacción: Define cuando un objeto está desactivado.
Iconos: Especifica el estado icono.
Superposiciones: Determina el tamaño y la posición de las placas.

jquery.ui.theme.css: Define los estilos que afectan a elementos temáticos, como el color, fuentes y fondos. Éstas incluyen

Contenedores de componente: Especifique el aspecto del contenido dentro de varios contenedores de objetos. Los contenedores incluyen normalmente el objeto global, cabeceras de objetos y datos de objeto (especificado como contenido dentro de los estilos).

Estados Interacción: Determinar la apariencia de un objeto cuando se producen estados de interacción específicos. Los cuatro estados de interacción son: por defecto (cuando nada está sucediendo con el objeto), vuelo estacionario (cuando el cursor del ratón está sobre el objeto), activo (cuando el usuario está realizando en realidad una tarea con el objeto), y el enfoque (cuando el usuario ha seleccionado el objeto, pero no está haciendo nada con ella).

Señales de interacción: Determinar la apariencia de un objeto que está en un estado en particular para ayudar al usuario a comprender el estado del objeto.

Las señales de interacción son: destacado (el objeto o contenido se selecciona para la interacción) - error (se ha producido un error con un objeto) - texto de error (se ha producido un error con el contenido, por lo general el texto, dentro de un objeto) - disabled (el objeto o contenidos son discapacitados) - primaria (un objeto es el objeto primero de nivel primaria o en una jerarquía de objetos) - y secundaria (un objeto es el objeto secundario o de segundo nivel en una jerarquía de objetos).

Iconos: Definir el estado y la posición de los iconos utilizados con un objeto. El estado y el posicionamiento se controlan por separado. La información de estado determina si el icono es parte de un encabezado o el contenido. Además, se determina el formato basado en el estado del icono: por defecto, suspender, activa, lo más destacado, el error y el texto de error. Los iconos están colocados de forma individual en función del nombre del icono, como .ui-icon quilates-1-n.

Los iconos son en realidad definen en formato de bloque como parte de la sección de la parte de los iconos del archivo de los estados y las imágenes.

Usted puede ver las imágenes de iconos-de widgets específico a aquí.

Las imágenes de iconos por defecto aparecen aquí.

Puede encontrar las imágenes de iconos activos aquí y los que se utilizan para poner de relieve aquí.

Cuando una aplicación experimenta un error, verá la lista de iconos aquí.

Radio de la esquina: Crea esquinas redondeadas en los distintos objetos.

Superposiciones: Determina el formato de contenido dentro superposiciones y el formato de la sombra de superposición (de modo que usted puede ver que hay un objeto detrás del objeto en la parte delantera).

Con el fin de comprender mejor cómo funcionan las cosas, que es una buena idea buscar en los archivos reales. Usted puede encontrar el primer archivo en una ubicación, como http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css donde http://code.jquery.com/ui / es la URL base, 1.9.2 es la versión de jQuery o jQuery UI de que se trate, y los temas / base / jquery.ui.theme.css es la ubicación del archivo específico.

Para obtener una copia de la CSS para una versión diferente de jQuery o jQuery UI, basta con cambiar la parte número de versión de la URL. El segundo archivo se encuentra en un lugar como http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css. Esto es lo que verás cuando se mira en jquery.ui.core.css.

Visualización de los archivos proporciona detalles sobre cómo se construyen los diferentes estilos, así que usted puede hacer modificaciones de forma segura. Además, los archivos a menudo contienen notas. Por ejemplo, cuando nos fijamos en jquery.ui.theme.css, usted encuentra que uno de los estilos está obsoleto en realidad (ya no es compatible), siempre que esta nota te dice:

/ * Ui-icon-buscan-primero es obsoleto, utilice ui-icon-buscan-iniciar lugar * /

El estilo está comentada por lo que no se puede utilizar. Sin embargo, la nota sigue siendo importante, ya que le dice qué estilo a utilizar en su lugar.

Sobre el autor

Los métodos comunes de nodo jQuery

La librería jQuery convierte objetos DOM en poderosos nodos jQuery. La siguiente tabla muestra algunos de los métodos más utilizados del nodo jQuery.MétodoDescripciónaddClass (), removeClass (), toggleClass ()Aplica o quita una clase CSS a un…

Cómo agregar jQuery a una página

Una vez que haya descargado o jQuery sabe dónde encontrar la versión hospedada-CDN, es necesario hacer referencia a él en su página. jQuery es como cualquier archivo externo javascript.Añadir jQuery local para una páginaDescargar jQuery y…

Cómo incorporar el jQuery ready () función

Un problema común en la programación de javascript es que el programa de javascript se ejecutará antes de que se cargue la página. Se puede acceder a los elementos HTML en una página. Esto significa que también puede acceder a cosas…

Cómo instalar jQuery

Hay dos formas de usar jQuery, ya sean descargados de forma local o en una red de entrega de contenido (CDN). La copia local es sólo eso, un archivo que se encuentra dentro de la raíz del documento en el disco duro de su servidor. Una versión…

Métodos jQuery para enviar una solicitud de ajax

Como se puede ver en el estudio de la siguiente tabla, jQuery proporciona varios métodos para enviar una petición AJAX al servidor y analizar los resultados.ProcedimientoDescripciónget (url, parámetros)Enviar un HTTP GET solicitar a la givenURL.…

Recursos jquery Online

A medida que adquiera experiencia con jQuery, es probable que tenga preguntas acerca de las técnicas más avanzadas jQuery. Y después de utilizar jQuery plug-ins, podrás enganchado y quiere conseguir más. jQuery.com ofrece una gran cantidad de…

Cómo establecer estilos predeterminados para objetos en iBooks autor

iBooks Autor le permite insertar todo tipo de objetos, como gráficos y tablas, en su texto. Después de dar formato a todos esos objetos, puede que se pregunte si tiene que volver a crear el mismo formato de objetos similares. Bueno, no lo hace.…

Cómo agregar un tema css3 a su proyecto

Al ver las muestras de los proveedores y de trabajo a través de la documentación son útiles, pero la mayoría de los desarrolladores quieren ver un tema CSS3 en acción. En todos los casos, lo único que realmente necesita modificar es la Copie…

Cómo realizar transformaciones jquery para sitios css3

Es posible utilizar jQuery para realizar transformaciones y estas transformaciones son a menudo más potente, pero fácil de usar, que las transformaciones CSS3 nativos. Sin embargo, a fin de obtener esta funcionalidad, debe descargar un jQuery…

Cómo seleccionar elementos con jQuery en css3

Puede usar jQuery para realizar una amplia gama de selecciones de objetos en su aplicación CSS3, pero en su mayor parte, a utilizar los selectores básicos. Puedes leer más sobre ellos en jQuery. Aquí hay una lista de selectores básicos que…

Cómo ver y acceder css3 predefinido ThemeRoller temas

Para ver la lista de temas CSS3 predefinidos, seleccione la ficha Galería del menú ThemeRoller muestra. Verá una lista de los temas por su nombre. Observe que cada entrada tema incluye una instantánea del tema, el nombre del tema, y dos…

Cómo ver demos css3 interactivos

La carpeta de desarrollo de haz de CSS3 en jQuery contiene una gran cantidad de material útil. Una de las primeras piezas que usted debe mirar es el contenido de la carpeta demos desarrollo paquete, que contiene ejemplos de cómo utilizar los…

maniqui-es.com » Los medios de comunicación de Internet y sociales » Diseño y desarrollo web » Páginas web de construcción » Fundamentos del diseño css ui jQuery y jQuery