Comment ajouter des thèmes à vos éléments ajax pour HTML5 et CSS3 programmation

L'outil de thème jQuery rend très facile à décorer vos éléments par CSS3. La grande chose à propos de thèmes jQuery est qu'ils sont semantic- qui est, vous spécifiez l'objectif général de l'élément, puis laissez le thème appliquer le CSS spécifique approprié. Vous pouvez utiliser l'application ThemeRoller de créer facilement de nouveaux thèmes ou de modifier celles qui existent déjà.

Bon nombre des éléments de l'interface jQuery utiliser automatiquement le thème CSS actuelle. Bien sûr, vous pouvez également les appliquer à l'un de vos propres éléments pour obtenir un aspect cohérent.

Les thèmes sont tout simplement des classes CSS. Pour appliquer un thème CSS pour un élément, vous pouvez simplement ajouter une classe spéciale à l'objet.

Par exemple, vous pouvez faire un look de paragraphe comme la définition actuelle de la ui-widget en ajoutant ce code à elle:

Mon div ressemble maintenant à un widget

Bien sûr, l'ajout de classes dans le code HTML viole l'un des principes de la conception sémantique, il est donc préférable de faire le travail en javascript avec jQuery:

 fonctionner themify () {// ajouter CSS thématique à la elements$("div").addClass("ui-widget").addClass("ui-widget-content").addClass("ui-corner-all")-$(":header").addClass("ui-widget-header").addClass("ui-corner-all")-$("#resizeMe").append('') -}

La themify () fonction ajoute tous les thèmes aux éléments de la page, en appliquant le joli thème jQuery pour elle.

1. Identifier tous les divs avec jQuery.

2. Ajouter le ui-widget classe à tous les divs.

   Cette classe est définie dans le thème. Tous les thèmes jQuery ont cette classe définie, mais les détails varient selon le thème. De cette façon, vous pouvez échanger sur un thème pour modifier l'apparence, et le code fonctionne toujours. La ui-widget classe définit un élément sous forme de widget.

3. Ajouter ui-widget-contenu aussi bien.

   Les divs besoin d'avoir deux classes attachés, de sorte que certains programmeurs utilisent le chaînage de préciser que divs devraient également être membres de la classe. Ce ui-widget-contenu classe indique que le contenu du widget doivent être coiffés.

4. 
   
   
   
   

   Spécifiez coins arrondis.

   Les coins arrondis sont devenus un standard de la conception visuelle web 2.0. Cet effet est extrêmement facile à réaliser avec jQuery - il suffit d'ajouter le UI-coin-tout classe à tout élément que vous voulez avoir des coins arrondis.

   Les coins arrondis utilisent CSS3, qui ne sont pas encore pris en charge par tous les navigateurs. Votre page ne sera pas montrer des coins arrondis dans les anciens navigateurs, mais la page fonctionnera encore autrement.

5. Faire tous les titres sont conformes au style de widgets tête.

   Les thèmes jQuery comprennent un style de titre belle. Vous pouvez facilement faire toutes les balises de titre (H1 à H6) suivent ce thème. Utilisez le :entête filtrage pour identifier toutes les rubriques, et d'appliquer la ui-widget-entête et UI-coin-tout les classes à ces en-têtes.

Le paquet jQuery UI prend en charge un certain nombre de classes intéressantes.

Quelques autres classes sont définies dans l'interface utilisateur thèmes, mais ceux-ci sont le plus couramment utilisé. Reportez-vous à la documentation actuelle jQuery UI pour plus de détails.

Comment ajouter une icône

Notez la petite start qui apparaît à l'intérieur de l'élément. Cet élément est un exemple d'une icône jQuery UI. Tous les thèmes jQuery en charge un ensemble standard d'icônes, qui sont de petits carrés de (16px) images. L'icône ensemble comprend des icônes standard pour les flèches ainsi que des images couramment utilisés dans les menus et barres d'outils.

Certains éléments jQuery UI utilisent des icônes automatiquement, mais vous pouvez également ajouter directement. Pour utiliser une icône dans vos programmes, procédez comme suit:

1. Inclure un thème jQuery UI.

   Les icônes font partie du paquet de thème. Inclure la feuille de style CSS qui correspond avec le thème.

2. Assurez-vous que les images sont accessibles.

   Lorsque vous téléchargez un paquet de thème, il comprend un répertoire d'images. Les images incluses dans ce répertoire sont utilisés pour créer des fonds personnalisés ainsi que des icônes. Le fichier CSS attend un répertoire appelé à être dans le même répertoire que le CSS.

   Ce répertoire doit contenir plusieurs images qui commencent par UI-icônes. Ces images contiennent toutes les icônes nécessaires. Si les fichiers icône d'image ne sont pas disponibles, les icônes ne seront pas afficher.

3. Créer une travée où vous souhaitez l'icône apparaisse.

   Placez un élément span vide où vous voulez l'icône apparaisse dans le code HTML. Vous pouvez placer la sensibilité directement dans le code HTML si vous voulez, ou vous pouvez l'ajouter à travers jQuery.

4. Fixez le UI-icône classe à la durée.

   Cela indique jQuery pour traiter la durée comme une icône. Le contenu de la durée seront cachés, et la durée seront redimensionnées à maintenir une image de 16 pixels icône carrée.

5. Fixez une deuxième classe d'identifier l'icône spécifique.

   Regardez la page de ThemeRoller pour voir les icônes disponibles. Lorsque vous survolez une icône sur cette page, vous pouvez voir le nom de la classe associée à l'icône.

Vous pouvez ajouter le code directement dans votre code HTML comme ceci:

Ceci est mon texte

Ou, vous pouvez utiliser jQuery pour ajouter le code approprié à votre élément:

$ ("# myPara"). append ('') -