Notions de base de la jQuery et jQuery UI mise en page CSS

Les fabricants de jQuery et jQuery UI CSS font un bon travail de documenter les données internes de leur bibliothèque. Du point de vue de la CSS, le matériel trouvé à jqueryui.com vous informe sur les styles utilisés pour créer la sortie que vous avez vu en divers endroits. Voici une bonne idée de la façon dont la page initiale de la documentation est aménagé.

Une des premières choses que vous remarquez sur cette page est que les développeurs vous recommandons d'utiliser ThemeRoller pour effectuer vos modifications chaque fois que possible. Cependant, il ya de nombreux cas où ThemeRoller sera tout simplement pas faire le travail, de sorte que vous devez faire les modifications d'une manière plus traditionnelle.

Les classes sont divisées en deux fichiers avec un certain nombre de styles de chaque fichier:

jquery.ui.core.css: Contient tous les styles qui affectent les éléments structurels d'une certaine façon. Ceux-ci inclus

Aides mise en page: Déterminer le plan d'ensemble des objets onscreen- permet d'interagir avec TECHNOLOGIES- assistance et fournit un procédé pour la réinitialisation de la mise en page en fonction des besoins.
Interaction indices: Définit quand un objet est désactivé.
Icônes: Indique l'état de l'icône.
Superpositions: Détermine la taille et la position des superpositions.

jquery.ui.theme.css: Définit tous les styles qui affectent éléments thématiques, comme la couleur, les polices et les milieux. Ceux-ci inclus

Conteneurs de composants: Définition de l'aspect du contenu dans différents conteneurs d'objets. Les conteneurs comprennent normalement l'objet d'ensemble, en-têtes de l'objet, et les données de l'objet (spécifié comme contenu dans les styles).

États d'interaction: Déterminer l'apparence d'un objet lorsque les Etats d'interactions spécifiques se produisent. Les quatre états d'interaction sont: défaut (quand rien ne se passe avec l'objet), vol stationnaire (lorsque le curseur de la souris est sur l'objet), actif (lorsque l'utilisateur effectue en fait une tâche avec l'objet), et de mise au point (lorsque l'utilisateur a sélectionné l'objet, mais ne fait rien avec elle).

Interaction indices: Déterminer l'apparence d'un objet qui est dans un état particulier pour aider l'utilisateur à comprendre l'état de l'objet.

L'interaction indices sont: highlight (l'objet ou le contenu est sélectionné pour l'interaction) - erreur (une erreur est survenue avec un objet) - texte d'erreur (une erreur est survenue avec le contenu, généralement du texte, dans un objet) - désactivé (l'objet ou le contenu sont désactivées) - primaire (un objet est l'objet principal ou de premier niveau dans une hiérarchie d'objets) - et secondaire (un objet est l'objet secondaire ou deuxième niveau dans une hiérarchie d'objets).

Icônes: Définir l'état et le positionnement des icônes utilisées avec un objet. L'état et le positionnement sont contrôlés séparément. Les informations d'état détermine si l'icône est partie d'un en-tête ou le contenu. En outre, il détermine le formatage basé sur l'état de l'icône:, vol stationnaire, point culminant, l'erreur, et le texte d'erreur actif par défaut. Les icônes sont placés individuellement en fonction du nom de l'icône, comme .ui-icon-carat-1-n.

Les icônes sont réellement définis sous forme de blocs dans le cadre de la section de la partie des icônes du fichier états et des images.

Vous pouvez voir les images d'icônes spécifiques au widget ici.

L'icône par défaut des images apparaissent ici.

Vous pouvez trouver les images d'icônes actives ici et ceux qui sont utilisés pour mettre en évidence ici.

Quand une application rencontre une erreur, vous voyez la liste des icônes ici.

Rayon d'angle: Crée coins arrondis sur les différents objets.

Superpositions: Détermine la mise en forme du contenu dans des superpositions et de la mise en forme de l'ombre de recouvrement (de sorte que vous pouvez le voir il ya un objet derrière l'objet à l'avant).

Afin de mieux comprendre comment les choses fonctionnent, il est une bonne idée de regarder les fichiers réels. Vous pouvez trouver le premier fichier à un emplacement tel que http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css où http://code.jquery.com/ui / est l'URL de base, 1.9.2 est la version de jQuery ou jQuery UI en question, et les thèmes / base / jquery.ui.theme.css est l'emplacement de fichier spécifique.

Pour obtenir une copie de la CSS pour une autre version de jQuery ou jQuery UI, il suffit de changer la partie de numéro de version de l'URL. Le deuxième fichier se trouve à un endroit comme http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css. Ceci est ce que vous verrez quand on regarde jquery.ui.core.css.

Affichage des fichiers fournit des détails sur la façon dont les différents styles sont construits, de sorte que vous pouvez apporter des modifications en toute sécurité. En outre, les fichiers contiennent souvent des notes. Par exemple, lorsque vous regardez jquery.ui.theme.css, vous trouvez que l'un des styles est effectivement obsolète (plus pris en charge), tant que cette note vous indique:

/ * Ui-icon-cache-première est obsolète, utilisez ui-icon-cache-start au lieu * /

Le style est commenté de sorte que vous ne pouvez pas l'utiliser. Cependant, la note est toujours importante, car elle vous indique quels style à utiliser à la place.

A propos Auteur

Les méthodes courantes du nœud jquery

La bibliothèque jQuery transforme des objets DOM dans les ganglions jQuery puissants. Le tableau suivant présente quelques-unes des méthodes du noeud jQuery les plus couramment utilisés.MéthodeDescriptionaddClass (), removeClass (), toggleClass…

Comment ajouter jquery à une page

Une fois que vous avez téléchargé ou jQuery savoir où trouver la version de CDN-hébergé, vous devez le référencer dans votre page. jQuery est comme tout fichier javascript externe.Ajouter jQuery locale à une pageTélécharger jQuery et…

Comment intégrer l'jquery prêt () fonction

Un problème commun lors de la programmation javascript est que le programme javascript sera exécuté avant la page est chargée. Vous pouvez accéder aux éléments de HTML sur une page. Cela signifie que vous pouvez également accéder…

Comment installer jquery

Il ya deux façons d'utiliser jQuery, soit téléchargés localement ou sur un réseau de diffusion de contenu (CDN). La copie locale est juste que, un fichier qui se trouve dans votre document racine sur le disque dur de votre serveur. Une version…

Comment sélectionner des éléments avec jQuery

ost de ce que vous faites dans jQuery passe par sélecteurs. Par exemple, vous sélectionnez fréquemment un morceau d'une page Web et ensuite avoir jQuery effectuez une action sur ce morceau de la page. Cette action pourrait être quelque chose de…

Méthodes jQuery pour l'envoi d'une requête AJAX

Comme vous pouvez le voir étudier le tableau suivant, jQuery fournit plusieurs méthodes pour envoyer une requête AJAX au serveur et analyser les résultats.MéthodeDescriptionget (url, paramètres)Envoyer un HTTP GET demander à la givenURL.…

Ressources jquery ligne

Comme vous acquérir de l'expérience avec jQuery, vous aurez probablement des questions sur les techniques les plus avancées jQuery. Et après vous utilisez jQuery plug-ins, vous serez accro et que vous souhaitez obtenir plus. jQuery.com fournit…

Notions de base de la ThemeRoller du CSS3

jQuery et jQuery UI sont des bibliothèques relativement complexes qui fournissent une quantité importante de CSS3 personnalisation. Le problème est que de nombreux développeurs ont aucune idée de la façon d'effectuer la personnalisation…

Comment ajouter un thème à votre projet CSS3

En voyant les échantillons de fournisseurs et de travail à travers la documentation sont utiles, mais la plupart des développeurs veulent voir un thème de CSS3 en action. Dans tous les cas, la seule chose que vous avez vraiment besoin de…

Comment effectuer des transformations de jQuery pour sites CSS3

Il est possible d'utiliser jQuery pour effectuer des transformations et ces transformations sont souvent plus puissant, mais plus facile à utiliser, que les transformations CSS3 indigènes. Cependant, afin d'obtenir cette fonctionnalité, vous…

Comment sélectionner des éléments avec jQuery en CSS3

Vous pouvez utiliser jQuery pour effectuer une vaste gamme de sélections d'objets dans votre application de CSS3, mais pour la plupart, vous utiliser les sélecteurs de base. Vous pouvez en savoir plus sur eux à jQuery. Voici une liste des…

Comment visualiser et accéder CSS3 prédéfini ThemeRoller thèmes

Pour voir la liste des thèmes CSS3 prédéfinis, sélectionnez l'onglet Galerie du menu ThemeRoller montré. Vous voyez une liste des thèmes par son nom. Notez que chaque entrée de thème comprend un aperçu du thème, le nom du thème, et deux…

Comment voir des démos interactives CSS3

Le dossier du développement faisceau CSS3 sur jQuery contient beaucoup de matériel utile. L'un des premiers morceaux que vous devriez regarder est le contenu du dossier démos de développement-paquet, qui contient des exemples de la façon…

Liez votre site Web à la bibliothèque jQuery

Si vous utilisez Galleria de construire un portefeuille de photo pour votre site Web à afficher sur l'iPad et l'iPhone, vous aurez besoin de créer un lien vers la bibliothèque jQuery sur le réseau de distribution de contenu de Google (CDN).La…

godiches.com » Internet & médias sociaux » Web design & développement » Pages web construction » Notions de base de la jQuery et jQuery UI mise en page CSS