jQuery UI est un ensemble de widgets et de plugins créés par les développeurs jQuery eux-mêmes. À mon avis, cet outil doit être étudié autant que nécessaire pour ne pas écrire ses propres « vélos ». Vous pouvez télécharger et découvrir ce module complémentaire pour jQuery sur la page d'accueil du projet - http://jqueryui.com/.

Que devons-nous savoir sur les widgets et les plugins ? Le premier est ce qu’ils sont et le second est leur fonctionnement. Je vais essayer de m'attarder sur ces deux points.

Interactivité

Je vais commencer par des plugins utiles qui peuvent faciliter la vie lors de la création d'interfaces interactives :

• Déplaçable – ce composant vous permet de rendre n'importe quel élément DOM déplaçable avec la souris
• Droppable est une extension logique du composant Draggable ; nécessaire pour travailler avec des conteneurs dans lesquels vous pouvez glisser et déposer des éléments
• Redimensionnable – comme son nom l'indique, vous permet de redimensionner n'importe quel élément du DOM
• Sélectionnable – vous permet d’organiser la « sélection » des éléments ; pratique à utiliser pour organiser la gestion des images
• Sortable – trier les éléments du DOM

Widgets

Les widgets constituent déjà une solution complète contenant non seulement du code JavaScript, mais également une implémentation de HTML et CSS :

Tous les widgets et plugins sont liés au noyau de l'interface utilisateur jQuery, mais il existe également des dépendances entre les plugins eux-mêmes et il convient de les garder à l'esprit. Mais ne vous inquiétez pas - lors de la création d'un package jQuery UI, toutes les dépendances sont vérifiées automatiquement, c'est-à-dire lorsque vous avez besoin d'un widget précédemment non connecté, il est préférable de télécharger à nouveau l'assembly.

Utilitaires

Nous n'avons pas beaucoup d'utilitaires - voici un plugin Position utile qui vous permet de contrôler la position des éléments DOM - http://jqueryui.com/position/, et il existe également une usine pour créer des widgets, mais je vais parlons-en un peu plus tard.

Effets

Parmi les effets fournis par jQuery UI, je souligne quatre points :

• Animation couleur
• Animation de changement de classe
• Ensemble d'effets
• Extension des capacités d’assouplissement

Le composant « Effects Core » est responsable de l'animation des couleurs, qui vous permet d'animer les changements de couleur à l'aide de la fonction « .animate() » :

$("#my" ).animate(( backgroundColor: "black" ), 1000 );

Oui, oui, jQuery de base ne peut pas faire cela, mais jQuery UI vous permet d'animer les paramètres suivants :

• Couleur de l'arrière plan
• borderBottomColor
• borderLeftColor
• bordureDroiteCouleur
• bordureTopColor
• couleur
• contourCouleur

Une autre fonctionnalité contenue dans « Effects Core » est l'animation des changements dans la classe d'un élément DOM, c'est-à-dire lorsque vous attribuez une nouvelle classe à un élément, au lieu de l'application instantanée habituelle de nouvelles propriétés CSS, vous verrez une animation de ces propriétés depuis les propriétés actuelles vers celles spécifiées dans la classe attribuée. Pour utiliser cette fonctionnalité, nous aurons besoin de vieux amis - les méthodes « .addClass() », « .toggleClass() » et « .removeClass() », avec une seule différence - lors de l'appel de la méthode, la vitesse d'animation doit être spécifiée comme deuxième paramètre :

$("#my" ).addClass("active" , 1000 ); $("#my" ).toggleClass("active" , 1000 ); $("#my" ).removeClass("active" , 1000 );

Si à partir du paragraphe précédent vous ne comprenez pas ce qui se passe, alors ce code est fait pour vous :

#my ( font-size :14px ; ) #my .active ( font-size :20px ; ) $(function () ( $("#my" ).addClass("active" , 1000 ); // ici, ça tourne de la même manière, appelez ensuite $("#my" ).animate(("font-size" :"20px" ), 1000 ); ));

Il existe également une méthode « .switchClass() » qui remplace une classe par une autre, mais je ne l'ai jamais trouvée utile.

Je ne parlerai pas longtemps de l'ensemble des effets, il vaut mieux les voir en action sur la page http://jqueryui.com/effect/. Pour travailler avec des effets, la méthode « .effect() » apparaît, mais il vaut mieux ne pas l'utiliser seule, car l'interface utilisateur a étendu les fonctionnalités des méthodes intégrées « .show() », « .hide( ) » et « .toggle() ». Désormais, en passant le nom de l'effet comme paramètre de vitesse d'animation, vous obtiendrez le résultat souhaité :

$("#mon" ).hide("puff" ); $("#mon" ).show("transfert" ); $("#mon" ).toggle("exploser" );

Je vais donner une liste d'effets, peut-être que quelqu'un s'en souviendra : aveugler, rebondir, agrafer, déposer, exploser, plier, surligner, souffler, pulser, mettre à l'échelle, secouer, dimensionner, glisser, transférer.

Si à tout moment vous devez apporter des modifications au thème, ouvrez le fichier « jquery-ui-#.#.##-custom.css » et recherchez la ligne commençant par le texte « Pour afficher et modifier ce thème, visitez http:.. " Suivez le lien fourni et utilisez ThemeRoller pour apporter les modifications nécessaires.

Nous écrivons notre propre widget

Le point de départ pour vous lors de l'écriture d'un widget pour jQuery UI sera la documentation officielle, mais comme tout le monde n'a pas une bonne connaissance de l'anglais, j'essaierai de traduire et d'adapter les informations qui y sont présentées.

La première chose qui mérite d'être mentionnée est que les règles d'écriture de plugins pour jQuery sont trop imposantes, ce qui ne contribue pas à leur qualité. Lors de la création de l'interface utilisateur jQuery, nous avons décidé de standardiser le processus d'écriture des plugins et des widgets. Je ne peux pas dire à quel point l’idée a été un succès, mais elle était clairement meilleure qu’elle ne l’était. Je vais commencer par décrire le framework de votre widget :

$.widget("book.expose" , ( // options de paramètres par défaut : ( couleur : "red" ), // initialisation du widget // apporter des modifications au DOM et attacher les gestionnaires _create: function () ( this .element; / / l'objet recherché dans le wrapper jQuery this .name; // name - expose ce .namespace; // space - book this .element.on("click." +this .eventNamespace, function () ( console .log(" cliquez sur " ); )); ), // la méthode est chargée d'appliquer les paramètres _setOption: function ( key, value ) ( // appliquer les modifications aux paramètres this ._super("_setOption" , key, value); ), // la méthode _destroy doit être l'opposé de _create // elle doit supprimer toutes les modifications apportées au DOM et supprimer tous les gestionnaires, le cas échéant, _destroy: function () ( this .element.off("." +this .eventNamespace) ; ) ));

Je m'explique pour ceux qui n'ont pas lu les commentaires :

options – stockage des paramètres du widget pour un élément spécifique

Create() – est responsable de l'initialisation du widget – ici, les changements doivent se produire dans le DOM et les gestionnaires d'événements doivent être « bloqués ».

Destroy() est l'antipode de "_create()" - il devrait nettoyer tout ce que nous avons jeté

SetOption(key, value) – cette méthode sera appelée lorsque vous tenterez de modifier des paramètres :

$("#mon" ).expose((clé:valeur))

Un œil observateur remarquera que toutes les méthodes répertoriées commencent par un trait de soulignement - c'est une façon de mettre en évidence les méthodes « privées » qui ne sont pas disponibles pour l'exécution. Si nous essayons d'exécuter "$("#my").expose("_destroy")", nous obtiendrons une erreur. Mais gardez à l’esprit qu’il ne s’agit que d’un accord, respectez-le !

Pour contourner l'accord de confidentialité, vous pouvez utiliser la méthode « data() » :

$("#my" ).data("expose" )._destroy() // place pour le smiley "(mal)"

Dans cet exemple, j'ai essayé de donner un bon ton pour l'écriture de widgets - j'ai « suspendu » les gestionnaires d'événements dans l'espace de noms. Cela vous donnera la possibilité de contrôler ce qui se passe dans le futur sans avoir à entrer dans le code du widget. "Histoire vraie".

Le code décrit dans la méthode « _destroy() » est redondant, car il est déjà exécuté dans le public « destroy() ». Présenté ici pour plus de clarté.

Et pour les paresseux, afin de ne pas écrire à chaque fois « eventNamespace » dans les gestionnaires d'événements, les développeurs ont ajouté deux méthodes dans la version 1.9.0 : « _on() » et « _off() ». Le premier prend deux paramètres :

• Élément DOM ou sélecteur ou objet jQuery
• un ensemble de gestionnaires d'événements en tant qu'objet

Tous les événements répertoriés seront « suspendus » dans l'espace « eventNamespace », c'est-à-dire le résultat sera probablement le même :

this ._on(this .element, ( mouseover:function (event ) ( console .log("Bonjour la souris" ); ), mouseout:function (event ) ( console .log("Bye mouse" ); ) ));

La deuxième méthode, "_off()", vous permet de désactiver sélectivement les gestionnaires :

this ._off(this .element, "mouseout click" );

Bon, le cadre est une chaloupe, il est temps de passer à la fonctionnalité. Ajoutons une fonction arbitraire avec des fonctionnalités arbitraires :

Appelez-moi:fonction () ( console .log("Bonjour ?" ); )

Nous pouvons facilement accéder à cette fonction à la fois depuis d’autres méthodes de widgets et depuis l’extérieur :

// de l'intérieur de ce .callMe() // de l'extérieur $("#my" ).expose("callMe" )

Si votre fonction prend des paramètres, alors ils sont passés de la manière suivante :

$("#my" ).expose("callMe" , "Bonjour!" )

Si vous souhaitez accéder à une méthode widget dans le gestionnaire d'événements, alors n'oubliez pas la portée de la variable et effectuez la manœuvre suivante :

( _create: function () ( var self = this ; // le voici! this .element.on("click." +this .eventNamespace, function () ( // utilisez self ici, car cela pointe déjà vers // élément sur lequel on clique self.callMe(); )) ) )

Bon, allons-y, parlons maintenant des événements. Pour un développement et une mise en œuvre plus flexibles des widgets, des fonctionnalités sont fournies pour créer des événements arbitraires et les « écouter » :

// déclenche l'événement this ._trigger("incomingCall" ); // s'abonner à l'événement lors de l'initialisation du widget $("#my" ).expose(( incommingCall: function (ev ) ( console .log("din-don" ); ) )) // ou après, en utilisant le nom de l'événement // nom du widget + nom de l'événement $("#my" ).on("exposeincomingCall" , function () ( console .log("tru-lya-lya" ) ));

Il y a beaucoup de matériel, je comprends, mais j'ajouterai également une description de plusieurs méthodes qui peuvent être appelées depuis le widget lui-même :

Delay() – cette fonction fonctionne comme « setTimeout() », seul le contexte de la fonction passée pointera vers le widget lui-même (c'est pour ne pas s'embêter avec la portée)

Hoverable() et _focusable() – ces méthodes doivent être alimentées en éléments pour lesquels il est nécessaire d'écouter les événements « hover » et « focus » afin d'ajouter automatiquement les « ui-state-hover » et « ui-state "-focus" cours à eux quand ils se produisent ces

Hide() et _show() – ces deux méthodes sont apparues dans la version 1.9.0, elles ont été créées pour standardiser le comportement des widgets lors de l'utilisation de méthodes d'animation ; Les paramètres sont généralement masqués dans les options sous les touches « Masquer » et « Afficher », respectivement. Les méthodes doivent être utilisées comme suit :

( options : ( hide : ( effet : "slideDown" , // les paramètres sont équivalents à la durée d'appel : 500 // .slideDown(500) ) ) ) // les appels à _hide() et _show() doivent être utilisés à l'intérieur du widget this ._hide(this .element, this .options.hide, function () ( // ceci est notre console de fonction de rappel .log("hidden" ); ));

Il existe quelques autres méthodes qui ont été mises en œuvre avant nous :

( activer : fonction () ( renvoyer ceci ._setOption("disabled" , false ); ), désactiver : fonction () ( renvoyer ceci ._setOption("disabled" , true ); ) )

En fait, ces fonctions créent un synonyme à appeler :

$("#my" ).expose(( "disabled" : true )) // ou false

Notre tâche consiste simplement à suivre cet indicateur dans la méthode « _setOption() ».

Introduction à la bibliothèque jQuery UI pour créer des interfaces utilisateur. Brèves instructions pour les débutants.

Qu’est-ce que l’interface utilisateur de jQuery ?

jQuery UI (de l'anglais) Interface utilisateur jQuery) est une bibliothèque de widgets et d'interactions construite sur la bibliothèque JavaScript jQuery qui peut être utilisée pour créer des applications Web hautement interactives.

Pour vous familiariser visuellement avec les capacités de la bibliothèque jQuery UI, visitez la page : Démos & Documentation - sur le site Web jqueryui.com.

Maintenant que vous comprenez ce qu'est jQuery UI, vous pouvez commencer à sélectionner les composants nécessaires au chargement : UI Core (les principales fonctions de l'interface utilisateur), Interactions (interactions), Widgets (widgets), Effets (effets) et Thème (thèmes de conception) - créant ainsi votre propre copie de la bibliothèque jQuery UI. Pour ce faire, visitez la page : Créez votre téléchargement. Là, vous pouvez télécharger rapidement la dernière version stable ou héritée de la bibliothèque jQuery UI.

L'archive ZIP de la bibliothèque jQuery UI que vous avez téléchargée contiendra les éléments suivants :

Pour connecter la bibliothèque jQuery UI, trois liens suffisent généralement : UI theme CSS, jQuery library et jQuery UI. Cela pourrait ressembler à ceci :

Une fois que vous avez inclus les fichiers nécessaires, vous pouvez commencer à ajouter les widgets nécessaires à votre page. Par exemple, pour créer un DatePicker (de l'anglais. sélection des dates, ajoutez un module texte :

Et aussi du code JavaScript :

$(function())( $("#date").datepicker(); ));

Le résultat de l'interprétation par le navigateur de l'exemple ci-dessus ressemblera à ceci :

Configuration de l'interface utilisateur jQuery

jQuery UI est personnalisable de plusieurs manières. Vous savez déjà comment charger votre copie de la bibliothèque jQuery UI avec les composants dont vous avez besoin, mais il existe d'autres options pour personnaliser ce code afin de l'implémenter.

Utilisation des options. Chaque composant de jQuery UI possède un certain nombre de paramètres par défaut. En même temps, vous pouvez toujours les modifier en utilisant « option » (de l'anglais. option), en transmettant la valeur requise au composant.

Par exemple, afin de définir le format de date pour le widget DatePicker, vous pouvez utiliser l'option : dateFormat.

$("#date").datepicker(( dateFormat: "aa-mm-jj" ));

Vous pouvez obtenir la valeur de l'option après le lancement du widget comme suit :

var dateFormat = $("#date").datepicker("option", "dateFormat");

Vous pouvez spécifier la valeur de l'option après avoir lancé le widget comme suit :

$("#date").datepicker("option", "dateFormat", "aa-mm-jj");

Personnalisation visuelle. Pour personnaliser votre propre thème, jQuery UI inclut ThemeRoller, qui vous permet de personnaliser visuellement les composants de votre interface. Vous pouvez utiliser et en savoir plus sur cet outil en visitant la page :

Installation de la bibliothèque jQuery UI

Le téléchargement et l'installation de la bibliothèque jQuery UI sont à certains égards plus difficiles que les autres bibliothèques JavaScript. Ce processus ne demande pas vraiment beaucoup de travail, mais il nécessite une explication, à laquelle est consacré cet article. Pour parcourir les exemples, vous n'aurez besoin que d'installer la version de développement de la bibliothèque, mais ce qui suit décrit également comment installer des fichiers minifiés destinés au déploiement en production et comment utiliser l'interface utilisateur jQuery sur les réseaux de distribution de contenu (CDN).

Obtenir la bibliothèque jQuery UI

Le processus de chargement de la bibliothèque jQuery UI est un peu plus complexe que les autres bibliothèques JavaScript, mais les résultats en valent la peine. La bibliothèque jQuery UI couvre cinq domaines de fonctionnalités et vous avez la possibilité de configurer vous-même l'archive de démarrage, en incluant uniquement les composants nécessaires. Cette partie vous présentera toutes les fonctionnalités de la bibliothèque jQuery UI, mais lorsque vous travaillez avec de vraies applications Web, vous pouvez éliminer les composants inutiles pour réduire la taille de la bibliothèque chargée par les navigateurs.

Sélection d'un thème

Avant de commencer à créer votre propre bibliothèque jQuery UI, vous devez choisir un thème. La bibliothèque jQuery UI offre une multitude d'options et d'options de configuration, ce qui facilite la modification de l'apparence de n'importe quel outil que vous utilisez. En fait, le nombre de choix disponibles est si grand qu’il est parfois vraiment écrasant.

Sur le site jQuery UI, vous pouvez utiliser les services d'une application spéciale - un personnalisateur de thème (Themeroller), mais en plus il existe toute une galerie de thèmes prédéfinis, entièrement prêts à l'emploi, parmi lesquels vous pouvez choisir celui qui vous convient. la plupart, et ainsi vous faciliter la vie.

Commencez par visiter jqueryui.com et cliquez sur le bouton Thèmes. Cela ouvrira la page ThemeRoller, affichant les widgets jQuery UI et un panneau de paramètres à leur gauche, avec lequel vous pourrez définir les options du thème, comme indiqué dans la figure :

Si vous avez déjà un style visuel spécifique auquel vous devez adhérer et que vous souhaitez que l'interface visuelle des outils JQuery UI soit cohérente avec le reste du site ou de l'application, alors l'onglet Roll Your Own (qui est sélectionné par défaut ) c'est juste cela. Vous pouvez modifier n'importe quel aspect de la conception à l'aide du jeu de styles CSS utilisé par la bibliothèque jQuery UI.

Pour obtenir l'un des thèmes prêts à l'emploi, accédez à l'onglet Galerie. Au moment de la rédaction de cet article, la galerie comprend 24 thèmes, couvrant un large éventail d'options de couleurs - des tons sourds et subtils aux tons vifs et provocateurs. Lorsque vous cliquez sur les thèmes de la galerie, l'apparence des widgets affichés sur le reste de la page se mettra à jour en conséquence, vous donnant un avant-goût de ce à quoi pourrait ressembler l'application :

Le thème par défaut utilisé pour jQuery UI s'appelle UI légèreté, mais ce thème n'a pas assez de contraste, j'utiliserai donc le thème Sunny, qui est un peu meilleur. La seule chose qui vous est demandée maintenant est de retenir le nom du sujet qui vous convient.

Création d'une archive de téléchargement de bibliothèque jQuery UI personnalisée

Une fois que vous avez choisi un thème, vous pouvez commencer à créer votre propre téléchargement de bibliothèque jQuery UI. Cliquez sur le bouton Télécharger en haut de la page pour accéder à la page Download Builder. Vous verrez une liste de composants jQuery UI divisés en quatre groupes fonctionnels : UI Core, Interactions, Widgets et Effets.

En choisissant uniquement les fonctionnalités dont votre projet a réellement besoin, vous réduirez la taille de l'ensemble des fichiers que les navigateurs doivent télécharger. Ce n’est pas une mauvaise idée en soi, mais j’adopte une approche différente. De mon point de vue, il est préférable d'économiser une partie de votre bande passante de communication et de décharger la tâche de fourniture de l'interface utilisateur jQuery aux navigateurs vers l'un des réseaux de distribution de contenu, dont nous parlerons plus tard.

Vous aurez besoin de tous les composants pour exécuter les exemples, alors assurez-vous que toutes les cases sont cochées.

Il existe des dépendances entre certains des composants de la liste, mais vous n'y penserez peut-être pas lorsque vous créez votre propre version de la bibliothèque. Si vous sélectionnez un composant, tous les composants dont il dépend seront chargés en même temps.

L'étape suivante consiste à choisir un sujet. Cela se fait à l'aide de la liste déroulante située en bas de page, comme le montre la figure :

Vous avez également la possibilité de sélectionner une version spécifique de la bibliothèque jQuery UI à inclure dans l'archive de téléchargement. Vous devrez télécharger la version stable, qui fonctionne avec toutes les versions de la bibliothèque jQuery à partir de la version 1.3.2.

Après avoir sélectionné tous les composants et sélectionné le thème et la version stable, téléchargez l'archive de téléchargement de la bibliothèque jQuery UI personnalisée que vous avez créée en cliquant sur le bouton Télécharger.

Installation de la version de développement de la bibliothèque jQuery UI

Le téléchargement de jQuery UI contient tous les fichiers nécessaires pour utiliser la bibliothèque en développement et en production. Pour travailler avec les exemples, vous aurez besoin de fichiers contenant du code source non compressé et destinés à être utilisés pendant le développement. Si vous rencontrez des problèmes, vous pouvez facilement examiner le code pour vous familiariser avec les composants internes de la bibliothèque jQuery UI, ce qui sera inestimable pour déboguer vos scripts.

Vous devez copier les fichiers et dossiers suivants dans le dossier des fichiers d'exemple :

bundle de développement\ui\jquery-ui.custom.js ;

bundle de développement\themes\sunny\jquery-ui.css ;

dossier development-bundle\themes\sunny\images.

Les noms de fichiers JavaScript et CSS incluent le numéro de version de la version de la bibliothèque téléchargée. Dans mon cas, il s'agit de la version 1.10.3. La bibliothèque jQuery UI est en cours de développement actif et vous pourrez peut-être télécharger une version ultérieure à la 1.10.3.

Connexion de la bibliothèque jQuery UI à un document HTML

Il ne vous reste plus qu'à inclure la bibliothèque jQuery UI dans votre document HTML. Vous pouvez le faire en ajoutant des éléments de script et de lien à votre document contenant des liens vers les fichiers JavaScript et CSS que vous avez téléchargés, comme indiqué dans l'exemple ci-dessous :

bibliothèque jQuery

Il n'est pas nécessaire de créer un lien direct vers le dossier images. Tant que le dossier images et le fichier CSS sont en place, jQuery UI pourra trouver indépendamment toutes les ressources nécessaires.

La bibliothèque jQuery UI dépend de la bibliothèque jQuery. Pour utiliser jQuery UI dans un document, celui-ci doit d'abord y être connecté. La bibliothèque jQuery UI n'est pas une bibliothèque autonome.

Le document présenté dans l'exemple ci-dessus contient un test simple pour vérifier que la bibliothèque jQuery UI est correctement incluse. Si la page s'ouvre normalement, vous devriez voir un bouton similaire à celui montré sur la figure. Ignorez pour l'instant l'appel à la méthode bouton() sur l'élément de script. Vous découvrirez à quoi il est destiné et comment il fonctionne dans le prochain article.

Si vous orthographiez mal le chemin d’accès à l’une des deux bibliothèques, vous verrez à la place un simple lien.

Installation de la bibliothèque jQuery UI pour l'environnement de production

Une fois que vous avez terminé de développer votre application Web et que vous êtes prêt à la déployer, vous pouvez utiliser des versions réduites des fichiers inclus dans l'archive téléchargée. Ces fichiers sont plus petits, mais leur contenu ne sera pas facile à lire si nécessaire à des fins de débogage. Pour utiliser les versions de déploiement des fichiers, copiez les fichiers et dossiers suivants dans le répertoire de votre serveur Web :

jquery-ui-1.10.3.custom.min ;

jquery-ui-1.10.3.custom.min

dossier css\sunny\images

Le dossier images et le fichier CSS ici sont les mêmes que dans la version de développement ; les modifications ne peuvent affecter que le fichier JavaScript. Pour effectuer une nouvelle installation, copiez simplement ces fichiers dans le répertoire du serveur.

Utilisation de la bibliothèque jQuery UI via un réseau de distribution de contenu

La problématique de l’utilisation d’un CDN pour charger la bibliothèque jQuery a déjà été abordée précédemment. Si vous êtes fan de cette approche, vous serez heureux de savoir que vous pouvez faire la même chose avec la bibliothèque jQuery UI. Google et Microsoft proposent tous deux l'hébergement des fichiers jQuery UI sur leurs CDN. Pour notre exemple de base, j'utilise le service de Microsoft car il fournit à la fois des fichiers JavaScript jQuery UI et des skins standard.

Pour utiliser un CDN, vous devez disposer des URL des fichiers dont vous avez besoin. S'il s'agit d'un service Microsoft, accédez à la page Microsoft Ajax Content Delivery Network. En faisant défiler la page, vous verrez une liste de liens correspondant aux différentes versions de jQuery UI. Cliquez sur le lien de la version que vous utilisez (dans mon cas, il s'agit de la version 1.10.3). Vous verrez les URL des versions régulières et réduites du fichier de bibliothèque jQuery UI.

Le reste de la page affiche des thèmes prédéfinis, avec une URL de fichier CSS sous chaque thème.

Pour connecter ces fichiers à votre document via un CDN, placez simplement les éléments de script et de lien dans les URL correspondantes plutôt que dans des liens vers des fichiers jQuery UI locaux, comme indiqué dans l'exemple ci-dessous :

bibliothèque jQuery $(function() ( $("a").button(); )); Visitez le site Web www.professorweb.ru

Encore une fois, un signe que les URL sont correctement spécifiées sera l'affichage d'un bouton sur la page qui s'ouvre, similaire à celui illustré dans la figure ci-dessus.

Tout est simple lors de la connexion de jquery. Il y a 2 options :
• Pour travailler hors ligne, téléchargez le fichier lui-même avec la bibliothèque jQuery et connectez-le
• Pour travailler en ligne, connectez rapidement jQuery depuis le référentiel Google ou Microsoft avec une seule ligne de code

Chaque option a ses avantages et ses inconvénients. Regardons-les de plus près.

Connexion de jquery via Google ou Microsoft

Pour connecter la dernière version de jquery via Google, vous devez ajouter une ligne de code à l'intérieur

– tout est extrêmement rapide et pratique :

Pour connecter la version exacte (dans ce cas 1.11.0) :

Vous pouvez toujours voir le numéro exact de la dernière version, puis modifier simplement ces numéros dans le code et tout fonctionnera.

Pour connecter jquery via Microsoft, ajoutez le code :

Se connecter à Google est une bonne chose car de nombreux sites connectent jQuery de la même manière - c'est via l'API Google et il y a toujours une forte probabilité que cette bibliothèque soit déjà chargée dans le cache du navigateur de l'utilisateur et ne soit pas chargée une seconde fois.

Connecter jquery en téléchargeant un fichier avec la bibliothèque

Nous connectons jQuery depuis la page de notre site Web - cela prend plus de temps, mais c'est plus fiable. Pour ce faire, vous avez besoin de :
téléchargez la bibliothèque jquery depuis le site officiel, enregistrez-la dans un fichier, appelons-la jquery-1.11.0.min.js, placez-la dans le dossier js de notre site Web et ajoutez le code suivant à

:

Le src spécifie le chemin où se trouve notre fichier jquery, qui doit être connecté à la page du site.

Et enfin, l’option la plus fiable et la plus percutante est de vous connecter à Google ; si Google n’est pas disponible, connectez-vous depuis votre site Web :

if (typeof jQuery == "undefined") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script% 3E")); )

Ou l'option la plus moderne - nous nous inscrivons dans

Le code suivant : google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); function jQueryIsLoaded() ( alert("jQuery de Google chargé"); ) if (typeof jQuery == "undefined") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min. js" type="text/javascript"%3E%3C/script%3E")); )

De l'auteur : Salutations, amis. Dans cet article, nous allons commencer à nous familiariser avec la bibliothèque jQuery UI, qui vous permet d'implémenter de nombreuses solutions prêtes à l'emploi intéressantes sur votre site Web : calendrier, accordéon, recherche en direct, beaux effets d'animation et bien plus encore. Dans cet article, nous apprendrons comment télécharger et connecter la bibliothèque jQuery UI.

Alors pourquoi avons-nous besoin de la bibliothèque jQuery UI ? En fait, pourquoi nous tournons-nous vers des plugins tiers - pour installer et utiliser des solutions prêtes à l'emploi sur le site. Mais la bibliothèque jQuery UI est une solution complète, c'est-à-dire ici vous trouverez non seulement une chose, mais tout un ensemble de widgets, d'effets et de plugins pour travailler avec divers événements.

Vous pouvez télécharger l'intégralité du package ou sélectionner un ou plusieurs widgets. La bibliothèque jQuery UI comprend également deux douzaines de thèmes pour presque tous les goûts. C’est aussi un plus non négligeable.

Passons des paroles à l'action : téléchargez et installez la bibliothèque jQuery UI. Allons sur le site officiel et tournons-nous vers la section Téléchargement. C'est ici que nous pouvons sélectionner les composants à télécharger et le thème.

JavaScript. Départ rapide

Apprenez les bases de JavaScript avec un exemple pratique de création d'une application Web.

Vous pouvez sélectionner un sujet dans la liste déroulante en bas de la page.

De plus, si vous le souhaitez, vous pouvez concevoir votre propre thème avec votre propre design ; pour ce faire, cliquez simplement sur le lien Concevoir un thème personnalisé, qui se trouve immédiatement au-dessus de la liste déroulante. Sur la page qui s'ouvre, nous pouvons modifier les polices, les couleurs et autres conceptions d'éléments, en observant les changements en ligne, en général, nous pouvons concevoir notre propre thème.

Mais revenons à la page précédente et téléchargeons tous les composants de la bibliothèque jQuery UI avec le thème Base.

Dans l'archive résultante, nous aurons besoin d'un fichier de style (jquery-ui.css) et d'un fichier de script (jquery-ui.js). Les deux fichiers sont proposés en versions standard et compressée, vous pouvez donc choisir l'une ou l'autre. Eh bien, bien sûr, vous aurez besoin de la bibliothèque jQuery, je connecterai la version 1.11.3 du service Google.

En conséquence, la page avec toutes les connexions ressemblera à ceci :

< link rel = "stylesheet" href = "ui/jquery-ui.css" >