<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css 4 design &#187; Menu</title>
	<atom:link href="http://css4design.com/tag/menu/feed" rel="self" type="application/rss+xml" />
	<link>http://css4design.com</link>
	<description>Le blog de l&#039;intégrateur web</description>
	<lastBuildDate>Thu, 26 Jan 2012 19:13:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<atom:link rel='hub' href='http://css4design.com/?pushpress=hub'/>
		<item>
		<title>390 ressources Javascript &amp; jQuery</title>
		<link>http://css4design.com/liens-javascript-jquery</link>
		<comments>http://css4design.com/liens-javascript-jquery#comments</comments>
		<pubDate>Mon, 28 Nov 2011 18:42:41 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Javascript & PHP]]></category>
		<category><![CDATA[Accessibilité]]></category>
		<category><![CDATA[Animations]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[ARIA]]></category>
		<category><![CDATA[BBcode]]></category>
		<category><![CDATA[Carousel]]></category>
		<category><![CDATA[Clavier]]></category>
		<category><![CDATA[Colonnes]]></category>
		<category><![CDATA[Cookie]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Dock]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Fieldset]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Formulaires]]></category>
		<category><![CDATA[Google Maps]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[innerHTML]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Lightbox]]></category>
		<category><![CDATA[Loader]]></category>
		<category><![CDATA[Loupe]]></category>
		<category><![CDATA[Markdown]]></category>
		<category><![CDATA[Medias]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Navigateurs]]></category>
		<category><![CDATA[OL]]></category>
		<category><![CDATA[Onglets]]></category>
		<category><![CDATA[Pagination]]></category>
		<category><![CDATA[Player]]></category>
		<category><![CDATA[Queries]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[Slideshow]]></category>
		<category><![CDATA[Tab]]></category>
		<category><![CDATA[Textile]]></category>
		<category><![CDATA[Tooltips]]></category>
		<category><![CDATA[Transitions]]></category>
		<category><![CDATA[tutoriel]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Wiki]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=11119</guid>
		<description><![CDATA[Cette liste de liens pour le développeur web front-end et l&#8217;intégrateur HTML &#38; CSS est issue de la veille documentée que j&#8217;effectue depuis deux ans sur le blog Javascript &#38; Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j&#8217;ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, last but not least, vous pourrez accéder à une dernière liste composée d&#8217;une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API&#8217;s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d&#8217;origine. 217 [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fliens-javascript-jquery">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fliens-javascript-jquery&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Cette liste de liens pour le développeur web front-end et l&#8217;intégrateur HTML &amp; CSS est issue de la veille documentée que j&#8217;effectue depuis deux ans sur le blog <a href="http://js4design.com/">Javascript &amp; Webdesign</a>. Elle reprend les <a title="" href="http://css4design.com/139-ressources-javascript-et-jquery" rel="bookmark">139 ressources Javascript et jQuery</a> déjà publiées sur ce site, auxquelles j&#8217;ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, <em>last but not least</em>, vous pourrez accéder à une dernière liste composée d&#8217;une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API&#8217;s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d&#8217;origine.</p>

<p><span id="more-11119"></span></p>

<h2>217 ressources commentées</h2>

<p>Autant vous prévenir tout de suite : cette liste n&#8217;est pas classée par catégorie, et ce, pour trois raisons simples : 1) vous pouvez rechercher les articles sur <a href="http://js4design.com">js4design.com</a> où ils sont classés par catégorie et par tag, 2) vous pouvez utiliser l&#8217;équivalent-clavier <strong>Ctrl + F</strong> pour chercher un thème précis sur cette page, et 3)  je crois très fort en la <a href="http://fr.wikipedia.org/wiki/S%C3%A9rendipit%C3%A9">sérendipité</a> :-)</p>

<ol>
    <li><a href="https://github.com/mythz/jquip">jQuip</a> &#8211; Initiative lancée par Demis Bellot pour rendre jQuery modulable : 90% des fonctions les plus utilisées de jQuery pourraient se caser dans 13% de la taille actuelle du framework !</li>
    <li><a href="http://popcornjs.org/">Popcorn.js</a> &#8211; Framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Utilise les ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.</li>
    <li><a href="http://marktyrrell.com/labs/blueberry/">Blueberry</a> &#8211; Plugin jQuery expérimental et open source pour faire défiler des images (<em>Slider</em>) dans un environnement fluide (<em>Responsive Web Design</em>).</li>
    <li><a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/">Elastislide</a> &#8211; Carousel jQuery réactif (<em>Responsive Web design</em>) pour que l&#8217;utilisateur profite au mieux des caractéristiques de son écran.</li>
    <li><a href="http://www.blog.highub.com/decoding-jquery/">Decoding jQuery</a> &#8211; Immersion (en anglais) dans le code source de <a href="http://jquery.com/">jQuery</a> avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().</li>
    <li><a href="http://www.codecademy.com/">Codecademy</a> &#8211; Apprendre les bases de la programmation Javascript de manière interactive et pro-active !</li>
    <li><a href="http://flex.madebymufffin.com/">FlexSlider</a> &#8211; Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.</li>
    <li><a href="http://www.csslab.cl/2011/08/18/jquery-timelinr/">jQuery Timelinr</a> &#8211; Créer un effet de ligne temporelle verticale ou horizontale avec d’un côté, des dates et de l’autre, des événements.</li>
    <li><a href="http://fgnass.github.com/spin.js/">spin.js</a> &#8211; Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.</li>
    <li class="pfiou"><a href="http://stackoverflow.com/questions/5347839/jquery-reversing-the-order-of-child-elements">jQuery reversing </a>&#8211;  Quelques astuces jQuery pour inverser l&#8217;ordre des éléments d&#8217;une liste UL ou OL dont le très concis snippet : <code>ul = $('ul'); ul.children().each(function(i,li){ul.prepend(li)})</code></li>
    <li><a href="http://capmousse.github.com/require.js/">Require.js</a> &#8211; Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts.</li>
    <li><a href="http://gmap3.net/">Gmap3</a> &#8211; Plugin jQuery créé par <a href="http://www.viadeo.com/fr/profile/jean-baptiste.demonte">Jean-Baptiste Demonte</a> pour créer des cartes Google avec les fonctions avancées de la version 3 de l’API de Google Maps.</li>
    <li><a href="http://www.sunsean.com/nanotabs/">nanotabs</a> — Version allégée du plugin jQuery <a href="http://www.sunsean.com/idTabs/">idTabs</a>. Script autonome (sans jQuery ou autre framework Javascript) pour faire des menus à onglets à partir de simples listes.</li>
    <li><a href="http://jbhslider.projects.bodin-hullin.net/">JbhSlider</a> &#8211; Diaporama en jQuery gérant les évènements rapprochés (pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du <em>Slider)</em>.</li>
    <li><a href="http://www.agilecarousel.com/">Agile Carousel</a> &#8211; Faites défiler automatiquement ou manuellement du texte et des images. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré.</li>
    <li><a href="http://thrivingkings.com/apprise/">Apprise</a> &#8211; Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.</li>
    <li><a href="http://www.pierrebertet.net/projects/jquery_simpletooltip/">jQuery Simple Tooltip</a> — Afficher des infobulles au survol d’un lien. Peut afficher le contenu d’une balise référencée par son identifiant.</li>
    <li><a href="https://github.com/danielstocks/jQuery-TaggingTools/">jQuery Tagging Tools</a> &#8211; Gérer les tags à la manière de Facebook, avec une petite croix pour supprimer les tags que l’on vient de saisir.</li>
    <li><a href="https://github.com/danielstocks/jQuery-Placeholder">jQuery-Placeholder</a> &#8211; Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.</li>
    <li class="pfiou"><a href="http://www.pierrebertet.net/projects/jquery_superbox/francais.html">jQuery SuperBox</a> &#8211; Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.</li>
    <li><a href="http://yepnopejs.com/">yepnope.js</a> &#8211; Chargement conditionnel de scripts pour vos « Polyfills » pour charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le navigateur.</li>
    <li><a href="http://www.webdevtuts.net/coding/create-a-full-background-image-slider-using-jquery/">Full background image slider</a> &#8211; Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).</li>
    <li><a href="http://code.google.com/p/minify/">Minify</a> &#8211; Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.</li>
    <li><a href="http://treesaverjs.com/">Treesaver</a> &#8211; Framework Javascript pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie.</li>
    <li><a href="http://jqueryfordesigners.com/coda-slider-effect/">Coda Slider Effect</a> &#8211; Tutoriel pour réaliser un système de navigation par onglets accessible avec effet de Slide, en mixant plusieurs plugins tels que <a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">scrollTo</a>, <a href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html">localScroll</a>et<a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">serialScroll</a>.</li>
    <li><a href="http://aquantum-demo.appspot.com/file-upload">jQuery File Upload</a> &#8211; Uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image.</li>
    <li><a href="https://github.com/ammonkc/radioswitch">jQuery radioSwitch</a> &#8211; Transformer des boutons <code>radio</code> HTML en superbes <em>Sliders</em> d’un coup de magie CSS3 et Javascript.</li>
    <li><a href="http://www.myjqueryplugins.com/jNotify">jNotify</a> &#8211; Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.</li>
    <li><a href="http://www.vinch.be/blog/2010/12/05/reproduire-leffet-apple-com-grace-a-un-plugin-jquery/">jQuery Apple Effect</a> &#8211; Afficher progressivement le contenu d’une page Web autour d’une zone affichée par défaut, pour la mettre en valeur.</li>
    <li class="pfiou"><a href="http://www.myjqueryplugins.com/jMenu">jMenu</a> &#8211; Système de menu horizontal en <a href="http://jquery.com/">jQuery</a> et<a href="http://jqueryui.com/">jQuery UI</a> qui autorise un nombre illimité de sous-menus.</li>
    <li><a href="http://blog.jaysalvat.com/article/afficher-ou-masquer-les-mots-de-passe-de-vos-formulaires-en-jquery">Affichage des mots de passe à la demande</a> &#8211; Afficher ou masque le mot de passe saisi dans un champs `input` de type <em>password</em> uniquement en cas de besoin, à l’aide d’une case à cocher.</li>
    <li><a href="http://craigsworks.com/projects/qtip/">qTip</a> &#8211; Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut <code>title</code> ou attribut personnalisé <code>tooltip</code>, ou une image.</li>
    <li><a href="http://markitup.jaysalvat.com/home/">markItUp!</a> &#8211; Moteur de balisage léger qui transforme un <code>textarea</code> en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.</li>
    <li><a href="http://slidesjs.com/">Slides</a> &#8211; Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.</li>
    <li><a href="http://www.capitaine-mousse.fr/blog.html/13/lightbox-sans-javascript">Lightbox CSS avec tabindex et pseudo-classe :focus</a> &#8211; Lightbox full CSS en remplaçant l’événement <code>click</code> par la pseudo-classe <code>:focus</code> et la propriété<code>tabindex</code> pour permettre aux images d’avoir le «focus».</li>
    <li><a href="http://letteringjs.com/">Lettering.js</a> &#8211; Plugin jQuery pour contrôler précisément le découpage des textes afin d&#8217;afficher les caractères ou les mots qui les composent comme bon vous semble.</li>
    <li><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">Simple Tabs w/ CSS &amp; jQuery</a> &#8211; Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.</li>
    <li><a href="http://komra.de/labs/simpletabs/">SimpleTabs</a> &#8211; Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (<em>tabs</em>).</li>
    <li><a href="http://code.google.com/p/css3-mediaqueries-js/">CSS3-MediaQueries-JS</a> &#8211; Bibliothèque Javascript qui permet d’utiliser les <a href="http://www.w3.org/TR/css3-mediaqueries/">Medias Queries</a> dans IE 5+, Firefox 1+ et Safari 2.</li>
    <li class="pfiou"><a href="http://www.givainc.com/labs/marquee_jquery_plugin.htm">Marquee jQuery</a> &#8211; Permet de faire défiler le contenu d’une liste vers le haut, le bas, la droite, la gauche grâce à des options bien pratiques.</li>
    <li><a href="http://code.google.com/p/hyphenator/">Hyphenator</a> &#8211; Script Javascript pour la gestion des césures sur tout ou partie de votre site Web, à réserver aux articles pour des questions de performances.</li>
    <li><a href="http://jquery.malsup.com/cycle/">jQuery Cycle</a> — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.</li>
    <li><a href="http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html">Galerie d’image avec jQuery</a> &#8211; Ce tutoriel permet d&#8217;obtenir le résultat le plus simple possible visuellement tout en tenant compte l’accessibilité dans une démarche non intrusive.</li>
    <li><a href="http://www.hv-designs.co.uk/2010/10/20/jquery-slide-effect/">JQuery Slide Effect</a> &#8211; Tutoriel concis mais complet pour réaliser un effet d’animation de texte (<em>slide</em>) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.).</li>
    <li><a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider">Easy Slider</a> &#8211; Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.</li>
    <li><a href="http://jdbartlett.github.com/innershiv/">innerShiv</a> — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.</li>
    <li><a href="http://www.csstextwrap.com/">CSS Text Wrapper</a> &#8211; Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !</li>
    <li><a href="http://sorgalla.com/jcarousel/">jCarousel</a> &#8211; Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.</li>
    <li><a href="http://www.impressivewebs.com/javascript-content-switcher-without-javascript/">Content Switcher</a> &#8211; Ce <em>Slider</em> avec menu de navigation a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur.</li>
    <li class="pfiou"><a href="http://samy.pl/evercookie/">EverCookie</a> — API Javascript qui permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant une dizaine de mécanismes différents : <a href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP Cookies</a>, <a href="http://en.wikipedia.org/wiki/Local_Shared_Object">Flash Cookies</a>, <a href="http://www.silverlight.net/learn/quickstarts/isolatedstorage/">Silverlight Isolated Storage</a> , RGB values, <a href="http://samy.pl/csshack/">Web History</a>, <a href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETags</a>, <a href="http://en.wikipedia.org/wiki/Web_cache">Web cache</a>, <a href="http://en.wikipedia.org/wiki/HTTP_cookie#window.name">window.name</a>, <a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">Internet Explorer userData Storage</a>, <a href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">HTML5 Session Storage</a>, <a href="http://dev.w3.org/html5/webstorage/#dom-localstorage">HTML5 Local Storage</a>, <a href="https://developer.mozilla.org/en/dom/storage#globalStorage">HTML5 Global Storage</a>, <a href="http://dev.w3.org/html5/webdatabase/">HTML5 Database Storage via SQLite</a> !</li>
    <li><a href="http://bxcarousel.com/">bxCarousel</a> &#8211; <em>Carousel</em> en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.</li>
    <li><a href="http://www.leigeber.com/2010/09/fading-slideshow-script/">TinyFader</a> — Slideshow poids-plume avec effet de fading. C&#8217;est la version autonome de<a href="http://js4design.com/tinyslider-un-diaporama-leger-en-javascript-324">TinySlider</a>en (<em>TinyFader</em> n’a pas besoin d’un framework Javascript).</li>
    <li><a href="http://nathansearles.com/plugin/loopedslider/">Jquery Looped Slider</a> &#8211; Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre <em>Slider.</em></li>
    <li><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-list-splitter/">Easy List Splitter</a> &#8211; Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.</li>
    <li><a href="http://nivo.dev7studios.com/">Nivo Slider</a> &#8211; Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos <em>Sliders</em> images.</li>
    <li><a href="http://aviathemes.com/aviaslider/">AviaSlider</a> &#8211; Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.</li>
    <li><a href="http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/">Stop (Mis)Using Return False</a> &#8211; Toutes les subtilités relatives à la gestion des événements dans jQuery.</li>
    <li><a href="http://www.sohtanaka.com/web-design/advanced-columns-w-css/">Advanced Columns using the :nth-child(N)</a> &#8211; Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.</li>
    <li><a href="http://www.aakashweb.com/jquery-plugins/selected-text-sharer/">Jquery selected text sharer</a> &#8211; Plugin jQuery astucieux qui affiche une <code>div</code> contenant une liste de liens avec les <code>favicons</code> associées une fois que l’utilisateur a sélectionné une portion de texte.</li>
    <li class="pfiou"><a href="http://abeautifulsite.net/blog/2007/07/changing-classes-in-javascript/">ChangeClass</a> — Fonction Javascript pour changer de classe CSS à la volée.</li>
    <li><a href="http://premiumsoftware.net/cleditor/">CLEditor</a> &#8211; Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).</li>
    <li><a href="http://webbies.dk/Sudo%20Slider/">Sudo Slider</a> &#8211; Plugin jQuery de 10 ko pour mettre en place un diaporama manuel (Slider) ou automatique (Slideshow) avec tout type de contenus (images, textes, vidéo en Flash, formulaire avec validation, etc.).</li>
    <li><a href="http://enterprisejquery.com/">Enterprise jQuery</a> — Passez du côté client ! Améliorer vos connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.</li>
    <li><a href="http://clearideaz.com/2010/07/jquery-eventmanager-un-plugin-de-gestion-devenements/">jQuery.eventManager</a> — Améliorer la gestion d’événements avec jQuery.</li>
    <li><a href="http://videojs.com/">Video JS</a> — Player vidéo basé sur Javascript qui utilise la balise <code>video</code> de HTML5 lorsque le navigateur est compatible. Un <em>fallback</em> vers <em>Flash</em> est prévu pour les navigateurs ne prenant pas en charge HTML5.</li>
    <li><a href="http://www.problogdesign.com/coding/30-pro-jquery-tips-tricks-and-strategies/">30 bouts de codes jQuery</a> &#8211; en <em>prêt-à-porter</em> taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été.</li>
    <li><a title="Lien permanent vers Transformer un plugin jQuery en extension WordPress" href="http://js4design.com/transformer-un-plugin-jquery-en-extension-wordpress-869" rel="bookmark">Transformer un plugin jQuery en extension WordPress</a> &#8211; Tutoriel permettant d&#8217;utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress.</li>
    <li><a title="Lien permanent vers Étendre la zone cliquable d’un lien à l’élément parent avec jQuery" href="http://js4design.com/etendre-la-zone-cliquable-des-liens-aux-elements-parents-avec-jquery-864" rel="bookmark">Étendre la zone cliquable d’un lien à l’élément parent avec jQuery</a> &#8211;Quelques lignes de code <em>Jquery</em> pour étendre la zone cliquable d’un lien à un élément parent, généralement un &lt;div&gt;.</li>
    <li><a href="http://code.google.com/p/js-hotkeys/">jQuery Hotkeys Plugin</a> &#8211; Ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code.</li>
    <li class="pfiou"><a href="http://welcome.totheinter.net/columnizer-jquery-plugin/">Columnizer</a> — Créer des colonnes avec jQuery. Nombreuses options, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes.</li>
    <li><a href="http://www.rebeccamurphey.com/jqfundamentals/">jQuery Fundamentals</a> — Manuel de survie pour jQuery. Synthétise les éléments de syntaxe de jQuery sur une page web. Sommaire précis et structuré avec un index des exemples utilisés.</li>
    <li><a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/">Retina Display</a> — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.</li>
    <li><a href="http://www.wizzud.com/jqDock/">jqDock</a> — Transformez une suite d’images en Dock Menu (<em>set</em> d’images qui s’agrandissent au passage de la souris) à la manière du dock de MacOS X.</li>
    <li><a href="http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/">Fancy Sliding Form</a> — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de <code>fieldset.</code></li>
    <li><a href="http://plugins.learningjquery.com/cluetip/">clueTip</a> — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).</li>
    <li><a href="http://smokescreen.us/">Smokescreen</a> — Convertir des animations Flash simples en HTML5 et Javascript.</li>
    <li><a href="http://buckwilson.me/lightboxme/">Lightbox_me</a> — Lightbox jQuery d&#8217;un poids de 1 Kb pour afficher n’importe quel élément avec un effet <em>Lightbox </em>sobre et efficace.</li>
    <li><a href="http://code.google.com/p/jquery-json/">jQuery-JSON</a> — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery <code>$</code> pour faciliter l’utilisation du format <a href="http://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>.</li>
    <li><a href="http://devgrow.com/slidernav/">SliderNav</a> &#8211; Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.</li>
    <li class="pfiou"><a href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/">Sliding Panel Photo Wall Gallery</a> — Mur d’image et Lightbox avec jQuery.</li>
    <li><a href="http://devgrow.com/griddy-overlay/">Griddy-Overlay</a> &#8211; Afficher une grille par-dessus votre page web avec jQuery.</li>
    <li><a href="http://scriptsrc.net/">Scriptsrc</a> — 10 Frameworks Javascript à emporter.</li>
    <li><a href="http://layout.jquery-dev.net/">UI.Layout</a> – Créer des interfaces utilisateurs avec jQuery.</li>
    <li><a href="http://www.elfangels.fr/webprojecthelper/fr/">WebProjectHelper</a> — Générateur de structure MySQL et de classes PHP.</li>
    <li><a href="http://jquery.malsup.com/form/">jQuery Form Plugin</a> — Mettez de l’Ajax dans vos formulaires HTML.</li>
    <li><a href="http://hyper-metrix.com/#Burst">Burst Engine</a> — Un peu de Flash et d’After Effects dans Canvas.</li>
    <li><a href="http://colorpowered.com/colorbox/">Colorbox</a> — une « lightbox » légère et extensible en jQuery.</li>
    <li><a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.</li>
    <li><a title="Permanent Link: Preload CSS/JavaScript without execution" href="http://www.phpied.com/preload-cssjavascript-without-execution/" rel="bookmark">Preload CSS/JavaScript without execution</a> &#8211; Pré-chargement des CSS et du Javascript sans exécution.</li>
    <li class="pfiou"><a href="http://js4design.com/table-des-matieres-avec-jquery-695">Table des matières avec jQuery</a> &#8211; Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.</li>
    <li><a href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/">Bloc de login à la Twitter avec jQuery</a> &#8211; Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.</li>
    <li><a href="http://james.padolsey.com/javascript/sorting-elements-with-jquery/">jQuery.fn.sort</a> — Trier des éléments avec jQuery.</li>
    <li><a href="http://dev.herr-schuessler.de/jquery/popeye/">Popeye 2.0</a> &#8211; Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.</li>
    <li><a href="http://fatfree.sourceforge.net/">FAT-FREE </a>— Framework PHP léger et modulaire.</li>
    <li><a href="http://www.noupe.com/javascript/jquery-html-table-toolbox.html">jQuery HTML Table Toolbox</a> — 36 façons de «dresser la table» avec jQuery.</li>
    <li><a href="http://davidwalsh.name/add-events-jquery">Add Events jQuery</a> — Ajouter «cursor: pointer» sur tous les événements «click».</li>
    <li><a href="http://blog.jaysalvat.com/articles/creez-une-arborescence-de-fichiers-en-jquery-1.php">Créer une arborescence de fichier avec jQuery</a> &#8211; Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.</li>
    <li><a href="http://simplecartjs.com/">simpleCart (js)</a> &#8211; Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.</li>
    <li><a href="http://www.modernizr.com/">Modernizr</a> — Détection des fonctionnalités CSS3 et HTML5.</li>
    <li class="pfiou"><a href="http://net.tutsplus.com/tutorials/javascript-ajax/20-helpful-jquery-methods-you-should-be-using/">20 méthodes jQuery à connaitre</a> – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !</li>
    <li><a href="http://js4design.com/ie7-js-ce-n%E2%80%99est-pas-de-la-magie-c%E2%80%99est-de-la-technologie-682">IE7.js</a> &#8211; Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !</li>
    <li><a href="http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx">Webform to wizard</a> &#8211; Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML <code>fieldset.</code></li>
    <li><a href="http://oopstudios.com/dlink/index.html">DLink</a> — Afficher le type de cible des liens avec Javascript.</li>
    <li><a href="http://fiddle.jshell.net/br1o/UtQ2s/3/show/">Splash</a> — un diaporama en pur Javascript.</li>
    <li><a href="http://pioupioum.fr/developpement/optimiser-rapidite-chargement-adsense-jquery.html">Optimiser le chargement des AdSense</a> &#8211; Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.</li>
    <li><a href="http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html">Custom jQuery Selectors</a> &#8211; Créez des sélecteurs personnalisés avec jQuery.</li>
    <li><a href="http://code.drewwilson.com/entry/tiptip-jquery-plugin">TipTip</a> — Infobulles « funky » pour afficher l’attribut HTML «title».</li>
    <li><a href="http://benalman.com/projects/jquery-clickoutside-plugin/">Clickoutside Event</a> — Détectez les clics en dehors d’un élément.</li>
    <li><a href="http://blog.johanbleuzen.fr/comment-jquery-va-tuer-flash">Comment, jQuery va tuer Flash ?</a> &#8211; Question surprenante, mais force est de constater que Javascript a fait du chemin depuis <code>window.open()</code> !</li>
    <li class="pfiou"><a href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/">jQuery Tutorials for Designers</a> &#8211; 13 Tutoriels jQuery pour Webdesigners.</li>
    <li><a href="http://jquery.codestarters.com/">Starter</a> — Générateur de plugins jQuery.</li>
    <li><a href="http://www.xul.fr/ecmascript/lightbox.html">Effets lightbox sans framework</a> — L’ouverture de nouvelles fenêtres<em>popup</em> a progressivement laisser la place aux effets <em>lightbox</em>. Voici plusieurs solutions simples à base de HTML, CSS.</li>
    <li><a href="http://www.impressivewebs.com/javascript-content-switcher-without-javascript/">Content Switcher</a> — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.</li>
    <li><a href="http://news.kg/wp-content/uploads/tree/">jQuery SimpleTree Drag&amp;Drop</a> &#8211; Construisez des arborescences à la mode de Windows.</li>
    <li><a href="http://methvin.com/splitter/">jQuery Splitter Plugin</a> — Divisez votre page en plusieurs parties redimensionnables.</li>
    <li><a href="http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/">Slick Page Transition</a> — Effet de transition (fading) entre les pages d’un site.</li>
    <li><a href="http://www.datatables.net/">DataTables</a> — Pagination et tri des données pour vos tableaux HTML.</li>
    <li><a href="http://plugins.jquery.com/project/jsocial">jSocial</a> &#8211; Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.</li>
    <li><a href="http://plugins.jquery.com/project/color">jQuery Color Animation</a> &#8211; Support du RGBa pour « jQuery Color Animations».</li>
    <li class="pfiou"><a href="http://jqueryvsmootools.com/">jQuery vs Mootools</a> &#8211; Choisir jQuery ou Mootools en connaissance de cause.</li>
    <li><a href="http://mlh02.free.fr/jquery_france/code_select_input.php">6 bouts de code pratiques</a> pour manipuler les éléments <code>select</code> et <code>input</code> avec <em>jQuery.</em></li>
    <li><a href="http://www.plupload.com/">Plupload</a> &#8211; Gestionnaire de « téléversement » (upload) multiple en jQuery.</li>
    <li><a href="http://www.australopitech.com/1307-defilement-parallaxe-avec-jquery">Parallax</a> &#8211; Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.</li>
    <li><a href="http://pixelmatrixdesign.com/uniform/">Uniform</a> &#8211; Ajouter du <em>look and feel</em> aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons <em>Parcourir&#8230; </em>des sobres formulaires HTML.</li>
    <li><a href="http://code.google.com/p/flot/">flot</a> — Créez des graphiques avec jQuery.</li>
    <li><a href="http://james.padolsey.com/jquery/">jQuery Source Viewer</a> &#8211; Naviguer à l’intérieur du code source de <em>jQuery.</em></li>
    <li><a href="http://jqapi.com/">jQAPI</a> — Documentation alternative pour jQuery 1.4.1.</li>
    <li><a href="http://www.admixweb.com/2009/10/25/how-to-easily-create-a-javascript-framework-part-4/">How to Easily Create a JavaScript Framework</a> &#8211; Créez votre framework Javascript en 4 parties.</li>
    <li><a href="http://code.google.com/p/css-template-layout/">css-template-layout</a> &#8211; Implémentation jQuery du module CSS3 Template Layout.</li>
    <li class="pfiou"><a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">jqTransform</a> — Stylez vos formulaires avec jQuery et CSS.</li>
    <li><a href="http://davidwalsh.name/google-fade">Google Fade</a> &#8211; Script disponible pour <em>Mootools</em> et <em>jQuery</em> pour reproduire chez vous l&#8217;effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.</li>
    <li><a href="http://tutsvalley.com/tutorials/making-a-cool-thumbnail-effect-with-zoom-and-sliding-captions/">Thumbnail Zoom</a> — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.</li>
    <li><a href="http://www.evanbot.com/article/jquery-disable-on-submit-plugin/13">Disable On Submit</a> &#8211; Plugin jQuery qui désactive le bouton <em>Submit</em>une fois que le formulaire a été envoyé une première fois.</li>
    <li><a href="http://jqueryfordesigners.com/adding-keyboard-navigation/">Adding Keyboard Navigation</a> &#8211; Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.</li>
    <li><a href="http://www.9lessons.info/2009/09/comment-system-database-with-jquery.html">Comment System with jQuery, Ajax and PHP</a> – L’excellent Srinivas Tamada de<a href="http://www.9lessons.info/2009/09/comment-system-database-with-jquery.html">9Lessons</a> nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.</li>
    <li><a href="http://www.domassistant.com/">DOMAssistant</a> &#8211; Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.</li>
    <li><a href="http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx">Dynamic tabs using jQuery</a> &#8211; Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.</li>
    <li><a href="http://sexyjs.com/">Sexy.js</a> &#8211; Améliorer l’interface Ajax de jQuery.</li>
    <li><a href="http://usejquery.com/posts/9/the-jquery-cross-domain-ajax-guide">jQuery Cross Domain Ajax Guide</a> &#8211; Guide de l’Ajax sur plusieurs domaines.</li>
    <li class="pfiou"><a href="http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/">Page Peel Corner</a> — Effet de page cornée avec jQuery.</li>
    <li><a href="http://www.ape-project.org/">A.P.E</a> (<em>Ajax Push Engine</em>) &#8212; Le web en temps réel avec Ajax Push Engine.</li>
    <li><a href="http://jqueryglobe.com/article/simple-image-viewer">Simple Image Viewer</a> — Galerie d’image minimaliste.</li>
    <li><a href="http://github.com/jquery/jquery-compat-1.3">jquery-compat-1.3</a> — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.</li>
    <li><a href="http://www.jsfiddle.net/">jsfiddle</a> &#8211; Propose un environnement pour tester et partager du code Javascript.</li>
    <li><a href="http://www.futurecolors.ru/jquery/">jQuery 1.4 API Cheat Sheet</a> &#8211; Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.</li>
    <li><a href="http://www.outstandingelephant.com/jaria/">jARIA jQuery Plugin</a> &#8211; Permet d’ajouter une couche <a href="http://www.w3.org/TR/wai-aria/">ARIA</a> dans votre site web sous forme de méthodes.</li>
    <li><a href="http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm">jQuery Quick Guide</a> &#8211; Un guide pour avoir les fonctionnalités de jQuery sous la souris.</li>
    <li><a href="http://www.zorrito.com/animations-images-animees-jquery/">Animation avec quatre images et jQuery</a> &#8211; Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.</li>
    <li><a href="http://desandro.com/resources/jquery-masonry">jQuery Masonsy</a> &#8211; Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.</li>
    <li class="pfiou"><a href="http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/">40 bouts de code</a> &#8211; facilitez vos développements en Javascript ou jQuery.</li>
    <li><a href="http://jquerylist.com/">jQueryList</a> — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.</li>
    <li><a href="http://seox.org/">Link Building Pro</a> — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l&#8217;original.</li>
    <li><a href="http://www.marcofolio.net/css/css3_animations_and_their_jquery_equivalents.html">CSS3 animations and their jQuery equivalents</a> &#8211; 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.</li>
    <li><a href="http://www.jeremymartin.name/projects.php?project=jTruncate">jTruncate</a> &#8211; Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !</li>
    <li><a href="http://www.highcharts.com/">Hightcharts</a> &#8211; Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.</li>
    <li><a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/">jQuery Before/After</a> &#8211; Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.</li>
    <li><a href="http://jwf.us/projects/jQSlickWrap/">jQSlickWrap</a> &#8211; Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.</li>
    <li><a href="http://www.leigeber.com/2009/12/slideshow-script/">TinySlider</a> &#8211; Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.</li>
    <li><a href="http://mootools.net/forge/">Mootools Forge</a> &#8211; Une forge pour les plugins Mootools.</li>
    <li class="pfiou"><a href="http://www.babylon-design.com/site/index.php/2009/11/12/255-systeme-de-notation-par-etoiles-accessible">Système de notation par étoiles accessible</a> &#8211; <a href="http://www.babylon-design.com/">Samuel Le Morvan</a> propose un tutoriel complet sur la question.</li>
    <li><a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Menu déroulant Suckerfish</a> &#8211; Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.</li>
    <li><a href="http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/">Smart Columns with CSS &amp; jQuery</a> &#8211; Des colonnes fixes et ajustées en largeur avec CSS et jQuery.</li>
    <li><a href="http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/">Get viewport size with javascript</a> &#8211; Connaitre la taille du « viewport » en Javascript.</li>
    <li><a href="http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/">Ceebox</a> &#8211; Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.</li>
    <li><a href="http://www.shopdev.co.uk/blog/text-resizing-with-jquery/">Text Resizing width jQuery</a> — Laissez les utilisateur modifier la taille du texte sur votre site web.</li>
    <li><a href="http://planete-jquery.fr/">Planet jQuery</a> &#8211; Un planet pour jQuery.</li>
    <li><a href="http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/">The Ultimate GetElementsByClassName</a> &#8211; Sélectionner les éléments par leur classe avec getElementsByClassName.</li>
    <li><a href="http://papermashup.com/jquery-image-zoom-effect/">Image jQuery</a> – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.</li>
    <li><a href="http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/">maxWidthFixForIE6.js</a> &#8211; Emuler la propriété max-width pour IE6.</li>
    <li class="pfiou"><a href="http://www.twinhelix.com/css/iepngfix/">iepngfix</a> — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.</li>
    <li><a href="http://simplejs.bleebot.com/">SimpleJS</a> — Cette petite bibliothèque Javascript développée par <a href="http://bleebot.com/">Christophe Lefevre</a>propose de faciliter l’utilisation d’Ajax.</li>
    <li><a href="http://tympanus.net/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/">jTextTranslate</a> &#8211; Traduction de votre site en 87 langues par Google.</li>
    <li><a href="http://dean.edwards.name/my/cssQuery/">cssQuery</a> — Interroge le <abbr title="Document Object Model">DOM</abbr> via les sélecteurs <a href="http://www.yoyodesign.org/doc/w3c/css1/index.html">CSS 1</a>, <a href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">CSS 2</a> et une partie de <a href="http://www.w3.org/Style/CSS/current-work">CSS 3</a>.</li>
    <li><a href="http://www.paulbellows.com/getsmart/balance_columns/">balance_columns</a> &#8211; Équilibrer des colonnes avec Javascript.</li>
    <li><a href="http://www.onlinetools.org/tools/domtabdata/">DOMTab</a> &#8211; Menu à onglets simple et efficace.</li>
    <li><a href="http://www.robertnyman.com/2007/04/19/flashreplace-a-light-weight-javascript-to-insert-flash-movies-into-your-web-page/">FlashReplace</a> &#8211; Insérer du Flash proprement.</li>
    <li><a href="http://www.domassistant.com/">DOMAssistant</a> &#8211; Cette bibliothèque va un peu plus loin que <a href="http://www.robertnyman.com/dlite/">dLite</a> et permet de manipuler le DOM avec plus de souplesse.</li>
    <li><a href="http://websemantics.co.uk/resources/styled_accessible_tooltips/">Styled and accessible tooltips</a> &#8211; Infobulles stylées et accessibles avec jQuery.</li>
    <li><a href="http://www.vagrantradio.com/2009/10/how-to-parse-xml-using-jquery-and-ajax.html">jQuery-XML</a> — Afficher un flux RSS avec jQuery et Ajax.</li>
    <li class="pfiou"><a href="http://www.robertnyman.com/dlite/">dLite</a> — une librairie Javascript « petit mais costaud ».</li>
    <li><a href="http://pikachoose.com/">Pikachoose</a> &#8211; Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.</li>
    <li><a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">jQuery Context Menu</a> &#8211; Menus contextuels (clic droit) personnalisable à 100% avec les CSS.</li>
    <li><a href="http://www.tyssendesign.com.au/articles/css/dropdown-low-down/">22 menus déroulants passés au crible</a> &#8211; Tyssen Design passe en revue les principaux<em>dropdown menu</em>.</li>
    <li><a href="http://blog.jaysalvat.com/articles/changez-de-mise-en-page-a-la-volee-avec-jquery.php">Changement de design «on the fly» avec jQuery</a> &#8211; Tutoriel clair et didactique pour permuter deux maquettes d&#8217;un simple clic.</li>
    <li><a href="http://trevordavis.net/blog/tutorial/simple-jquery-text-resizer/">Simple jQuery Text Resizer</a> &#8211; Laissez vos visiteurs choisiront la taille qui leur convient (un<em>cookie</em> gardera leur préférence en mémoire).</li>
    <li><a href="http://plugins.jquery.com/project/cookie">Des cookies à la mode de jQuery</a> &#8211; Ecrire, lire et effacer vos cookies pour 4,15 kb.</li>
    <li><a href="http://valums.com/ajax-upload/">Ajax Upload</a> — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).</li>
    <li><a href="http://alistapart.com/articles/complexdynamiclists/">ul2finder</a> — un explorateur à l’image du Finder de MacOS X.</li>
    <li><a href="http://tympanus.net/codrops/2009/11/04/jquery-image-cropper-with-uploader-v1-1/">jQuery Image Cropper</a> — recadrer et uploader des images.</li>
    <li class="pfiou"><a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/">jQuery UI Selectmenu</a> — des menus « select » personnalisés à la sauce ARIA.</li>
    <li><a href="http://css4design.com/le-code-css-et-javascript-inline-saimal">Le code CSS et Javascript au milieu du HTML c’est pas bien !</a> &#8211; Traduction de l’article<a href="http://www.robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/">Why Inline CSS And JavaScript Code Is Such A Bad Thing</a> de <a href="http://www.robertnyman.com/">Robert Nyman</a>.</li>
    <li><a href="http://phpjs.org/">PHP.JS</a> — transposer des fonctions PHP en Javascript.</li>
    <li><a href="http://jsbin.com/">jsbin — tester votre code Javascript et partagez vos bugs</a> &#8211; Outil en ligne créé par <a href="http://remysharp.com/">Remy Sharp</a> pour tester du code Javascript et le partager</li>
    <li><a href="http://tutorialzine.com/2009/10/google-wave-history-slider-jquery/">Un «slider» à la manière du Playback de Google Wave</a> &#8211; tutoriel pour afficher un historique progressif à la manière de la fonction <em>Playback</em> de Google Wave.</li>
    <li><a href="http://css-tricks.com/anythingslider-jquery-plugin/">Un diaporama avec AnythingSlider jQuery Plugin</a> &#8211; Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).</li>
    <li><a title="Lien permanent vers Google Closure — les mauvaises pratiques Javascript en action ?" href="http://js4design.com/google-closure-les-mauvaises-pratiques-javascript-en-action-185" rel="bookmark">Google Closure — les mauvaises pratiques Javascript en action ?</a> &#8211; Google Closure a été développé par des spécialiste de Java&#8230; ça craint.</li>
    <li><a href="http://www.frequency-decoder.com/2009/09/09/unobtrusive-date-picker-widget-v5">Sélecteur de date (Date-Picker) non-intrusif</a> &#8211; Sélecteur de date avec mini calendrier.</li>
    <li><a href="http://robertnyman.com/firefinder/">FireFinder — interagir avec la page web</a> &#8211; Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.</li>
    <li><a href="http://matthiasschuetz.com/javascript-framework-matrix/en/">Choisir sa bibliothèque JS avec Javascript Framework Matrix</a> &#8211; Tableau comparatif des principaux frameworks Javascript.</li>
    <li class="pfiou"><a href="http://minhd.net/2009/10/13/jquery-pagination-system/">Jquery Pagination System</a> &#8211; Pagination côté client avec jQuery.</li>
    <li><a href="http://jquery.lukelutman.com/plugins/flash/">jQuery Flash Plugin</a> &#8211; Inspiré par <a href="http://blog.deconcept.com/swfobject/">SWFObject</a>, <a href="http://www.bobbyvandersluis.com/ufo/">UFO</a> et <a href="http://www.mikeindustries.com/sifr/">sIFR</a>, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.</li>
    <li><a href="http://quasipartikel.at/multiselect_original/">jQuery UI Multiselect</a> &#8211; Améliore l’apparence et l’ergonomie de la balise HTML<code>select.</code></li>
    <li><a href="http://flowplayer.org/tools/">jQuery Tools</a> &#8211; Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.</li>
    <li><a href="http://onehackoranother.com/projects/jquery/tipsy/">Tipsy — des bulles d’aide façon Facebook avec jQuery</a> &#8211; Bulles d’aide façon bande dessinée comme celles que l’on trouve sur <em>Facebook</em> ou<em>Twitter.</em></li>
    <li><a href="http://www.babylon-design.com/site/index.php/2009/04/14/249-tutoriel-jquery-faire-un-carrousel">Faire un Carrousel avec jQuery</a> &#8211; Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.</li>
    <li><a href="http://www.appelsiini.net/projects/lazyload">Lazy loader : chargement des images à la volée</a> &#8211; Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.</li>
    <li><a href="http://chrisiufer.com/2009/05/jquery-magnifier-loupe/">jQuery Magnifier Loupe</a> &#8211; Zoom sur images avec l’attribut <em>longdesc.</em></li>
    <li><a href="http://blog.jaysalvat.com/articles/realisez-un-bandeau-de-news-en-jquery-comme-sur-itele.php">News déroulantes avec jQuery</a> &#8211; Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.</li>
    <li><a href="http://cufon.shoqolate.com/">Cufón : des polices de caractère pour tous</a> &#8211; Implémenter font-face dans le plus grand nombre de navigateurs.</li>
    <li class="pfiou"><a title="Lien permanent vers jQuery — renverser l’ordre d’une liste ordonnée" href="http://js4design.com/jquery-renverser-lordre-dune-liste-ordonnee-42" rel="bookmark">jQuery — renverser l’ordre d’une liste ordonnée</a> &#8211; les premiers seront les derniers et vice-versa. Merci à <a href="http://pioupioum.fr/">pioupiouM</a> pour la correction du script.</li>
    <li><a href="http://dev.iceburg.net/jquery/jqModal/">jqModal : des fenêtres modales minimalistes </a>&#8211; Couteau suisse des <em>Lightbox</em> en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.</li>
    <li><a href="http://jparse.kylerush.net/">Afficher vos flux XML avec jParse </a>&#8211; Parsing de flux XML (<em>RSS</em>, <em>Atom</em>) via Ajax pour l’afficher en HTML.</li>
    <li><a title="Lien permanent vers Javascript Framework Matrix" href="http://matthiasschuetz.com/javascript-framework-matrix/en/" rel="bookmark">Javascript Framework Matrix</a> &#8211; Tableau comparatif des principaux frameworks Javascript.</li>
    <li><a title="Lien permanent vers Augmenter la taille du texte avec jQuery" href="http://9lessons.blogspot.com/2009/10/zooming-with-jquery-and-css.html" rel="bookmark">Augmenter la taille du texte avec jQuery</a> &#8211; Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.</li>
    <li><a title="Lien permanent vers Effets jQuery accessibles WAI-RIA" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA" rel="bookmark">Effets jQuery accessibles WAI-RIA</a> &#8211; Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.</li>
    <li><a href="http://ecsstender.org/">eCSStender</a> &#8211; Sélecteurs CSS avancés compatibles IE6.</li>
    <li><a href="http://www.gmarwaha.com/jquery/jcarousellite/">jCarousel Lite</a> &#8211; Galerie d’images en jQuery.</li>
</ol>

<p>Pour trouver l&#8217;article correspondant sur Javascript &amp; Webdesign, il suffit de saisir l&#8217;ancre du lien dans le champs de recherche. Cette liste sera mise à jour régulièrement, n&#8217;hésitez pas à revenir !</p>

<h2>73 tutoriels : Slideshow, Sliders &amp; Diaporama</h2>

<p>Voici une <strong>liste condensée de tutoriels</strong> ou scripts jQuery commentés pour apprendre à faire défiler vos contenus textes et/ou image sous forme de Slideshow, de Sliders ou de diaporamas :</p>

<ol>
    <li><a title="http://designm.ag/tutorials/image-rotator-css-jquery/" href="http://designm.ag/tutorials/image-rotator-css-jquery/">Create an Image Rotator with Description (CSS/jQuery)</a> — <a href="http://www.sohtanaka.com/web-design/examples/image-rotator/">Démo</a></li>
    <li><a title="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/" href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/">Sliding Boxes and Captions with jQuery</a> — <a href="https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm">Démo</a></li>
    <li><a title="http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/" href="http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/">Animate Panning Slideshow with jQuery</a> — <a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm">Démo</a></li>
    <li><a href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html">Create Beautiful jQuery Slider Tutorial</a> — <a href="http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html">Démo</a></li>
    <li><a title="http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery" href="http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery">Create a Fancy Image Gallery with JQuery</a></li>
    <li><a title="http://jqueryfordesigners.com/jquery-infinite-carousel/" href="http://jqueryfordesigners.com/jquery-infinite-carousel/" rel="bookmark">jQuery Infinite Carousel</a></li>
    <li><a title="http://jqueryfordesigners.com/coda-slider-effect/" href="http://jqueryfordesigners.com/coda-slider-effect/" rel="bookmark">Coda Slider Effect</a></li>
    <li><a title="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/" href="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/">Create Featured Content Slider Using jQuery UI</a></li>
    <li><a title="http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/" href="http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/">Making a Content Slider with jQuery UI</a></li>
    <li><a title="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/" href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/" rel="bookmark">Creating a Slick Auto-Playing Featured Content Slider</a></li>
    <li><a title="http://css-tricks.com/startstop-slider/" href="http://css-tricks.com/startstop-slider/" rel="bookmark">Start/Stop Slider</a></li>
    <li><a title="http://www.hieu.co.uk/blog/index.php/imageswitch/docs/" href="http://www.hieu.co.uk/blog/index.php/imageswitch/docs/">ImageSwitch</a></li>
    <li><a title="http://www.webdesignbooth.com/step-by-step-to-create-content-slider-using-jflow-a-minimalist-jquery-plugin/" href="http://www.webdesignbooth.com/step-by-step-to-create-content-slider-using-jflow-a-minimalist-jquery-plugin/" rel="bookmark">Create Content Slider using jFlow, A Minimalist jQuery Plugin</a></li>
    <li><a title="http://www.raymondselda.com/jquery-looped-slider-tutorial/" href="http://www.raymondselda.com/jquery-looped-slider-tutorial/">jQuery Looped Slider Tutorial</a></li>
    <li><a title="http://brenelz.com/blog/build-a-content-slider-with-jquery/" href="http://brenelz.com/blog/build-a-content-slider-with-jquery/">Build a Content Slider with jQuery</a></li>
    <li><a title="http://freecss.info/free-css-tutorials/css-and-jquery-creating-image-slider/" href="http://freecss.info/free-css-tutorials/css-and-jquery-creating-image-slider/">CSS and jQuery-Crating an Image Slider</a></li>
    <li><a title="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/" href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/">A Beautiful Apple-style Slideshow Gallery With CSS &amp; jQuery</a></li>
    <li><a title="http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/" href="http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/">Making a Mosaic Slideshow With jQuery &amp; CSS</a></li>
    <li><a title="http://tutorialzine.com/2009/10/slick-content-slider-jquery/" href="http://tutorialzine.com/2009/10/slick-content-slider-jquery/">Making A Slick Content Slider</a></li>
    <li><a title="http://devkick.com/lab/galleria/" href="http://devkick.com/lab/galleria/">Galleria</a></li>
    <li><a title="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider">Easy Slider</a></li>
    <li><a title="http://www.twospy.com/galleriffic/" href="http://www.twospy.com/galleriffic/">Galleriffic</a></li>
    <li><a title="http://coffeescripter.com/code/ad-gallery/" href="http://coffeescripter.com/code/ad-gallery/">AD Gallery</a></li>
    <li><a title="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/" href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/">Sliding Boxes and Captions</a></li>
    <li><a title="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en" href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en">jQuery Virtual Tour</a></li>
    <li><a title="http://pupunzi.open-lab.com/mb-jquery-components/mb-gallery/" href="http://pupunzi.open-lab.com/mb-jquery-components/mb-gallery/">jQuery MB Gallery</a></li>
    <li><a title="http://css-tricks.com/anythingslider-jquery-plugin/" href="http://css-tricks.com/anythingslider-jquery-plugin/">AnythingSlider</a></li>
    <li><a title="http://spaceforaname.com/galleryview" href="http://spaceforaname.com/galleryview">GalleryView</a></li>
    <li><a title="http://sorgalla.com/jcarousel/" href="http://sorgalla.com/jcarousel/">jCarousel</a> – <a title="Lien permanent vers jCarousel — un Carousel jQuery très complet" href="http://js4design.com/jcarousel-carousel-jquery-984" rel="bookmark">jCarousel — un Carousel jQuery très complet</a></li>
    <li><a title="http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery" href="http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery">Easiest Tooltip and Image Preview</a></li>
    <li><a title="http://jquery.com/demo/thickbox/" href="http://jquery.com/demo/thickbox/">ThickBox</a></li>
    <li><a title="http://eyecon.ro/spacegallery/#about" href="http://eyecon.ro/spacegallery/#about">SpaceGallery</a></li>
    <li><a title="http://www.serie3.info/s3slider/" href="http://www.serie3.info/s3slider/">s3Slider</a></li>
    <li><a title="http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm" href="http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm">Simple Controls Gallery</a></li>
    <li><a title="http://pikachoose.com/" href="http://pikachoose.com/">Pikachoose</a> – <a title="Lien permanent vers Pikachoose : le bon choix pour afficher vos images" href="http://js4design.com/pikachoose-le-bon-choix-pour-afficher-vos-images-25" rel="bookmark">Pikachoose : le bon choix pour afficher vos images</a></li>
    <li><a title="http://herr-schuessler.de/blog/jquery-popeye-1-0-released/" href="http://herr-schuessler.de/blog/jquery-popeye-1-0-released/">jQuery Popeye</a> – <a title="Lien permanent vers jQuery Popeye 2.0 — Une Lightbox inline" href="http://js4design.com/jquery-popeye-2-0-une-lightbox-inline-716" rel="bookmark">jQuery Popeye 2.0 — Une Lightbox inline</a></li>
    <li><a title="http://www.buildinternet.com/project/supersized/" href="http://www.buildinternet.com/project/supersized/">Supersized</a></li>
    <li><a title="http://jqueryglobe.com/article/imgbox" href="http://jqueryglobe.com/article/imgbox">imgBox</a></li>
    <li><a title="http://www.pirolab.it/pirobox/" href="http://www.pirolab.it/pirobox/">Pirobox</a></li>
    <li><a title="http://www.mind-projects.it/projects/jqzoom/" href="http://www.mind-projects.it/projects/jqzoom/">jQZoom</a></li>
    <li><a title="http://www.pierrebertet.net/projects/jquery_superbox/" href="http://www.pierrebertet.net/projects/jquery_superbox/">jQuery Superbox</a></li>
    <li><a title="http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/" href="http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/">jQuery Infinite Carousel</a></li>
    <li><a title="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption" href="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption">Simple jQuery Image Slide Show with Semi-Transparent Caption</a></li>
    <li><a title="http://css-tricks.com/moving-boxes/" href="http://css-tricks.com/moving-boxes/">Moving Boxes</a></li>
    <li><a title="http://leandrovieira.com/projects/jquery/lightbox/" href="http://leandrovieira.com/projects/jquery/lightbox/">LightBox</a></li>
    <li><a title="http://jqueryfordesigners.com/slider-gallery/" href="http://jqueryfordesigners.com/slider-gallery/">SliderGallery</a></li>
    <li><a title="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/" href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">FeaturedContent</a></li>
    <li><a title="http://medienfreunde.com/lab/innerfade/" href="http://medienfreunde.com/lab/innerfade/">InnerFade</a></li>
    <li><a title="http://codeassembly.com/jQuery-morphing-gallery/" href="http://codeassembly.com/jQuery-morphing-gallery/">jQuery Morphing Gallery</a></li>
    <li><a title="http://jonraasch.com/blog/a-simple-jquery-slideshow" href="http://jonraasch.com/blog/a-simple-jquery-slideshow">A Simple jQuery Slideshow</a></li>
    <li><a title="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/" href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Create a Slick and Accessible Slideshow Using jQuery</a></li>
    <li><a title="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/" href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/">Building a jQuery Image Scroller</a></li>
    <li><a title="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/" href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/">Sliding Boxes and Captions with jQuery</a></li>
    <li><a title="http://freecss.info/free-css-tutorials/css-and-jquery-creating-image-slider/" href="http://freecss.info/free-css-tutorials/css-and-jquery-creating-image-slider/">Creating an Image Slider</a></li>
    <li><a title="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html" href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html">Create Beautiful jQuery slider tutorial</a></li>
    <li><a title="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption" href="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption">Simple JQuery Image Slide Show with Semi-Transparent Caption</a></li>
    <li><a title="http://www.devcurry.com/2009/07/create-simple-image-slide-show-using.html" href="http://www.devcurry.com/2009/07/create-simple-image-slide-show-using.html">Create a Simple Image Slide Show using jQuery</a></li>
    <li><a title="http://www.webair.it/blog/2009/03/11/slide-and-hide-section-with-jquery/" href="http://www.webair.it/blog/2009/03/11/slide-and-hide-section-with-jquery/">Slide and hide section with jquery</a></li>
    <li><a title="http://www.deadmarshes.com/Blog/jQuery%20Slideshow.html" href="http://www.deadmarshes.com/Blog/jQuery%20Slideshow.html">Making a Slideshow with jQuery</a></li>
    <li><a title="http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow" href="http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow">jQuery – Creating a Slideshow</a></li>
    <li><a title="http://kefafala.com/2009/4/9/simple-jquery-slideshows" href="http://kefafala.com/2009/4/9/simple-jquery-slideshows">Simple jQuery slideshows</a></li>
    <li><a title="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/" href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Creating a Slick Auto-Playing Featured Content Slider</a></li>
    <li><a title="http://www.ajaxblender.com/howto-extend-jquery-lightbox-plugin-with-slideshow.html" href="http://www.ajaxblender.com/howto-extend-jquery-lightbox-plugin-with-slideshow.html">How to add Slideshow to jQuery lightbox plugin</a></li>
    <li><a title="http://www.devirtuoso.com/2009/08/jquery-slideshow-explained/" href="http://www.devirtuoso.com/2009/08/jquery-slideshow-explained/">jQuery Slideshow Explained</a></li>
    <li><a title="http://www.buildinternet.com/project/supersized/" href="http://www.buildinternet.com/project/supersized/">Supersized jQuery Plugin</a></li>
    <li><a title="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding">The Easiest jQuery Plugin For Sliding Images and Content</a></li>
    <li><a title="http://spaceforaname.com/galleryview" href="http://spaceforaname.com/galleryview">GalleryView: A jQuery Content Gallery Plugin</a></li>
    <li><a title="http://cool-javascripts.com/effects/image-flow-09.html" href="http://cool-javascripts.com/effects/image-flow-09.html">Image Flow</a></li>
    <li><a title="http://www.serie3.info/s3slider/" href="http://www.serie3.info/s3slider/">S3Slider jQuery plugin</a></li>
    <li><a title="http://www.eogallery.com/" href="http://www.eogallery.com/">EOGallery</a></li>
    <li><a title="http://www.maaki.com/thomas/SmoothDivScroll/" href="http://www.maaki.com/thomas/SmoothDivScroll/">Smooth Div Scroll</a></li>
    <li><a title="http://www.openstudio.fr/jquery-virtual-tour/" href="http://www.openstudio.fr/jquery-virtual-tour/">jQuery virtual tour</a></li>
    <li><a title="http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/" href="http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/">Supersized – Full Screen Background/Slideshow jQuery Plugin</a></li>
</ol>

<h2>100+ Polyfills et Fallbacks pour HTML5</h2>

<p>L&#8217;article <a title="" href="http://css4design.com/polyfills-fallbacks-html5" rel="bookmark">100+ Polyfills et Fallbacks pour HTML5</a> présente une collection de plus de 100 bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Cette liste étant mise à jour régulièrement, elle ne figure pas sur cette page. Elle est accessible directement à l&#8217;adresse <strong><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">HTML5-Cross-Browser-Polyfills</a></strong>.</p>

<h2>Voilà, c&#8217;est fini !</h2>

<p>J&#8217;espère que cette longue liste n&#8217;aura pas été trop indigeste et qu&#8217;elle vous sera aussi utile qu&#8217;à moi. N&#8217;hésitez pas à me signaler si votre script préféré manque à l&#8217;appel ou si le lien vers le script de vos rêves mène à une impasse.</p>

<p>&nbsp;</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/polyfills-fallbacks-html5' title='100+ Polyfills et Fallbacks pour HTML5'>100+ Polyfills et Fallbacks pour HTML5</a></li><li><a href='http://css4design.com/wordpress-a-z-extension-plugin' title='WordPress de A à Z &#8212; E comme Extensions (les plugins)'>WordPress de A à Z &#8212; E comme Extensions (les plugins)</a></li><li><a href='http://css4design.com/139-ressources-javascript-et-jquery' title='139 ressources Javascript et jQuery'>139 ressources Javascript et jQuery</a></li><li><a href='http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-7' title='Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek'>Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=11119&amp;md5=53f548f7ca87209231b9f50c5b2dd93a" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/liens-javascript-jquery/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>100+ Polyfills et Fallbacks pour HTML5</title>
		<link>http://css4design.com/polyfills-fallbacks-html5</link>
		<comments>http://css4design.com/polyfills-fallbacks-html5#comments</comments>
		<pubDate>Sun, 20 Nov 2011 19:20:24 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Intégration web]]></category>
		<category><![CDATA[APNG (PNG animé)]]></category>
		<category><![CDATA[ARIA]]></category>
		<category><![CDATA[Audio]]></category>
		<category><![CDATA[Balises HTML5]]></category>
		<category><![CDATA[Base64]]></category>
		<category><![CDATA[Cache applicatif]]></category>
		<category><![CDATA[Canvas]]></category>
		<category><![CDATA[ClassList]]></category>
		<category><![CDATA[Command]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Dataset]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[ECMAScript 5]]></category>
		<category><![CDATA[EventSource]]></category>
		<category><![CDATA[File API]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Geo-Location]]></category>
		<category><![CDATA[Gestion de l'état du navigateur]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Keygen]]></category>
		<category><![CDATA[MathML]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Microdata]]></category>
		<category><![CDATA[Output]]></category>
		<category><![CDATA[Progress]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[SVG]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Web Forms]]></category>
		<category><![CDATA[Web Sockets]]></category>
		<category><![CDATA[Web SQL]]></category>
		<category><![CDATA[Web Storage]]></category>
		<category><![CDATA[Web Worker]]></category>
		<category><![CDATA[WebGL]]></category>
		<category><![CDATA[XBL]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=11013</guid>
		<description><![CDATA[Un Polyfill est un script qui permet d&#8217;émuler les fonctionnalités qui manquent à un navigateur. Par exemple, HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Les Polyfills permettent d&#8217;utiliser ces API d&#8217;une manière standard sans être obligé d&#8217;utiliser des contournements qui seront obsolètes à terme. Pour nous aider dans cette tâche, voici une collection de bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Modernizr  est un bon point de départ pour détecter ces fonctionnalités. Guide tout-en-un des solutions [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fpolyfills-fallbacks-html5">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fpolyfills-fallbacks-html5&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Un <em>Polyfill</em> est un script qui permet d&#8217;émuler les fonctionnalités qui manquent à un navigateur. Par exemple, HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Les Polyfills permettent d&#8217;utiliser ces API d&#8217;une manière standard sans être obligé d&#8217;utiliser des contournements qui seront obsolètes à terme. Pour nous aider dans cette tâche, voici une collection de bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. <a href="http://www.modernizr.com/" rel="nofollow">Modernizr</a>  est un bon point de départ pour détecter ces fonctionnalités.<span id="more-11013"></span></p>

<p><strong><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Guide tout-en-un des solutions de repli pour HTML5</a>. </strong>Liste garantie entièrement non-alphabétique et sans grumeau ! Voici quelques exemples parmi cette liste de plus de 100 <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">Polyfills</a> et Fallbacks :</p>

<h2>SVG</h2>

<p><a href="http://raphaeljs.com/">RaphaelJS</a> &#8211; Raphaël est une petite bibliothèque Javascript développée par <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a> qui devrait vous simplifier la vie lors de l&#8217;utilisation des images vectorielles sur le web. Raphaël utilise les recommandations du W3C pour SVG et la technologie VML pour créer des images. Chaque visuel créé fait partie du DOM. Il est donc aisé d&#8217;ajouter des gestionnaires d&#8217;événements pour modifier ces objets à volonté. Raphaël est compatible avec Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer à partir de la version 6.0.</p>

<h2>Canvas</h2>

<p><a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a> (ExCanvas) &#8212; L&#8217;élément HTML5 <em>Canvas</em> pour Internet Explorer. Les navigateurs modernes comme Firefox, Safari, Chrome et Opera prennent en charge le tag &lt;canvas&gt; pour dessiner en 2D dans le navigateur sans plugin externe. <em>ExplorerCanvas</em> apporte la même fonctionnalité dans Internet Explorer grâce à l&#8217;inclusion d&#8217;un simple script dans vos pages existantes (à condition qu&#8217;elles utilisent l&#8217;élément &lt;canvas&gt; !).</p>

<h2>Session Storage</h2>

<p><a href="http://code.google.com/p/sessionstorage/">sessionstorage</a> &#8211; L&#8217;objet <em>sessionStorage</em> pour tous les navigateurs ! (Voir aussi le script <a href="https://gist.github.com/350433">Storage polyfill</a> de <a href="http://remysharp.com/">Remy Sharp</a>).</p>

<h2>HTML 5</h2>

<p><a href="http://code.google.com/p/html5shim/">html5shim</a> &amp; <a href="http://jdbartlett.com/innershiv/">innerShiv</a> &#8211; <strong>html5shim</strong> permet d&#8217;injecter dans le DOM d&#8217;Internet Explorer les balises HTML5. Quant à <strong>innerShiv</strong>, il s&#8217;arrange pour que les balises injectées par <em>html5shim</em> fonctionnent toujours lorsqu&#8217;elles sont créées via la méthode Javascript innerHTML. A noter que <em>innerShiv</em> n&#8217;est plus nécessaire avec jQuery 1.7.</p>

<h2>Audio &amp; Video</h2>

<p><a href="http://mediaelementjs.com/">MediaElement.js</a> &#8211; Propose des players &lt;video&gt; et &lt;audio&gt; en pur HTML &amp; CSS pour les navigateurs modernes et des versions Flash et Silverlight pour les vieux navigateurs. Cette stratégie permet d&#8217;offrir une expérience visuelle identique aux visiteurs quel que soit le navigateur qu&#8217;ils utilisent. Cerises sur le gâteau : respect de l&#8217;accessibilité et des plugins pour les CMS WordPress, Drupal, Joomla, jQuery, and BlogEngine.NET, Ruby Gem et Plone.</p>

<h2>Formulaires HTML5</h2>

<p><a href="https://github.com/ryanseddon/H5F">H5F</a> &#8211; HTML 5 Forms autorise l&#8217;utilisation des nouveaux types de champs, attributs et contraintes de validation de formulaire apparus avec HTML5, dans les vieux navigateurs.</p>

<h2>CSS3</h2>

<ul>
    <li><a href="http://css3pie.com/" rel="nofollow">CSS3 PIE</a> &#8211; Utilisez les propriétés <em>border-radius</em>, <em>box-shadow</em>, <em>multiple backgrounds</em>, <em>linear gradients</em>, <em>border-image</em> dans IE de la version 6 à 9</li>
    <li><a href="http://www.csscripting.com/css-multi-column/" rel="nofollow">CSS3 &#8211; Multi Column</a> &#8211; Utilisez les propriétés <em>column-count</em>, <em>column-width</em>, <em>column-gap</em>, <em>column-rule</em> dans Safari 1.3, Opera 7.54, Opera 8, Firefox 1.0.4, Netscape 7.1 et IE 6.</li>
    <li><a href="https://github.com/scottjehl/Respond" rel="nofollow">Respond</a> &#8211; Permet d&#8217;utiliser les propriétés min/max-width de CSS3 Media Queries dans IE 6 &#8212; 8.</li>
</ul>

<p><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Cette liste</a> est éditée et maintenue par <a href="http://paulirish.com/" rel="nofollow">Paul Irish</a> avec les contributions de <a href="http://code.google.com/p/html5-shims/wiki/LinksandResources" rel="nofollow">Jonathan Cook</a>, <a href="http://www.html5patch.com/" rel="nofollow">Mark Boas</a>, <a href="http://twitter.com/#!/irishbehan" rel="nofollow">Michael Behan</a>, <a href="http://mathiasbynens.be/" rel="nofollow">Mathias Bynens</a>, Eli Grey, Øyvind Sean Kinsey, et bien d&#8217;autres.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/html5media-les-balises-html5-audio-et-video-sans-contrainte' title='html5media &#8212; Les balises HTML5 audio et video sans contrainte'>html5media &#8212; Les balises HTML5 audio et video sans contrainte</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-31-decembre-2010' title='Le petit journal du Web — 31 décembre 2010'>Le petit journal du Web — 31 décembre 2010</a></li><li><a href='http://css4design.com/html5-please-fallback-polyfill' title='HTML5 Please &#8212; Fallback et Polyfills (ou pas)'>HTML5 Please &#8212; Fallback et Polyfills (ou pas)</a></li><li><a href='http://css4design.com/wordpress-a-z-functions-php' title='WordPress de A à Z — F comme Functions.php'>WordPress de A à Z — F comme Functions.php</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=11013&amp;md5=aa175e05e3115a9c649443aaf549b83c" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/polyfills-fallbacks-html5/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Le Petit Journal du Web &#8212; 09/2011</title>
		<link>http://css4design.com/petit-journal-du-web-septembre-2011</link>
		<comments>http://css4design.com/petit-journal-du-web-septembre-2011#comments</comments>
		<pubDate>Tue, 27 Sep 2011 12:45:23 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Le petit journal du web]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Blank Theme]]></category>
		<category><![CDATA[CDN]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Coins arrondis]]></category>
		<category><![CDATA[Cours]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Leçon]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Programmation]]></category>
		<category><![CDATA[Samsung]]></category>
		<category><![CDATA[Smartphone]]></category>
		<category><![CDATA[Sony Ericsson]]></category>
		<category><![CDATA[Thème]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=10777</guid>
		<description><![CDATA[Le dernier Petit journal du web paru sur CSS &#38; Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j&#8217;ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc. [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fpetit-journal-du-web-septembre-2011">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fpetit-journal-du-web-septembre-2011&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Le dernier <a href="http://css4design.com/articles/le-petit-journal-du-web">Petit journal du web</a> paru sur <em>CSS &amp; Webdesign</em> remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j&#8217;ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et <a href="http://js4design.com/">Javascript</a> en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc.<span id="more-10777"></span></p>

<ul>
    <li><a href="http://wp4design.com">WordPress Basics</a> &#8212; Actuellement en version 0.2.8.1, le Blank Theme <em>Basics</em> est accompagné du thème enfant <em>Beyond Basics</em> pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.</li>
    <li><a href="http://www.codecademy.com/">Codecademy</a> &#8211; Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via <a href="http://roget.biz/">roget.biz</a></li>
    <li><a title="CSS3 Rounded Image With jQuery" href="http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery">CSS3 Rounded Image With jQuery</a> &#8211; Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise &lt;img&gt;. Voir <a href="http://www.webdesignerwall.com/demo/jquery-css3-rounded-img/">la démo</a>.</li>
    <li><a href="http://www.eboyer.com/dev/882-cdn-media-server/">CDN Media Server</a> &#8212; Boostez les performances de vos sites avec un « media server ».</li>
    <li><a href="http://css.steaw.com/">CSS : l&#8217;Art &amp; la Science</a> &#8212; Un parcours initiatique à l&#8217;intégration web rempli d&#8217;humour et de poésie, par <a href="http://bbxdesign.com/2011/09/19/css-lart-la-science/">bbxdesign</a>.</li>
    <li><a href="http://www.alsacreations.com/tuto/lire/1267-un-menu-deroulant-adapte-au-web-mobile.html">Menu déroulant pour mobile</a> &#8212; Tutoriel complet sur la mise en place d&#8217;un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson <em>old School</em> ! Voir <a href="http://www.alsacreations.com/xmedia/tuto/exemples/menu-mediaqueries/index.html">la démo</a>.</li>
</ul>

<p>&nbsp;</p>

<p>&nbsp;</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/wordpress-a-z-extension-plugin' title='WordPress de A à Z &#8212; E comme Extensions (les plugins)'>WordPress de A à Z &#8212; E comme Extensions (les plugins)</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-novembre-2011' title='Le petit journal du web &#8212; WordPress, développement web, etc.'>Le petit journal du web &#8212; WordPress, développement web, etc.</a></li><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/generateur-de-coins-arrondis-avec-border-radius' title='Générateur de coins arrondis avec border-radius'>Générateur de coins arrondis avec border-radius</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur' title='Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur'>Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=10777&amp;md5=7a832cca3c7652bd97fe1eccdef288ec" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/petit-journal-du-web-septembre-2011/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress &#8212; Menus «funky» avec wp_list_bookmarks()</title>
		<link>http://css4design.com/wordpress-menu-funky-avec-wp_list_bookmarks</link>
		<comments>http://css4design.com/wordpress-menu-funky-avec-wp_list_bookmarks#comments</comments>
		<pubDate>Wed, 24 Feb 2010 18:56:47 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Content Management System]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Système de gestion de contenu (CMS)]]></category>
		<category><![CDATA[Template]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=5410</guid>
		<description><![CDATA[WordPress est un CMS formidable, ce qui ne l&#8217;empêche pas d&#8217;avoir des lacunes. L&#8217;une d&#8217;elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n&#8217;est pas toujours très évidente à maintenir. Voici la solution que j&#8217;ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog. La fonction [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fwordpress-menu-funky-avec-wp_list_bookmarks">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fwordpress-menu-funky-avec-wp_list_bookmarks&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><a href="http://css4design.com/dites-wordpress-pas-weirdpress">WordPress est un CMS formidable</a>, ce qui ne l&#8217;empêche pas d&#8217;<a href="http://css4design.com/que-manque-t-il-a-wordpress">avoir des lacunes</a>. L&#8217;une d&#8217;elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme <a href="http://drupalfr.org/">Drupal</a> ou <a href="http://www.joomla.fr/">Joomla</a>. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n&#8217;est pas toujours très évidente à maintenir. Voici la solution que j&#8217;ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog.<span id="more-5410"></span></p>

<h2>La fonction wp_list_bookmarks()</h2>

<p>La fonction <a href="http://codex.wordpress.org/Template_Tags/wp_list_bookmarks">wp_list_bookmarks()</a> possède plusieurs arguments intéressants dont l&#8217;identifiant de la catégorie à afficher <em>category=386</em> et <em>before</em> et <em>after</em> qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s&#8217;agit de la balise <code>li</code>. Toutefois, pour une bonne gestion des coins arrondis, j&#8217;ai ajouté une balise <code>p</code> (oui, un <code>p</code> dans le <code>li</code>, ça manque d&#8217;élégance&#8230; ), ce qui oblige à préciser explicitement les balises <code>li</code>.
<pre>&lt;div id="featured-posts" class="wrapper"&gt;
    &lt;ul&gt;
        &lt;?php echo wp_list_bookmarks('title_li=&amp;categorize=0&amp;category=386&amp;before=&lt;li&gt;&lt;p&gt;&amp;after=&lt;/p&gt;&lt;/li&gt;'); ?&gt;
    &lt;/ul&gt;
&lt;/div&gt;</pre></p>

<h2>Une pincée de CSS3 pour épicer le menu</h2>

<p><pre>&#35;featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
&#35;featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
&#35;featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
<em>/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/</em>
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}</pre>
En fonction de la <a href="http://css4design.com/css-4-design-nouvelle-charte-graphique-et-redesign-du-logo">grille de mise en page</a> que j&#8217;ai mise en place sur ce blog, j&#8217;ai opté pour l&#8217;affichage de 8 liens occupant chacun 2 colonnes sur les 16 disponibles. Si vous voulez disposer d&#8217;un deuxième menu comme celui que j&#8217;ai ajouté dans mon pied de page, il suffit de dupliquer la fonction wp_list_bookmarks, de changer l&#8217;<code>id</code> de la catégorie des liens et de remplacer <code>#featured-posts</code> par <code>.featured-posts</code> <em>and the cat&#8217;s in the bag!</em></p>

<p class="small">Note : si vous aviez déjà utilisé le <em>Widget Liens</em> dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre <em>blogroll</em> faites glisser le <em>Widget Liens</em>, sélectionnez la catégorie dans le menu déroulant et répétez l&#8217;opération autant de fois que nécessaire.</p>

<h2>Pour finir</h2>

<p>Oui,  toutes ces opérations sont un peu fastidieuses, mais je n&#8217;ai pas encore trouvé mieux à part attendre la sortie prochaine de WordPress 3.0. D&#8217;ailleurs, à ce propos, je vous propose de lire l&#8217;article <a href="http://www.wordpress-fr.net/blog/les-menus-lintegration-de-mu-et-une-course-aux-correctifs">Les menus, l’intégration de MU, et une course aux correctifs !</a> de Xavier Borderie sur <a href="http://www.wordpress-fr.net/blog/">WordPress Francophone</a> qui parle notamment de l&#8217;intégration prochaine d&#8217;une fonctionnalités permettant de faire des menus en veux-tu en voilà !</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/le-petit-journal-du-web-novembre-2011' title='Le petit journal du web &#8212; WordPress, développement web, etc.'>Le petit journal du web &#8212; WordPress, développement web, etc.</a></li><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/petit-journal-du-web-septembre-2011' title='Le Petit Journal du Web &#8212; 09/2011'>Le Petit Journal du Web &#8212; 09/2011</a></li><li><a href='http://css4design.com/creation-de-site-wordpress-de-a-a-z-b-comme-basics' title='Création de site WordPress de A à Z &#8212; B comme Basics'>Création de site WordPress de A à Z &#8212; B comme Basics</a></li><li><a href='http://css4design.com/wordpress-a-z-allons-y' title='WordPress de A à Z &#8212; A comme Allons-y ! (on s&#8217;organise)'>WordPress de A à Z &#8212; A comme Allons-y ! (on s&#8217;organise)</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/wordpress-menu-funky-avec-wp_list_bookmarks/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>30 menus de navigation en CSS pour votre site web</title>
		<link>http://css4design.com/30-menus-de-navigation-en-css-pour-votre-site-web</link>
		<comments>http://css4design.com/30-menus-de-navigation-en-css-pour-votre-site-web#comments</comments>
		<pubDate>Fri, 26 Dec 2008 13:18:40 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Conception de site web]]></category>
		<category><![CDATA[Design & Graphisme]]></category>
		<category><![CDATA[Le petit journal du web]]></category>
		<category><![CDATA[Charte graphique]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Navigation]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=2599</guid>
		<description><![CDATA[styledmenus propose une trentaine de menus de navigation compatibles avec les navigateurs IE6, IE7, Firefox, Opera, Safari, Chrome et conformes aux recommandations du W3C. Le téléchargement de ces menus est gratuit ; toutefois, vous pouvez acheter les fichiers originaux au format .psd si vous voulez personnaliser davantage vos menus selon votre charte graphique. Merci Thierry ;) Articles sur le même sujet WordPress &#8212; Menus «funky» avec wp_list_bookmarks()Le Petit Journal du Web &#8212; 09/2011Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitementMenu à onglets (tabs) &#8212; idTabs ou domTab ?Optimiser et styler les catégories WordPress avec les [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2F30-menus-de-navigation-en-css-pour-votre-site-web">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2F30-menus-de-navigation-en-css-pour-votre-site-web&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><a href="http://www.styledmenus.com/">styledmenus</a> propose une trentaine de menus de navigation compatibles avec les navigateurs IE6, IE7, Firefox, Opera, Safari, Chrome et conformes aux <a href="http://www.la-grange.net/w3c/">recommandations du W3C</a>.</p>

<p>Le téléchargement de ces menus est gratuit ; toutefois, vous pouvez acheter les fichiers originaux au format <em>.psd</em> si vous voulez personnaliser davantage vos menus selon votre charte graphique.</p>

<p>Merci <a href="http://roget.biz/">Thierry</a> ;)</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/wordpress-menu-funky-avec-wp_list_bookmarks' title='Wordpress &#8212; Menus «funky» avec wp_list_bookmarks()'>WordPress &#8212; Menus «funky» avec wp_list_bookmarks()</a></li><li><a href='http://css4design.com/petit-journal-du-web-septembre-2011' title='Le Petit Journal du Web &#8212; 09/2011'>Le Petit Journal du Web &#8212; 09/2011</a></li><li><a href='http://css4design.com/navigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement' title='Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitement'>Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitement</a></li><li><a href='http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css4design.com/optimiser-et-styler-les-categories-wordpress-avec-les-css' title='Optimiser et styler les catégories WordPress avec les CSS'>Optimiser et styler les catégories WordPress avec les CSS</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/30-menus-de-navigation-en-css-pour-votre-site-web/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitement</title>
		<link>http://css4design.com/navigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement</link>
		<comments>http://css4design.com/navigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement#comments</comments>
		<pubDate>Sun, 21 Sep 2008 06:34:17 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Ergonomie & Accessibilité]]></category>
		<category><![CDATA[Ergonomie]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=1961</guid>
		<description><![CDATA[L&#8217;excellent guide sur les différentes systèmes de navigation Donne-moi ce que je veux !&#160;&#187; est désormais accessible gratuitement en ligne. Découvrez 60 modèles de navigation commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité. Via le blog Alsacréations. Articles sur le même sujet WordPress &#8212; Menus «funky» avec wp_list_bookmarks()30 menus de navigation en CSS pour votre site webMenu à onglets (tabs) &#8212; idTabs ou domTab ?Nanotabs &#8212; un idTabs minimaliste sans jQueryOptimiser et styler les catégories WordPress avec les CSS]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fnavigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fnavigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>L&#8217;excellent guide sur les différentes systèmes de navigation <em>Donne-moi ce que je veux !&nbsp;&raquo;</em> est désormais accessible gratuitement en ligne. Découvrez <a href="http://www.navigation-web.com/">60 modèles de navigation</a> commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité.</p>

<p>Via le <a href="http://blog.alsacreations.com/2008/09/17/428-internet-donne-moi-ce-que-je-veux-accessible-en-ligne-gratuitement">blog Alsacréations</a>.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/wordpress-menu-funky-avec-wp_list_bookmarks' title='Wordpress &#8212; Menus «funky» avec wp_list_bookmarks()'>WordPress &#8212; Menus «funky» avec wp_list_bookmarks()</a></li><li><a href='http://css4design.com/30-menus-de-navigation-en-css-pour-votre-site-web' title='30 menus de navigation en CSS pour votre site web'>30 menus de navigation en CSS pour votre site web</a></li><li><a href='http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css4design.com/nanotabs-un-idtabs-minimaliste-sans-jquery' title='Nanotabs &#8212; un idTabs minimaliste sans jQuery'>Nanotabs &#8212; un idTabs minimaliste sans jQuery</a></li><li><a href='http://css4design.com/optimiser-et-styler-les-categories-wordpress-avec-les-css' title='Optimiser et styler les catégories WordPress avec les CSS'>Optimiser et styler les catégories WordPress avec les CSS</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/navigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</title>
		<link>http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab</link>
		<comments>http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab#comments</comments>
		<pubDate>Wed, 27 Aug 2008 04:26:52 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Javascript & PHP]]></category>
		<category><![CDATA[Accessibilité]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Onglets]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=1261</guid>
		<description><![CDATA[Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n&#8217;est pas un modèle d&#8217;accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann. Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants : Poids du [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fmenu-a-onglets-tabs-idtabs-ou-domtab">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fmenu-a-onglets-tabs-idtabs-ou-domtab&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><a href="http://www.css4design.com/menu-a-onglet-avec-javascript-et-css">Menu à onglets avec Javascript et CSS</a> fait partie des articles les plus lus de ce <em>blogzine</em>. Mais la solution présentée n&#8217;est pas un modèle d&#8217;accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : <a href="http://www.sunsean.com/idTabs/">idTabs</a> de <a href="http://www.sunsean.com/">Sean Catchpole</a> et <a href="http://onlinetools.org/tools/domtabdata/">domtab</a> de <a href="http://www.wait-till-i.com/">Chris Heilmann</a>.<span id="more-1261"></span></p>

<p>Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :</p>

<ol>
<li><p><strong>Poids du script</strong> &#8212; généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.</p>

<ul>
<li><p><em>idTabs</em> -> <code>10 ko</code> + jQuery -> <code>31 ko</code> = <code>41 ko</code>. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.</p></li>
<li><p><em>domtab</em> -> <code>10 ko</code>. C&#8217;est déjà beaucoup mieux, et par rapport à <em>idTabs</em>, vous pourrez encore installer plusieurs scripts intéressants avant d&#8217;arriver à <code>41 ko</code>.</p></li>
</ul>

<p>Ceci dit, l&#8217;appétit vient en mangeant et le nombre de scripts à tendance à s&#8217;allonger, de sorte que l&#8217;investissement en <em>jQuery</em> est très vite rentabilisé.</p></li>
<li><p><strong>Comportement quand javascript n&#8217;est pas activé</strong> &#8212; Ces deux scripts se dégradent élégamment en l&#8217;absence de Javascript. Comme l&#8217;affichage des onglets est géré par la feuille de style  CSS ils restent en place ; les éléments masqués au départ s&#8217;affichent simplement les uns sous les autres.</p></li>
<li><p><strong>Balisage HTML, classes CSS et identifiants nécessaires</strong> &#8212; Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des <em>ancres internes</em> vers lesquelles les liens des onglets pointeront.</p></li>
</ol>

<p><em>Commençons par idTabs &raquo;</em></p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/menu-a-onglet-avec-javascript-et-css' title='Menu à onglets avec javascript et css'>Menu à onglets avec javascript et css</a></li><li><a href='http://css4design.com/javascript-toolbox' title='Trucs et astuces Javascript'>Trucs et astuces Javascript</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur' title='Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur'>Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur</a></li><li><a href='http://css4design.com/fonction-javascript-contre-bug-classes-multiples-internet-explorer-6' title='IE6 &#8212; 3 fonctions Javascript pour lutter contre le bug des classes multiples'>IE6 &#8212; 3 fonctions Javascript pour lutter contre le bug des classes multiples</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Nanotabs &#8212; un idTabs minimaliste sans jQuery</title>
		<link>http://css4design.com/nanotabs-un-idtabs-minimaliste-sans-jquery</link>
		<comments>http://css4design.com/nanotabs-un-idtabs-minimaliste-sans-jquery#comments</comments>
		<pubDate>Wed, 20 Aug 2008 23:57:28 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Javascript & PHP]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Onglets]]></category>
		<category><![CDATA[tabs]]></category>

		<guid isPermaLink="false">http://www.css4design.com/nanotabs-un-idtabs-minimaliste-sans-jquery</guid>
		<description><![CDATA[Sean Catchpole, le créateur du plugin idTabs pour jQuery nous propose nanotabs un nouveau script minimaliste pour gérer des menus à onglets (mais pas seulement). Nanotabs peut faire tout ce que faisait idTabs avec même quelques options supplémentaires, le tout sans utiliser le framework jQuery ! Articles sur le même sujet Menu à onglets avec javascript et css390 ressources Javascript &#038; jQueryNavigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitementMenu à onglets (tabs) &#8212; idTabs ou domTab ?WordPress 2.6 &#8212; Mes news carburent à &#34;Press This&#34; (chaine inside)]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fnanotabs-un-idtabs-minimaliste-sans-jquery">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fnanotabs-un-idtabs-minimaliste-sans-jquery&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Sean Catchpole, le créateur du plugin <a href="http://www.sunsean.com/idTabs/">idTabs</a> pour jQuery nous propose <a href="http://www.sunsean.com/nanotabs/">nanotabs</a> un nouveau script minimaliste pour gérer des menus à onglets (mais pas seulement).</p>

<p><em>Nanotabs</em> peut faire tout ce que faisait <em>idTab</em>s avec même quelques options supplémentaires, le tout sans utiliser le <em>framework jQuery</em> !</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/menu-a-onglet-avec-javascript-et-css' title='Menu à onglets avec javascript et css'>Menu à onglets avec javascript et css</a></li><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/navigation-web-donne-moi-ce-que-je-veux-est-en-ligne-gratuitement' title='Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitement'>Navigation web &#8212; donne-moi ce que je veux ! est en ligne gratuitement</a></li><li><a href='http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css4design.com/wordpress-26-mes-news-carburent-a-press-this' title='WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)'>WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/nanotabs-un-idtabs-minimaliste-sans-jquery/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Menu accordéon avec jQuery</title>
		<link>http://css4design.com/menu-accordeon-avec-jquery</link>
		<comments>http://css4design.com/menu-accordeon-avec-jquery#comments</comments>
		<pubDate>Tue, 19 Aug 2008 18:55:28 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Javascript & PHP]]></category>
		<category><![CDATA[Accordéon]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=1135</guid>
		<description><![CDATA[Tutoriel vidéo consacré à la réalisation d&#8217;un menu accordéon en Javascript en utilisant la librairie jQuery. Menu Accordeon Javascript. Envoyé par JojoRatonLaveur Articles sur le même sujet 390 ressources Javascript &#038; jQuery100+ Polyfills et Fallbacks pour HTML5Menu à onglets (tabs) &#8212; idTabs ou domTab ?Vis ma vie d&#039;intégrateur HTMLLe petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fmenu-accordeon-avec-jquery">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fmenu-accordeon-avec-jquery&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><object width="388" height="310"><param name="movie" value="http://www.dailymotion.com/swf/k3XfwsokPxlgViJl7M&#038;related=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/k3XfwsokPxlgViJl7M&#038;related=1" type="application/x-shockwave-flash" width="388" height="310" allowFullScreen="true" allowScriptAccess="always"></embed></object></p>

<p>Tutoriel vidéo consacré à la réalisation d&#8217;un menu accordéon en Javascript en utilisant la librairie jQuery. <a href="http://www.dailymotion.com/video/x6flxq_menu-accordeon-javascript_creation">Menu Accordeon Javascript</a>. <em>Envoyé par <a href="http://www.dailymotion.com/JojoRatonLaveur">JojoRatonLaveur</a></em></p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/polyfills-fallbacks-html5' title='100+ Polyfills et Fallbacks pour HTML5'>100+ Polyfills et Fallbacks pour HTML5</a></li><li><a href='http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css4design.com/vis-ma-vie-d-integrateur-html' title='Vis ma vie d&#039;intégrateur HTML'>Vis ma vie d&#039;intégrateur HTML</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur' title='Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur'>Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/menu-accordeon-avec-jquery/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)</title>
		<link>http://css4design.com/wordpress-26-mes-news-carburent-a-press-this</link>
		<comments>http://css4design.com/wordpress-26-mes-news-carburent-a-press-this#comments</comments>
		<pubDate>Sun, 03 Aug 2008 18:34:29 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Content Management System]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Boucle]]></category>
		<category><![CDATA[Loop]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Onglets]]></category>
		<category><![CDATA[Tutoriels]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=374</guid>
		<description><![CDATA[Je suis souvent d&#8217;avis qu&#8217;un bon texte vaut mille images, mais dans le cas du bookmarklet Press This présent dans WordPress 2.6, c&#8217;est la capture d&#8217;écran du billet de Nioumedia sur Press This qui m&#8217;a incitée à tester l&#8217;engin. Plutôt efficace pour la saisie de texte (avec éditeur WYSIWYG), le choix des catégories ou l&#8217;ajout d&#8217;un tag. On peut ensuite enregistrer le billet pour le modifier ultérieurement ou le publier de suite. Un nouveau menu à onglets sur ce blog ! Ce bookmarklet m&#8217;a tellement emballé que j&#8217;ai mis en place un deuxième menu à onglets sous les catégories du [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fwordpress-26-mes-news-carburent-a-press-this">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fwordpress-26-mes-news-carburent-a-press-this&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Je suis souvent d&#8217;avis qu&#8217;un bon texte vaut mille images, mais dans le cas du bookmarklet <em>Press This</em> présent dans WordPress 2.6, c&#8217;est la capture d&#8217;écran du <a href="http://nioumedia.com/2008/07/17/press-this-un-nouveau-bookmarklet-sur-wordpress-26/">billet de Nioumedia sur Press This</a> qui m&#8217;a incitée à tester l&#8217;engin. Plutôt efficace pour la saisie de texte (avec éditeur WYSIWYG), le choix des catégories ou l&#8217;ajout d&#8217;un tag. On peut ensuite enregistrer le billet pour le modifier ultérieurement ou le publier de suite.<span id="more-374"></span></p>

<h3>Un nouveau menu à onglets sur ce blog !</h3>

<p>Ce bookmarklet m&#8217;a tellement emballé que j&#8217;ai mis en place un deuxième menu à onglets sous les catégories du blog pour accueillir les fruits de mes petites découvertes au gré du surf quotidien. J&#8217;ai inauguré cette zone avec un onglet &laquo;&nbsp;News&nbsp;&raquo; pour des brèves plutôt généralistes. Mais à l&#8217;avenir, ce menu devrait accueillir des onglets plus spécialisés comme &laquo;&nbsp;Insolite&nbsp;&raquo;, &laquo;&nbsp;ludique&nbsp;&raquo;, histoire de rendre le développement web un poil plus fun ;)</p>

<p>Je n&#8217;ai pas encore tout testé mais il semble possible de publier directement les images présentes sur une page <a href="http://flickr.com/">Flickr</a> ou les vidéos sur <a href="http://youtube.com/">Youtube</a> (peut-être même que des plugins verront le jour pour élargir l&#8217;offre). Pratique pour ajouter un onglet &laquo;&nbsp;Vidéo&nbsp;&raquo; et/ou un onglet &laquo;&nbsp;Image&nbsp;&raquo; à mon nouveau menu à onglets.</p>

<p>Les billets affichés sont donc sélectionnés selon le tag, ce qui est moins lourd que la création d&#8217;une catégorie qu&#8217;il faudrait éventuellement masquer dans d&#8217;autres boucles WordPress présentes sur le blog (ce qui me fait une partie de la réponse au <a href="http://www.css4design.com/danse-avec-les-loops-1-un-theme-wordpress-mis-a-nu#comment-3278">commentaire</a> de <a href="http://www.onlike.net/">Kynerion</a> par la même occasion !)</p>

<p>A noter que j&#8217;ai quand même créé une sous-rubrique News pour garder une certaine cohérence avec la catégorie <a href="http://www.css4design.com/articles/revue-de-web">Revue de web</a>, mais ce n&#8217;est pas une obligation. Cette souplesse de WordPress est assez magique car elle permet toutes les fantaisies : on pourra facilement créer un billet dans une catégorie et ajouter le tag &laquo;&nbsp;News&nbsp;&raquo; pour afficher le billet à un autre emplacement du template.</p>

<p>De plus, dans la boucle qui suit, rien n&#8217;empêche d&#8217;afficher des billets contenant d&#8217;autres tags pour avoir encore plus de souplesse dans l&#8217;étiquettage des billets. Il suffira de remplacer <code>'tag=news&amp;showposts=3'</code> par <code>'tag=news+insolite+comique&amp;showposts=3'</code>.</p>

<h3>N&#8217;ayons plus peur du loop !</h3>

<p>Pour les billets taggués &laquo;&nbsp;News&nbsp;&raquo;, par exemple, il suffit de faire la boucle suivante :
<pre>&lt;div id="tab6"&gt;
    &lt;ul&gt;
        &lt;?php /* Affichage des toutes les news */
        query_posts('tag=news&amp;showposts=3'); ?&gt;
        &lt;?php while (have_posts()) : the_post(); ?&gt;
        &lt;li&gt;
            &lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
            &lt;/h2&gt;
            &lt;div&gt;
                &lt;?php the_content('Lire la suite &amp;raquo;'); ?&gt;
            &lt;/div&gt;
        &lt;/li&gt;&lt;!-- end .post --&gt;
        &lt;?php endwhile; ?&gt;
    &lt;/ul&gt;
    &lt;p&gt;&lt;a href="/tag/news" title="Tous les articles tagué news"&gt;Voir toutes les news&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</pre>
Et pour faire plaisir à <a href="http://blog.burninghat.net/">burningHat</a> et <a href="http://blog.neovov.com/">Neovov</a>, j&#8217;ai mis les brèves dans <a href="http://www.css4design.com/granularisation-du-balisage-html-parce-que-nos-documents-le-valent-bien">une belle liste non ordonnée</a> :D Pour plus d&#8217;information sur les boucles utilisées sur ce blogzine, je vous invite à lire <a href="http://www.css4design.com/danse-avec-les-loops-1-un-theme-wordpress-mis-a-nu">Danse avec les loops : un thème WordPress mis à nu</a>.</p>

<p>Bref, je n&#8217;ai pas encore fait le tour de cette nouvelle version de WordPress, mais il semble que l&#8217;équipe de développement se dirige vers la création d&#8217;une véritable plate-forme de CMS aussi complète qu&#8217;efficace.</p>

<h3>Mais que manque-t-il donc à WordPress ?</h3>

<p>Tiens, ça me rappelle que j&#8217;ai un brouillon en cours sur ce qui manque à WordPress par rapport à d&#8217;autres outils de gestion de contenu. Comme je suis loin de tous les connaitre, et si le coeur vous en dit, vous pouvez m&#8217;aider en me donnant des pistes du genre : &laquo;&nbsp;sur Joomla! on peut faire ça facilement&nbsp;&raquo;, ou &laquo;&nbsp;avec SPIP, je fais ce que je veux avec mes cheveux&nbsp;&raquo;&#8230; Enfin, vous voyez l&#8217;idée générale ;) Merci par avance !</p>

<h4>La chaine ! la chaine ! la chaine !</h4>

<p>Si j&#8217;osais, <strong>je lancerai bien une chaine de blog sur ce qui manque à WordPress</strong> pour permettre à chacun d&#8217;y réfléchir à tête reposée dans le cadre d&#8217;un billet, ce qui me permettra ensuite de compiler les contributions de chacun(e).</p>

<p><strong>Allez, j&#8217;ose :</strong> <a href="http://www.fran6art.com/">tous</a> <a href="http://blog.burninghat.net/">les</a> <a href="http://www.lepotlatch.org/">lecteurs</a> <a href="http://www.logiste.be/">et</a> <a href="http://daria.servhome.org/">lectrices</a> <a href="http://yves.sur-le-web.fr/">sont</a> <a href="http://www.niss.fr/">invitées</a> <a href="http://wordpress-tuto.fr/">à</a> <a href="http://www.wordpress-fr.net/">participer</a> <a href="http://www.blomig.com">à</a> <a href="http://monetiweb.com/">cette</a> <a href="http://www.onlike.net/">chaine</a> <a href="http://blog.darklg.fr/">de</a> <a href="http://cui.burp.fr/">blog</a> <a href="http://callmepep.org/">d&#8217;intérêt</a> <a href="http://www.superchinois.net/">public</a> <a href="http://www.nowhereelse.fr">!</a><a href="http://www.webinventif.fr/">!</a><a href="http://www.patricealbertus.net/">!</a></p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/danse-avec-les-loops-1-un-theme-wordpress-mis-a-nu' title='Danse avec les loops #1 : un thème WordPress mis à nu'>Danse avec les loops #1 : un thème WordPress mis à nu</a></li><li><a href='http://css4design.com/wordpress-26-un-nouveau-tag-conditionnel-avec-has_tag' title='WordPress 2.6 &#8212; un nouveau &quot;tag&quot; conditionnel avec has_tag()'>WordPress 2.6 &#8212; un nouveau &quot;tag&quot; conditionnel avec has_tag()</a></li><li><a href='http://css4design.com/wordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields' title='WordPress &#8212; Gérer les images avec les champs personnalisés (Customs fields)'>WordPress &#8212; Gérer les images avec les champs personnalisés (Customs fields)</a></li><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/s-il-ne-devait-rester-qu-un-tutoriel-pour-faire-un-menu-css-avec-onglets' title='S&#039;il ne devait rester qu&#039;un tutoriel pour faire un menu CSS avec onglets&#8230;'>S&#039;il ne devait rester qu&#039;un tutoriel pour faire un menu CSS avec onglets&#8230;</a></li></ul>
]]></content:encoded>
			<wfw:commentRss>http://css4design.com/wordpress-26-mes-news-carburent-a-press-this/feed</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced (User agent is rejected)

Served from: css4design.com @ 2012-02-04 04:17:53 -->
