Exactement comment créer un accordéon jQuery personnalisé

Il semble que nous devrons ajouter des CSS supplémentaires pour IE6 afin de prendre en compte le bogue d'espacement:

ul # accordion float: left; largeur: 300px;  ul # accordion li float: left; largeur: 298px;  ul # accordion a.heading width: 298px;  ul # accordion ul li float: none; largeur: auto; 

L'accordéon jQuery UI

Ensuite, nous devons initialiser l’accordéon sur notre liste non ordonnée avec un identifiant d’accordéon:

Et voilà, un accordéon de travail.

Pour faire ressortir davantage l'élément accordéon actuellement ouvert, j'ai ajouté un peu de CSS supplémentaire:

ul # accordion li.ui-accordéion-selected a.heading background: # 025185; couleur: #fff; 

Le nom de classe de ui-accordéon sélectionné est automatiquement ajouté à la section d'accordéon actuelle.

Notre accordéon jQuery personnalisé

Maintenant que nous avons créé l'accordéon jQuery UI, il est temps de créer le nôtre. Une chose que je n’aime pas forcément dans la version de jQuery UI est la façon dont elle s’affiche lorsque JavaScript est désactivé. Je préférerais l'avoir pour qu'une seule section soit ouverte à la fois.

Pour ce faire, je vais ajouter un peu de PHP. Vous pouvez facilement accomplir cela avec n’importe quel langage de programmation..

L’idée derrière cela est que nous allons passer une variable dans l’URL, et si la variable coïncide avec chaque section, nous assignons une classe de actuel à cette section. Il est beaucoup plus facile de voir cela dans le code, alors regardez:

 
 > Entrées récentes 
 
19.01.2009 Titre de l'entrée récente
 
15.01.2009 Titre de l'entrée récente
 
13.01.2009 Titre de l'entrée récente
 
01.11.2009 Titre de l'entrée récente
 
01.10.2009 Titre de l'entrée récente
 
  > Entrées populaires 
 
08.16.2008 Titre d'entrée populaire
 
06.12.2008 Titre d'entrée populaire
 
04.12.2008 Titre d'entrée populaire
 
06.12.2007 Titre d'entrée populaire
 
03.12.2007 Titre d'entrée populaire
 
  > Catégories 
 
Nom de catégorie 7
 
Nom de catégorie 4
 
Nom de catégorie 15
 
Nom de catégorie 29
 
Nom de catégorie 8
 
  > Archive 
 
Janvier 2009 4
 
Décembre 2008 14
 
Novembre 2008 12
 
Octobre 2008 8
 
Septembre 2008 18
 
  

Vous devriez également remarquer que j'ai changé l'URL de chacun des liens, basculer les sections d'accordéon pour correspondre à l'instruction if de la section. Donc, fondamentalement, si JavaScript est désactivé, vous serez redirigé vers une nouvelle page avec cette section ouverte.

Nous devons également supprimer le script d'accordéon jQuery UI et inclure notre propre:

CSS supplémentaire

Avec cette légère modification du balisage, nous devons ajouter un peu de CSS supplémentaire. Nous n'avons plus le ui-accordéon sélectionné la classe étant assignée aux éléments de la liste; c'est maintenant une classe de actuel. Nous devons également tenir compte de ce changement de nom de classe dans l'état activé pour l'accordéon:

ul # accordion li.current a.heading background: # 025185; couleur: #fff; 

Nous voulons donc masquer toutes les listes non ordonnées, à moins qu’elles ne descendent de l’élément de liste avec une classe de actuel. J'ai également ajouté un identifiant de corps à cette page de démonstration afin que nous puissions utiliser la même feuille de style pour les deux exemples..

body # customAccordion ul # accordion li ul display: none;  body # customAccordion ul # accordion li.current ul display: block; 

Le JavaScript personnalisé

Tout d'abord, nous voulons exécuter le script une fois le document chargé. Commençons par ceci:

$ (document) .ready (fonction () );

Nous voulons que l'accordéon fonctionne lorsque les liens des en-têtes sont cliqués, mais nous ne voulons pas quitter la page, nous devons donc nous assurer que retourne faux:

$ (document) .ready (fonction ()  $ ('ul # accordion a.heading'). click (function () return false;); );

Ensuite, je n'aime pas le contour qui apparaît autour des liens quand on clique dessus, alors je le règle sur aucun:

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction ()  $ (this) .css ('contour', 'aucun'); retourne faux; ); );

Il y a deux cas différents pour ce script.

1. Le lien sur lequel vous cliquez est la section déjà ouverte.
2. Le lien sur lequel vous cliquez est ne pas la section qui est déjà ouverte.

Le premier cas

Ce n'est pas une fonctionnalité de la version de jQuery UI, mais je pense qu'un utilisateur devrait pouvoir fermer toutes les sections s'il le souhaite. Si le lien sur lequel vous avez cliqué a un parent qui a une classe de courant, nous voulons faire défiler la liste non ordonnée vers le haut et supprimer la classe de courant..

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction () $ (this) .css ('contour', 'aucun'); if ($ (this) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current'););  retourne faux; ); );

Une autre chose qui me gêne au sujet de la version de jQuery UI, est que vous pouvez faire défiler l'accordéon de manière à ce qu'il soit presque invisible, cliquez dessus, puis l'interaction se produit au-dessus de ce que vous pouvez voir. Faites défiler vers le bas sur l'exemple de l'interface utilisateur jQuery et essayez-le.

Ma solution consiste donc à utiliser ce merveilleux petit script appelé jQuery ScrollTo. C'est un très petit script qui ajoute un défilement de page lisse.

Ajoutons cela à la tête du document avant notre script accordéon:

Lorsque la section défile vers le haut, je souhaite faire défiler la fenêtre vers le haut de l'accordéon:

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction () $ (this) .css ('outline', 'none'); if ($ (this ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current' ) $ .scrollTo ('# accordéon', 1000); );  return false; ); );

Le premier paramètre de la fonction est la cible à laquelle faire défiler, et le second est le temps qu'il faut.

Le deuxième cas

Ce cas se produit lorsque la section sur laquelle vous cliquez n'est pas actuellement ouverte. Donc, la première chose à faire est de cacher la section actuellement ouverte et de supprimer la classe de courant (cette partie du code est très similaire au premier cas):

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction () $ (this) .css ('outline', 'none'); if ($ (this ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current' ); $ .scrollTo ('# accordion', 1000);); else  $ ('ul # accordion li.current ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current'););  return false; ); );

Ensuite, nous voulons ouvrir la section sur laquelle nous avons cliqué et ajouter la classe de current:

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction () $ (this) .css ('outline', 'none'); if ($ (this ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current' ); $ .scrollTo ('# accordion', 1000);); autre $ ('ul # accordion li.current ul'). slideUp ('slow', function () $ (this) .parent ( ) .removeClass ('current');); $ (this) .siblings ('ul'). slideToggle ('slow', function () $ (this) .parent (). toggleClass ('current'););  return false; ); );

Enfin, faisons défiler la fenêtre vers le haut de l'accordéon, comme dans le premier cas:

$ (document) .ready (fonction () $ ('ul # accordion a.heading'). clic (fonction () $ (this) .css ('outline', 'none'); if ($ (this ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current' ); $ .scrollTo ('# accordion', 1000);); autre $ ('ul # accordion li.current ul'). slideUp ('slow', function () $ (this) .parent ( ) .removeClass ('current');); $ (this) .siblings ('ul'). slideToggle ('slow', function () $ (this) .parent (). toggleClass ('current'); ); $ .scrollTo ('# accordéon', 1000);  return false; ); );

C'est tout. Sérieusement. Avez-vous pensé que créer un accordéon pourrait être aussi simple?

Conclusion

Maintenant, comparons les tailles de fichier JavaScript en utilisant l’onglet Net de Firebug.

Dans l'exemple de l'interface utilisateur jQuery, le nombre total de fichiers JavaScript sur 73 kb. Dans notre exemple personnalisé, avec le défilement supplémentaire de la fenêtre, le nombre de fichiers JavaScript s’élève à environ 57 kb. Maintenant, cela peut sembler peu, mais imaginez si vous avez un site très fréquenté. Cela pourrait être beaucoup d'octets sauvés. De plus, vous en savez plus sur jQuery.

Maintenant, sors et écris ton propre jQuery.