wSlide, plugin jquery qui va faire glisser vos listes
30/01/2008
Je vous présente wSlide, mon 1er plugin pour jQuery (enfin, officiellement) !
wSlide va vous permettre de transformer n'importe quelle liste en une sorte de visionneuse, aussi bien pour du texte que pour des images. La pagination peut être automatiquement générées, ou pas.
Rien ne vaut une démonstration live:
Voici les explications ....
Pourquoi ce plugin ?
Principalement pour gagner de la place dans vos pages web. Les longues listes sont souvent fatigantes à lire, on scroll dans tous les sens. Vous pourriez par exemple alléger vos sidebars en regroupant plusieurs parties avec ce plugin.
Features
- Pagination automatique (désactivable)
- Personnalisation facile par CSS
- Choix de la position de départ
- Choix du sens de glissement (horizontal ou vertical)
- Possibilité de défilement en diagonal
- Compatible avec le plugin easing (pour des effets, comme le rebond)
- Possibilité de fondue
- Choix de la durée de la transition
Testé sur ...
- Firefox
- Opera
- Internet Explorer 6 et 7
Exemples
Téléchargement
- jquery.wslide.js (version 0.1, compressée)
- jquery.wslide.js (version 0.1, non compressée)
- wslide_demo.zip (les fichiers d'exemple)
Installation
- 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) ainsi que le plugin wslide entre les balises HTML
<head>et</head>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
- 2. Prenons une simple liste html comme celle-ci
<ul id="ma_liste">
<li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
<li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
<li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
<li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
<li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
<li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
<li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
<li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>
<li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
<li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
<li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
<li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
<li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
<li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
<li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
<li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>
- 3. On ajoute le bout de javascript qui va initialiser la liste, et en même temps définir les options.
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.
$(document).ready(function(){//on attend que la page soit chargée
//on donne l'id de la liste visée, et on lui donne ses paramètres
$("#ma_liste").wslide({
width: 500,
height: 333,
horiz: true
});
//si vous avez d'autre listes, placez leur code d'initialisation ici à la suite ....
//$("#autre_liste").wslide({ ...
});
//on donne l'id de la liste visée, et on lui donne ses paramètres
$("#ma_liste").wslide({
width: 500,
height: 333,
horiz: true
});
//si vous avez d'autre listes, placez leur code d'initialisation ici à la suite ....
//$("#autre_liste").wslide({ ...
});
Options
Les options sont à définir lors du code d'initialisation ({option1: val, option2: val, option3: val, etc ...})
widthetheight: La taille du bloc qui contiendra votre liste (Défaut=150)pos: La position de départ par défaut (Défaut=1)col: Le nombre de colonnes, si plus grand que1, alors vous aurez un effet de navigation en diagonal (Défaut=1)effect: Le type d'effet que vous voulez pour la transition, pour celà il vous faudra le plugin easing (Défaut=swing)fade: Transition avec effet d'apparition et disparition, du coup, le sens de la transition n'importe plus (Défaut=false)horiz: Active le défilement horizontal (Défaut=false)duration: La durée de la transition en millisecondes (Défaut=1500)autolink: Indique si vous voulez un menu de navigation généré automatiquement. Si vous creez votre propre menu, mettezautolink: false. Si vous voulez que le menu soit généré automatiquement, mais dans une autre div, mettezautolink: 'id_de_la_div_menu'
Questions ?
- Comment écrire mon propre menu de navigation en dur dans la page?
- Comment personnaliser le menu automatiquement généré d'une liste spécifique ?
- Comment personnaliser en une fois tous les menus automatiquement généré ?
- Comment personnaliser le conteneur d'un liste spécifique ?
- Comment personnaliser tous les conteneurs de liste en une fois ?
- Comment personnaliser le numéro de page actif ?
Conclusions
Comme c'est mon 1er plugin, il est possible que vous rencontriez une ou deux coquilles (que je me ferais un plaisir de corriger, dans la mesure du possible). Pour les exemples, j'ai commenté le code source des pages pour que vous puissiez vous en inspirer.
jQuery rulllllllllezzzzzzz !
Traduction
- Explicaciones en español por Nikko. | Explanations in Spanish by Nikko. (Thanks !)
- Spiegazione in italiano di Giuseppe. | Explanations in Italian by Giuseppe. (Thanks !) + Esempio 1 | Esempio 2 | Esempio 3
-----Pages: Page suivante
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Pingback: 三分鱼 » (Javascript) wSlide - 新鲜，有趣，另类，杂烩()
Pingback: Zbiór skryptów AJAX/Javascript/Dhtml. (50+) | Darmowe skrypty, programowanie, informacje domeny()
Pingback: links for 2008-09-01 at JsBlog()
Pingback: pixaloula le site des webdesigners en herbe » Tutoriaux()
Pingback: Wslide : visionneuse Apple-like sous jQuery | Agence 84 - Technologies Web & Mobile en Algérie()
Pingback: Bookmark: 50+ stunning jQuery applications()