Il permet de faire des tris directement dans l’interface (au niveau du navigateur client) si les données sont correctes

Petit aperçu :

La démo est sur le site : Table Sorter 2.0

—- ANCIENNE VERSION DE L’ARTICLE —-

A voir, un plug-in Jquery permettant un tri et une pagination dynamique. Je trouve ça énorme.

A diffuser !

Le lien : http://www.sprymedia.co.uk/dataTables-1.4/media/js/jquery.dataTables.js
Doc & démo : http://www.sprymedia.co.uk/dataTables-1.4/example_zero_config.html
La source : http://www.dator.fr/une-datagrid-avec-jquery-gerant-le-trie-et-la-pagination/

MochaUI vous propose une interface toute prête, adaptable, flexible, qui vous permet rapidement de mettre en place un canevas ergonomique pour tout back-office (par exemple).

JQueryUI vous donne tous les éléments d’interface sous forme modulaire, et vous laisse créer la présentation vous-mêmes.

JCrop, outil qui permet de recadrer / retailler une image en Javascript, c’est-t-y pas énorme ?

Il fonctionne sur FF3/GG Chrome / IE6+ / Opera 9.5 et Safari 3

Les exemples sont là : http://deepliquid.com/content/Jcrop_Examples.html
Le téléchargement est là : http://deepliquid.com/content/Jcrop_Download.html

Voir aussi ImgAreaSelect : http://odyniec.net/projects/imgareaselect/

Donc on a tout intérêt à diversifier les téléchargements et faire télécharger un script JS particulièrement lourd comme JQuery directement sur le serveur de Google, ça peut avoir un sacré nombre d’avantages :
- décharger votre serveur
- temps de téléchargement réduit
- capacité de mettre facilement à jour les librairies en changeant un simple paramètre

A savoir que vous avez la possibilité d’appeler ces librairies en HTTPS, ce qui vous permet de les utiliser sur des pages sécurisées.

Un seul lien, ici : http://code.google.com/intl/fr/apis/ajaxlibs/

Mettre à jour le contenu d’un bloc via un appel AJAX
Prototype :

new Ajax.Updater(‘identifiantConteneur’,'/dossier/fichier.php’, {evalScripts:true,parameters:’var1=val1&var2=val2′});

JQuery :

$j.ajax({
type: ‘POST’,
processData: true,
url: ‘/dossier/fichier.php’,
data: ‘var1=val1&var2=val2′,
dataType: ‘html’,
success: function(data){
//alert(data);
$j(‘#identifiantConteneur’).html(data);
}
});
}

Serializer un formulaire
Prototype : Form.serialize(« identifiantFormulaire »)
Jquery : $j(« #identifiantFormulaire »).serialize()

JQuery – Appel fonction lors de la modification d’un champs de type radio ou select

$(« :checkbox, :radio »).click(nomFonction);
$(« select »).change(nomFonction);

(doc et exemple : http://docs.jquery.com/Ajax/serialize)

Liste à compléter au fur et à mesure

Vous qui rêviez de rassembler tous vos scripts JQuery en un seul fichier..

http://code.google.com/p/minify/

L’idée ? transformer ça :

<script type= »text/javascript » src= »/_lib/_action/montre2.js »></script>
<script type= »text/javascript » src= »/javascript/prototype.js »></script>
<script type= »text/javascript » src= »/javascript/scriptaculous.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/calendar.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/lang/calendar-fr.js »></script>

<script type= »text/javascript » src= »/javascript/jscalendar/calendar-setup.js »></script>
<script type= »text/javascript » src= »/javascript/jquery-1.2.3.js »></script>
<script type= »text/javascript » src= »/javascript/jquery.form.js »></script>
<script type= »text/javascript » src= »/javascript/ficheProduit.js »></script>
<script type= »text/javascript » src= »/javascript/resa.js »></script>

en ça :

<script type= »text/javascript » src= »/min/?f=javascript/jquery-1.2.6.min.js,javascript/jquery.scrollTo.js,javascript/player/carousel_behavior.js,javascript/jquery.hoverIntent.min.js,javascript/superfish.js,javascript/jquery.bgiframe.min.js,javascript/jquery.reflect.js,javascript/jquery.form.js »></script>

ce petit bout de code PHP rassemble tous les scripts en un seul, retire les espaces qui ne servent à rien, ce qui compresse un petit peu le tout et vous met ça à disposition.

L’idée c’est qu’au lieu d’une dizaine de requête, vous n’en avez plus qu’une, ce qui allège considérablement les échanges et les temps de téléchargement..

Il suffit d’ailleurs de voir leur exemple : 98KBytes au départ, 29KBytes à l’arrivée.. et moins de questions / réponses entre le navigateur et le serveur.

Et ça marche aussi avec les fichiers CSS

Pour les perfectionnistes, on a là une bonne bible de tout ce qu’on peut faire pour optimiser le chargement des pages : http://developer.yahoo.com/performance/rules.html

Qu’attendez-vous ?

Prise en compte du vent, etc. On a un peu l’impression de tirer sur une cannette

Un seul lien : http://www.inf.ufrgs.br/~rcpinto/physics/

D’autres effets amusants ici : http://webdev.stephband.info/parallax_demos.html

Une source pour voir différents diaporamas et galeries photos réalisables avec JQuery.

Modes disponibles : « déroulé de photos », « zoom in / zoom out », « fade in and out », « cube qui tourne », « page qui se tourne », « défilement au clic »

Le meilleur diaporama que j’ai pu trouver fonctionnant avec JQuery est Gallery View.

EDIT Mai 2011 : Vous devriez également regarder du côté de Skitter

Exemple de rendu sur 52sorties.fr :

Visuel du diaporama sur une fiche produit de 52sorties.fr

Alternative magnifique en flash : JW Image rotator

= MISE A JOUR DU SCRIPT EFFECTUEE EN MAI 2010, bugs rapportés corrigés =

L’exemple à visualiser est ici : Exemple Menu Déroulant Horizontal

L’exemple à télécharger est ici : Fichiers Compressés Exemple Menu Horizontal Déroulant

La documentation est ici : Documentation Visual jQuery 1.1.2 vous trouverez notamment des effets différents pour l’ouverture du menu, etc.