curseur de l'interface utilisateur jquery pour déplacer plusieurs divs

Question

Hey je veux utiliser jquery UI pour avoir un curseur sur ma page qui déplace plusieurs divs distances différentes. Donc, en gros, vous tirez le curseur et div1 déplace 10px vers la gauche et div2 déplace 20px vers la gauche.

J'ai jeté un coup d'oeil au curseur de l'interface utilisateur jquery ici http://jqueryui.com/demos/slider/#side-scroll mais je ne peux pas comprendre comment obtenir ce curseur pour déplacer plusieurs divs.

L'aide serait grandement appréciée. Je suis assez nouveau à jquery mais je profite de l'expérience d'apprentissage =]

Answer 1

Vous pouvez utiliser l'événement .slide(), non? http://jqueryui.com/demos/slider/#event-slide

De cette façon, vous pouvez ajuster les divs comme vous le souhaitez. Je vais écrire un petit exemple

Fait un petit exemple: http://labs.joggink.be/slider-multiple-divs/

Le curseur redimensionne 3 divs comme celui-ci (il est très basique et laid écrit):

 $("#slider").slider(
      { 
         value:100, 
         min: 10, 
         max: 250, 
         step: 10, 
         slide: function(event, ui) { 
          $('#div-1').css({ 
           width : ui.value + 'px', 
           height: ui.value + 'px' 
          }); 
          $('#div-2').css({ 
           width : ui.value + 10 + 'px', 
           height: ui.value + 10 + 'px' 
          }); 
          $('#div-3').css({ 
           width : ui.value + 20 + 'px', 
           height: ui.value + 20 + 'px' 
          }); 
         } 
      }); 
    });