Share
Dans ce didacticiel, nous allons utiliser le widget curseur de l'interface utilisateur jQuery pour créer un curseur de contenu attrayant et fonctionnel. Nous aurons un conteneur, qui contient une série d’éléments contenant chacun différents blocs de contenu. Il y aura trop d'éléments à afficher en même temps. Vous pouvez donc utiliser le curseur pour déplacer les différents blocs de contenu dans et hors de la vue..
jQuery UI est la bibliothèque officielle de widgets et d’utilitaires construite sur jQuery; Il est très facile à utiliser, hautement configurable et robuste, et extrêmement facile à thème. Pour suivre le didacticiel, vous aurez besoin d’une copie de la dernière version de la bibliothèque. il peut être téléchargé à l'aide du générateur de téléchargement de l'interface utilisateur jQuery à l'adresse http://jqueryui.com/download. Bien que nous puissions choisir n’importe lequel des thèmes disponibles, je vous recommande d’utiliser le thème par défaut de douceur. jQuery UI inclut une copie de la version actuelle de jQuery, nous n’avons donc pas besoin de la télécharger séparément.
Créez un nouveau dossier quelque part et appelez-le curseur. Dans ce dossier, créez deux nouveaux dossiers. une appelée jqueryui et une autre appelée images. Décompressez l’archive téléchargée de la bibliothèque dans le dossier jqueryui; dans l'explorateur ou le Finder, vous devriez vous retrouver avec la structure de dossiers suivante:
Commençons par la page de base et le HTML sous-jacent; Dans votre éditeur de texte, créez la page suivante:
jQuery UI Slider Quelques nébuleuses galactiques bien connues et leurs statistiques vitales
Nébuleuse Oméga
- Distance de la Terre:
- 5000 - 6000 années lumière
- Diamètre:
- 15 années-lumière
- Masse:
- 800 masses solaires
- Numéro de catalogue:
- M17 / NGC6618
- Découvert à:
- 1764
- Découvreur:
- Philippe Loys de Chéseaux
Enregistrez-le sous le nom slider.html dans le dossier du curseur. Dans l'en-tête de la page, nous établissons un lien vers la feuille de style de l'interface utilisateur jQuery, qui contient tout le CSS requis pour chacun des composants de la bibliothèque. Cela peut sembler un gaspillage; à certains égards, c'est que nous n'utilisons qu'un seul composant, mais en utilisant une feuille de style de 26 Ko. Cependant, en utilisant un outil tel que YUICompressor, nous pouvons facilement le réduire, et avec GZipping, nous pouvons également le réduire davantage. Nous établissons également un lien vers notre propre feuille de style personnalisée, que nous créerons plus tard..
Nous n'avons pas encore ajouté de style, mais pour référence, la capture d'écran suivante montre le widget curseur par défaut:
Sur la page, tout ce que nous avons est la balise pour le contenu et le curseur; nous avons un élément conteneur externe auquel nous avons attribué le nom de classe ui-corner-all. C’est l’une des classes visées par la feuille de style jQuery UI et donnera à notre conteneur (et aux autres éléments que nous lui donnons) de jolis coins arrondis. Il utilise CSS3 pour cela. Ainsi, tous les navigateurs ne sont pas supportés, mais les utilisateurs de Firefox, Safari ou Chrome les verront..
Dans le conteneur, nous avons un élément d'en-tête qui décrit le contenu, suivi d'un autre élément de conteneur (qui aura également des angles arrondis dans les navigateurs de support); Lorsque nous ajouterons le code CSS, cet élément se verra attribuer une règle de débordement masquée qui masquera la plupart des blocs de contenu individuels et nous permettra de les faire glisser à l’aide du curseur. Cet élément fonctionnera en tant que spectateur.
Dans le visualiseur, nous avons un dernier élément conteneur; la raison en est la performance - lorsque nous ajustons la propriété CSS de gauche avec jQuery, nous ne sélectionnons et manipulons qu'un seul élément au lieu du nombre de blocs de contenu qu'il existe. Nous utilisons un autre nom de classe de la bibliothèque d'interface utilisateur sur cet élément - la classe ui-helper-clearfix, qui efface automatiquement les éléments flottants au sein de l'élément auquel il est appliqué..
Voici un exemple de bloc de contenu. Je n’en ai montré qu’un dans l’exemple de code ci-dessus, car en montrer plus serait une répétition inutile. Il y en a sept dans le fichier source, mais vous pouvez en mettre autant que vous voulez et le curseur fonctionnera toujours comme il se doit. Chaque bloc de contenu contient un en-tête, une image et une liste de définitions, ce qui sémantiquement est probablement le meilleur choix pour cet exemple, mais pas nécessairement requis par d'autres implémentations. Les blocs de contenu peuvent contenir à peu près tout ce dont ils ont besoin, à condition que chaque conteneur ait une taille fixe; vous verrez pourquoi cela est important, nous venons d'ajouter le JavaScript un peu plus tard.
Après l'élément de visualisation, un conteneur vide sera transformé en widget de curseur une fois la bibliothèque d'interface utilisateur invoquée. C'est tout le HTML sous-jacent dont nous aurons besoin. Ensuite, nous lions à jQuery et aux fichiers sources de l'interface utilisateur jQuery; Encore une fois, ce fichier contient tout le code JavaScript nécessaire pour exécuter toute la bibliothèque d'interface utilisateur, ce qui est plus que nécessaire pour ce tutoriel. Il existe des fichiers individuels pour le noyau et chaque composant séparément, ce qui peut réduire l'encombrement de la bibliothèque. Les fichiers JS de jQuery et jQuery UI sont déjà minifiés..
En réalité, nous n’avons pas du tout besoin de nous préoccuper du style du widget curseur; le thème que nous avons téléchargé avec la bibliothèque le fera pour nous. Le CSS que nous sommes sur le point d’ajouter est assez purement arbitraire dans le cadre de ce didacticiel, afin de ranger les choses et de lui donner un aspect minimal. Tant que les blocs de contenu individuels (ayant un nom de classe d'élément) ont une largeur fixe et sont flottants vers la gauche dans l'élément de convoyeur, et que le débordement du spectateur est défini sur masqué, tout devrait fonctionner comme prévu.
Dans un nouveau fichier de votre éditeur de texte, ajoutez le code suivant:
h2 text-align: center; police: normale 150% Géorgie; #sliderContent width: 650px; marge: auto; rembourrage: 0 50px 50px; couleur de fond: #ebebeb; bordure: solide 1px # 898989; .viewer width: 607px; hauteur: 343px; marge: 0 auto 40 px; rembourrage: 1px; débordement caché; position: relative; bordure: solide 1px # 898989; .content-conveyor width: 610px; hauteur: 335px; position: relative; .item width: 304px; float: gauche; famille de polices: Tahoma; text-align: center; couleur de fond: #ebebeb; .item h2 font-size: 100%; marge: 10px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; largeur: 149px; text-align: right; marge: 0; taille de police: 70%; .item dt font-weight: bold; marge droite: 5px; .item dd text-align: left; .item img border: 1px solid # 898989; couleur de fond: #ffffff; rembourrage: 1px;
Enregistrez ceci sous slider.css dans le dossier du curseur. Notre page devrait maintenant ressembler à ceci:
Il ne reste plus qu’à ajouter le code JavaScript qui initialisera le curseur et contrôlera nos blocs de contenu. Directement après l'élément de script faisant référence à l'interface utilisateur jQuery dans slider.html, ajoutez le code suivant:
C'est un extrait de code très court et simple, avec très peu de choses; jetons un coup d'oeil ligne par ligne; Dans le raccourci document.ready, nous définissons d'abord quelques variables afin de pouvoir mettre en cache les éléments de la page que nous allons manipuler pour des raisons de performances; cela rend notre code plus rapide car nous ne faisons que traverser le DOM et sélectionner chaque élément une fois.
Nous sélectionnons d’abord l’élément transporteur en ciblant son nom de classe; Parce que l'utilisation d'un sélecteur de classe est inefficace, nous donnons au sélecteur un contexte de l'élément sliderContent. Le contexte est fourni à l'aide d'un sélecteur d'id, de sorte qu'il n'est pas nécessaire de parcourir l'ensemble du DOM. Nous sélectionnons également la collection de blocs de contenu de la même manière.
Une fois que nous avons mis en cache nos sélecteurs, nous pouvons définir la longueur de l'élément de convoyeur; dans le CSS, la largeur de deux des blocs de contenu était définie, mais pour que cela fonctionne correctement, les zones de contenu doivent flotter les unes à côté des autres, le convoyeur doit donc être suffisamment large pour les accueillir tous..
Pour ne pas limiter le nombre de blocs de contenu pouvant être insérés dans le widget, nous ne codons pas en dur une largeur définie. au lieu de cela, nous obtenons le nombre de blocs de contenu et nous le multiplions par la largeur de chaque bloc. C'est pourquoi il est important de définir une largeur fixe sur les blocs. Nous devons utiliser la fonction parseInt de JavaScript lorsque nous récupérons la largeur des blocs car la méthode css jQuery renvoie une valeur de chaîne en mode getter..
Nous créons ensuite un objet de configuration littéral qui sera transmis à la méthode du curseur de l'interface utilisateur jQuery et utilisé pour définir certaines propriétés du widget du curseur. Notre objet de configuration a deux propriétés, max et slide. La valeur de la propriété max est un entier représentant la largeur de l'élément de convoyeur moins la largeur de l'afficheur. Ce sera la valeur maximale que le curseur peut atteindre..
La valeur de la propriété slide est une fonction anonyme qui recevra automatiquement deux arguments. l'objet événement d'origine et un objet préparé contenant des propriétés utiles relatives au widget. Nous n'utilisons pas du tout le premier argument, que nous définissons comme e, mais nous devons l'inclure pour avoir accès au second argument, que nous appelons ui.
L'événement de diapositive est un événement personnalisé exposé par l'API du curseur. La fonction que nous avons définie comme valeur sera appelée chaque fois qu'une interaction entre les diapositives se produit. Chaque fois que l'événement est déclenché, nous manipulons simplement la propriété de style de gauche de notre élément de transporteur de la même manière que le curseur est déplacé. Nous pouvons obtenir la valeur vers laquelle le curseur est déplacé en utilisant la propriété value de l'objet ui.
Nous définissons la valeur maximale du curseur sur la longueur de l'élément de convoyeur. Dans cet exemple, il atteint 2128 pixels. La valeur maximale est donc 2128. Ce n'est pas en pixels, comme vous le verrez dans la capture d'écran suivante, le curseur lui-même est d'environ 650px de longueur. Mais si nous déplaçons le curseur à peu près à mi-chemin de la piste, la valeur indiquée dans l’objet ui sera autour de 1064, nous allons donc déplacer le bord gauche du convoyeur de autant de pixels à gauche ou à droite..
Nous n'avons pas besoin de nous soucier de détecter dans quelle direction le curseur a été déplacé; si la poignée du curseur a déjà été déplacée vers la droite, la propriété CSS de gauche si le transporteur aura déjà une valeur négative. Lorsque nous déduisons un nombre négatif d’un nombre négatif, le résultat est bien sûr un nombre positif, ce qui fait que le convoyeur recule comme il se doit. La page complétée devrait maintenant apparaître avec le curseur:
Vous devriez constater que cela fonctionne comme prévu et que les différents blocs de contenu peuvent être déplacés dans et hors de vue à l'aide du widget curseur. En plus de l’interaction standard de glisser, le curseur intègre également l’ajout utile d’une interaction clic; si vous cliquez n'importe où sur la piste, la poignée est automatiquement déplacée à cette position et la fonction de rappel de la diapositive est exécutée.
Dans ce tutoriel, nous avons examiné comment le code HTML sous-jacent utilisé pour le curseur (un simple conteneur vide), le style par défaut appliqué par la bibliothèque et comment il peut être configuré et initialisé avec notre code..
Le curseur est un excellent ajout à toute interface. elle est facile à configurer et facile à utiliser pour nos visiteurs, elle est tactile et interactive et peut être utilisée dans diverses situations, notamment en déplaçant du contenu, comme dans cet exemple, ou en contrôlant le volume d'une application Web en streaming..
Accentsconagua