JS : Menu multi niveau avec arrêt propagation

Rappel :

Content model for element ul:

Zero or more li and script-supporting elements.


↠ fichier demo

Jquery UI

Jquery UI est ue mine pour développer rapidement.

Ouvrir la console du fichier http://dupontcours.free.fr/Jquery/Tabs/test1.html et insérer le code suivant :

$(function(){
        //option
        var tabOpts = {
            fx: [{
                opacity:"toggle",
                duration:"slow"
            },
            null]
        };
    // Tabs
$('#tabs').tabs(tabOpts).tabs("rotate",3000,true);
});

et encore

$(function(){
        //option
        var tabOpts = {
            fx: [
                {
                height:"toggle",
                duration:"slow"
            },
                {
                opacity:"toggle",
                height:"toggle",
                duration:5000
            }]
        };
    // Tabs
$('#tabs').tabs(tabOpts);
});

Extension de Jquery : this

Lorsqu'une fonction peut être passée en lieu et place d'une valeur, la fonction est evoquée de façon itérative sur tous les éléments de la sélection.

Prenons un exemple : la fonction css !

Elle peut prendre une fonction comme argument.

L'écriture suivante

  $.fn.makeIdColor_v0 = function( color ){
    
    color = color || 'blue' ;
    
    return this.each(function(index){
      
      $(this).css('color',$(this).is('[id]') ? color : "red");
      
       });
                                
  };

peut être remplacée par

    $.fn.makeIdColor_v1 = function( color ){
    
    color = color || 'blue' ;
    
    return this.css('color', function(index){
      
      return $(this).is('[id]') ? color : "red";
      
    });
                                
  };

  JS Bin on jsbin.com JS Bin on jsbin.com

Vidéo jquery

John rezig !

---

Annonce du cours de jquery sur la khan academy

AJAX : Jquery

L'utilisation de Jquery pour AJAX facilite l'écriture des programme

$.ajax({
          type: "GET",
 url: "http://jsbin.com/juxilu/1.js",
 dataType: "json",
 success: function(videos) { 
 
   for (var i = 0; i < videos.length; i++) {
     addVideoElement(videos[i]);
   }
})

Exemple
JS Bin Exemple

JS Bin

apprendre sur le web : code academy

DOM versus Jquery

Voici encore un exemple de comparaison du code jquery DOM

DOM	Jquery
var newItem = document.createElement("li"); newItem.className+="new"; var textnode = document.createTextNode("Water"); newItem.appendChild(textnode); var list = document.getElementById("myList"); list.insertBefore(newItem, list.childNodes[0]);	$("<li>Water</li>" ).insertBefore( "#List li:first" ).addClass("new");

 comparaison DOM et Jquery

Animation : étude de cas

JS Bin

Animation Jquery

Jquery permet de créer des animations facilement.
JS Bin
Cette animation peut être associée à un calendrier de la façon suivante.
JS Bin

Animation à la pelle

http://veselov.sumy.ua/uploads/files/demo/020/test.htm