Vous souhaitez trier/réorganiser des éléments de votre page sans passer par une bibliothèque (ex : tablesorter)… Voici un petit exemple utilisant la fonction native bien pratique sort() et jQuery.

I. Création d’une liste désordonnée

(code à placer dans la balise body)

<div id="conteneur">
	<ul class="liste">
		<?php
		$tableau = range(1, 8);
		shuffle($tableau);
		foreach ($tableau as $k=>$v) {
			echo '<li id="li'.$v.'">#li'.$v.'</li>';
		}
		?>
	</ul>
</div>
<p><input type="button" name="trier1" value="Tri Asc" onclick="tri('.liste', 'ASC')" /><input type="button" name="trier1" value="Tri Desc" onclick="tri('.liste', 'DESC')" /></p>

II. Mise en forme

(code à placer dans la balise head)

<style type="text/css">
	body {font:italic 12px Georgia,Arial;background:#F9F9F9;}
	p {text-align:center;}
	ul li {border:1px solid #DFDFDF;margin:10px;font-size:160%;color:#D54E21;line-height:1.4em;background-color:#fff;position:relative;}
</style>

III. Fonction de tri

(code à placer dans la balise head)

<script type="text/javascript">
function tri(el, method) {
	var ul = $(el);
	var li = $('>li', ul);
	var r = method == 'DESC' ? -1 : 1;
	li.sort(function(a, b) {
		var item1 = $(a).attr('id');
		var item2 = $(b).attr('id');
		item1 = parseFloat(item1.substring(2));
		item2 = parseFloat(item2.substring(2));
		return item1 > item2 ? r : -r;
	}).remove().appendTo(ul);
};
</script>

III. (bis) Version animée

<script type="text/javascript">
function tri(el, method) {
	var ul = $(el);
	var li = $('>li', ul).css({opacity:0.5});
	var r = method == 'DESC' ? -1 : 1;
	var liOffsets = new Array();
	var ulOffset = ul.offset();
	li.each(function(i, v) {
		var liOffset = $(v).offset();
		liOffsets[v.id] = liOffset.top - parseFloat($(v).css('top')) - ulOffset.top;
	});

	li.sort(function(a, b) {
		var item1 = $(a).attr('id');
		var item2 = $(b).attr('id');
		item1 = parseFloat(item1.substring(2));
		item2 = parseFloat(item2.substring(2));
		return item1 > item2 ? r : -r;
	});

	li.each(function(i, v) {
		var _id = $('>li:eq('+i+')', ul).attr('id');
		$(v).css({zIndex:i+5}).delay(100*i).animate({opacity:1, top:liOffsets[_id] - liOffsets[v.id]}, 500);
	});
};
</script>

IV. Démonstration

• tri-javascript.html

Comment fonctionne-t-il ?

Uploadify utilise bien évidemment jQuery mais aussi la technologie Flash. Il utilise donc également la bibliothèque SWFObject.

Son implémentation est donc relativement simple puisque vous partez d’un simple input de type file :

<input id="fileInput" name="fileInput" type="file" />

Et voici un exemple de configuration de ce plugin :

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]>
</script>

Et vous obtenez ainsi un joli formulaire d’envoi de fichiers

Lien :

• Uploadify

A l’image de JQZoom, Cloud Zoom va donc être activer au survol d’une image. Le zoom peut ainsi remplacer l’image en elle même ou s’afficher à coté.

Lien :

• Cloud Zoom

Son implémentation est simple et est facilement paramètrable :

$("#divID").PikaChoose({
show_captions:true,
slide_enabled:false
});

Les options possibles sont entres-autres :

• vitesse et effets de transition,
• dimensions des minatures,
• …

Lien :

• Pikachoose

Vous pouvez, comme sur la démo, l’utiliser comme menu de partage social :

<div id="stack">
    <div class="trigger"><img src="icons/heart-64x64.png" alt="share" /></div>
        <ul>
	    <li><a href="http://twitter.com/">Twitter</a></li>
            <li><a href="http://digg.com/">Digg</a></li>
            <li><a href="http://www.facebook.com/">Facebook</a></li>
            <li><a href="http://reddit.com/">Reddit</a></li>
            <li><a href="http://stumbleupon.com/">StumbleUpon</a></li>
            <li><a href="http://delicious.com/">Delicious</a></li>
            <li><a href="http://flickr.com/">Flickr</a></li>
    </ul>
</div>

Vous lancer ce petit javascript :

jQuery( document ).ready( function( ){
        var stack = jQuery( '#stack ul' ).stackmenu( );
        jQuery( '#stack .trigger' ).click( function( ){
            stack.stackmenu( 'toggle' );
        } );
} );

Et vous obtenez :

Lien :

• jStackmenu

Les bibliothèques proposées sont entre-autres :

• jquery,
• jqueryui,
• dojo,
• mootools,
• swfobject,
• prototype,
• …

Ainsi, en cliquant par exemple sur le COPY de jQuery vous obtenez :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Lien :

• ScriptSrc.net

So So Social intègre déjà les services suivants :

• Twitter
• Facebook
• WordPress
• Tumblr
• Last.FM
• Delicious
• Flickr

Au niveau de code source, ce qui est intéressent dans ce plugin jQuery c’est l’utilisation de YQL (Yahoo Query Language)

Lien :

• So So Social Plug-In

D’ou le plugin jQuery InputNotes.

Pour la mise en place cela donne :

$(document).ready(function(){
  $("#message").inputNotes(
    {
      sexwarning: {
        pattern: /(^|\s)sex(\s|$)/ig,
        type: 'warning',
        text: 'Do not type "sex"!'
      },
      numbersnote: {
        pattern: /[0-9]/,
        type: 'note',
        text: 'Do not type numbers!'
      }
    }
  );
});

Et cela donne par exemple en cas de saisie des lettres « sex » :

Les expressions régulières sont ici utilisées pour les vérifications et deux types de « notes » sont permises :

• le message d’alerte (warning),
• la simple indication (note).

Pour bloquer la validation de formulaire en cas d’erreur il faut rajouter un code du style :

if ( $("#message").hasInputNotes('warning') ){
  // don't send form
}

Lien:

• InputNotes jQuery Plugin

Un bouton « Prévisualiser » vient se greffer au dessus de la zone de saisie :

Et lorsque l’on clique sur ce bouton, cette zone devient :

Lien :

• jQuery Comment Preview WordPress Plugin

Le plugin permet même de réaliser un effet de transition durant l’augmentation ou la diminution de la zone de saisie.

$('textarea#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});

Lien :

• jQuery plugin:  autoResize