Réaliser un tableau dynamique trié et paginé avec jQuery De nos jours, avoir une liste d’éléments dans un tableau est courant mais très peu de site propose de trier chaque colonne et d’avoir une pagination digne de ce nom ! jQuery, la librairie javascript orienté objet, va nous offrir une solution (vous pouvez tout à fait réaliser un tableau dynamique trié et paginé avec PHP ou Ruby mais c’est plus contraignant, surtout quand vous allez voir le nombre de ligne de code dont on a besoin avec le Javascript). Préparatifs Dans un premier temps, il faut aller chercher jQuery et le plugin pour le tableau : Il faut bien entendu inclure tout ces éléments dans votre page HTML avant de pouvoir les utiliser. Création du tableau La construction du tableau se passe uniquement au niveau du HTML, ce qui permet d’être très modulation et le couplé à PHP par exemple. # Titre Date
jQuery : l’événement ! Enfin « les », événements. Je voulais un titre sensationnel. Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Le développement DOM/Javascript repose en grande partie sur les événements. jQuery propose deux manières de définir les événements : nous allons les analyser. Les « Event Helpers » Joli nom. Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Si aucun paramètre n’est passé, cette méthode déclenche l’événement. Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »). Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : Définir un événement Commençons par un exemple. L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction : $("a#test1").click(function(){ window.alert("Clic sur a#test1.");}); Exemple.
jQuery JavaScript Library Easy Ajax with jQuery This article was written in 2011 and remains one of our most popular posts. If you’re keen to learn more about jQuery, you may find this recent article on jQuery 1.9 of great interest. Ajax is changing web applications, giving them a responsiveness that’s unheard of beyond the desktop. But behind all the hype, there’s not much to Ajax — HTML, JavaScript, and XML are nothing new, and in this tutorial, I’ll show you how to simplify the process of adding Ajax to your application even further with the help of jQuery. What’s Ajax? You’ve probably heard about Ajax before, or at least used an Ajax-based application — Gmail, for instance. Unfortunately, in-depth tutorials on practical ways to enter the world of Ajax are few and far between. What’s jQuery? jQuery is another mature JavaScript library that offers some features that the others do not. Assumed Knowledge To complete this tutorial, you’ll need some basic JavaScript knowledge. jQuery 101 $("div.foo").append("Hello World!"). Easy!
JSON, un format pour échange de données avec JavaScript JSON ( jison ou jayson, jason en anglais) est reconnu par JavaScript, après que l'ECMA ait définit la fonction eval qui parse le format, dans le standard ECMAScript, en 1999. Il a été popularisé par le développement d'Ajax. Le terme JSON revient souvent lorsque l'on parle d'Ajax. On sait qu'il s'agit d'un format de fichier alternatif à XML, et ce format a ses adeptes. JSON vs. Les avantages de JSON: La vitesse de traitement. Les avantages de XML: XML est extensible quand au langage, on peut créer des formats comme RSS, SVG. Noter que XML aussi bien que JSON ne conviennent pas pour stocker directement des données binaires de taille importante. La syntaxe de JSON Les éléments de JSON sont: Un objet: contient d'autres objets ou des variables. L'objet Il contient un membre ou une liste de membres, chaque membre étant de la forme: "nom" : "valeur" La syntaxe de l'objet est: { membre, membre, .... } Le tableau Contient une ou plusieurs valeurs séparées par des virgules. [ valeur, valeur, ....] <?
jQuery: The Write Less, Do More, JavaScript Library Galerie photo avec JavaScript - Alsacréations Ce tutoriel pour débutants propose la création d’une galerie d’images simple avec HTML, CSS et une surcouche JavaScript. Préambule: en complément ou en remplacement de ce tutoriel créé en 2005, nous vous proposons de consulter un tutoriel plus récent : Une galerie d’images simple avec jQuery. Ce dernier est destiné aux personnes ayant déjà des bases en JavaScript et si possible avec jQuery. Voici un petit exemple concret d'un cas où JavaScript permet un gain au niveau de la navigation sans entrave à l'accès au contenu au cas où ce dernier soit désactivé. La séparation du contenu et de la partie script permet une facilité de gestion de votre galerie et un allègement du poids des pages, en effet vous n'avez aucun code JavaScript à ajouter dans votre page en elle même, tout est géré par le script et appelé dans la partie <head> de la page. Voir la démonstration Les codes HTML et CSS La fonction JavaScript gérant la galerie Il faut maintenant créer ce fichier script.js.
gury - jQuery inspired canvas utility library - GitHub JSON jQuery.info Une galerie d’images simple avec jQuery - Alsacréations Ce tutoriel vous guide dans la réalisation d’une galerie d’images simple, avec JavaScript et la bibliothèque jQuery. Introduction Réaliser une galerie photo en JavaScript n'est à première vue pas bien compliqué. Pourtant, si l'on veut bien faire les choses, le code peut rapidement devenir complexe et verbeux. Voici un système simple et non intrusif de visualisation d'images avec chargement et effet de fondu, comme on peut le visualiser avec cet exemple. Attention: l’adjectif «simple» dans le titre du tutoriel désigne la galerie d’images réalisée, pas forcément les étapes pour y parvenir. La base HTML Nous allons commencer par créer une liste de vignettes qui, une fois cliquées, afficheront nos images grand format. Nous avons maintenant notre balisage HTML définitif. La surcouche JavaScript Pour tirer parti des bénéfices qu'apporte jQuery, nous devons au préalable charger la bibliothèque depuis notre document HTML. jQuery(document).ready(function(){ }); $(document).ready(function(){ });
markItUp! Universal Markup jQuery Editor Flexigrid