Jquery pour les débutants (partie 6) - jquery ui et lectures

Dans notre dernière leçon dans ce jQuery pour les débutants

série tutoriel, nous allons jeter un bref coup d`œil à JQuery UI - le plus largement utilisé plugin jQuery pour ajouter des interfaces graphiques utilisateur aux applications Web. De formes de fantaisie et d`effets visuels, aux widgets, draggable filateurs et boîtes de dialogue - jQuery UI vous donne le pouvoir de créer web riche UIs.

Video: Tutoriel jQuery - Initiation à jQuery

Si vous avez pas déjà, assurez-vous de lire nos articles précédents de la série:

• Introduction: Qu`est-ce que est jQuery et pourquoi devriez-vous prendre soin?
• 1: sélecteurs et les bases
• 2: Méthodes
• 3: En attente de chargement de la page et des fonctions anonymes
• 4: Evénements
• Débogage avec Chrome Developer Tools
• 5: AJAX

Qu`est-ce que jQuery UI et Pourquoi devrais-je utiliser?

JQuery UI vous donne tous les éléments nécessaires pour une application web moderne avec une interface graphique. Faute d`une meilleure description, il est une collection de widgets.

Pour avoir une idée rapide de ce que vous pouvez faire avec elle, il suffit de parcourir autour MakeUseOf. Dans la nôtre, le contenu est en fait séparé divs avec une liste non ordonnée pour agir comme un indice. Exécutez la fonction des onglets jQuery sur eux, et ils se tournent comme par magie en onglets. Impressionnant! Vous pouvez même charger le contenu de l`onglet via AJAX si vous voulez.

La page de récompenses utilise également une boîte de dialogue « pop-up modale » pour confirmer l`action de l`utilisateur et le retour des messages. Pour attirer l`attention de l`utilisateur, vous pouvez avoir la boîte de dialogue dim le reste du contenu de la page jusqu`à ce que l`interaction est terminée.

Sur notre Réponses site, nous utilisons simple infobulle fonction de fournir des conseils sur les boutons.

Video: Tutoriel jQuery - jQuery UI Datepicker

JQuery UI excelle vraiment en ce qui concerne les formes, donnant accès à une multitude de curseurs et ramasseurs. Je suis un grand fan de la sélecteur de date moi-même widget que vous pouvez charger sur le dessus d`une zone de saisie de texte normal où l`utilisateur est censé saisir une date.

Video: Tutoriel jQuery - JSON

Attend compliqué non? Pouvez-vous imaginer coder quelque chose comme ça en javascript pur? Voici comment vous le faites avec jQuery UI:

$ ("#dateField").sélecteur de date()-

Je ne vais pas passer plus de temps à expliquer comment il est génial parce que les démos officielles jQuery UI donnent un bon aperçu de toutes les fonctionnalités disponibles ainsi que des exemples de code simples. Allez lire.

Ajout de l`interface utilisateur jQuery

La façon la plus simple de commencer avec jQuery UI est d`ajouter les lignes suivantes à votre tête - mais assurez-vous que ce sont ajoutés après la principale référence jQuery, depuis l`interface utilisateur jQuery nécessite jQuery pour être pré-chargé. Vous avez besoin d`une référence au script de plug-in, et un stylesheet qui contient la description visuelle de ces éléments d`interface utilisateur.

Dans ce cas, nous avons lié au thème appelé « ui-légèreté » - mais il y a une bonne sélection de thèmes pré-faites vous pouvez choisir ici, ou créer votre propre. Gardez à l`esprit que si vous choisissez de créer votre propre thème, il ne sera pas hébergé par Google - choisir un pré-faites un, et ce lien ci-dessus fonctionne très bien en changeant le nom du thème.

Dans WordPress, je trouve la méthode ci-dessus pour être la meilleure façon de l`inclure - assurez-vous de le faire après wp_head () a été appelé. La méthode de WordPress officielle est d`utiliser wp_enqueue_script () cependant, détaillé dans cette question StackExchange.

Personnalisation du téléchargement

Une fonctionnalité du site de téléchargement de jQuery UI est que vous pouvez personnaliser les fonctionnalités que vous voulez, ce qui réduit la taille globale du javascript. La taille totale du script avec tout permis (Non compris une feuille de style, que vous devez inclure aussi) est à propos 230kb. Ainsi, alors que vous pourrait réduire la taille de ce avec un téléchargement personnalisé, si vous utilisez plus de 50% de l`ensemble des fonctionnalités, ce n`est pas vraiment la peine. En utilisant la norme, une bibliothèque complète, vous pouvez utiliser la version hébergée par Google - ce qui est susceptible d`être déjà mis en cache dans le navigateur des utilisateurs de toute façon. Si vous avez seulement besoin de quelques fonctionnalités bien, faire un téléchargement personnalisé et servir un fichier réduit de votre site local.

Ressources

Nous sommes arrivés à la fin de notre mini-série, donc où aller d`ici? Heureusement, c`est l`Internet, et Google est une chose:

Video: Cours complet jQuery - Tutoriel / Formation pour tous

• L`une des meilleures façons d`apprendre est de commencer à l`utiliser pour construire des trucs cool. Voici 19 tutoriels jQuery uniques pour vos projets web.
• 33 (principalement des images liées) idées jQuery.
• Smashing Magazine reste un solide favori sur mon flux RSS, et ils ont une énorme archive de matériel connexe jQuery pour apprendre.
• Tuts + a une série vidéo gratuite de 30 jours sur jQuery qui vaut bien regarder, avec plus de 40 000 abonnés à ce jour!
• Une collection de liens vers 53 tutoriels jQuery, de 1stwebdesigner.

Je vous suggère également apprendre quelques base PHP, que vous aurez besoin de gérer tout AJAX ou le traitement de formes côté serveur. Rappelez-vous, jQuery est juste un langage côté client qui fonctionne dans le navigateur, de sorte que votre fantastique nouvelle application Web ne va pas faire beaucoup sans un traitement côté serveur. WordPress, bien sûr, est une excellente façon de commencer à apprendre PHP en personnalisant thèmes et écrire vos propres plug-ins.Comment AJAX-ifier vos commentaires WordPressComment AJAX-ifier vos commentaires WordPressPar défaut, le système de commentaires WordPress est malheureusement insuffisant. Vous pouvez passer à un système tiers comme Livefyre ou Disqus, mais si vous préférez garder tout dans la maison ou un autre type de ...Lire la suite

Maintenant, prenez un moment pour vous tape dans le dos pour venir loin - vous êtes génial - et ne hésitez pas à partager des commentaires ou peut-être des ressources supplémentaires dans les commentaires.