Comment faire pour que l'interface utilisateur jQuery soit déplacée automatiquement avec jScrollPane

Question

Il suffit de voir si quelqu'un a rencontré ce problème. Nous utilisons le nouveau jScrollPane génial en combinaison avec l'élément Dragable JQuery UI. Une fonctionnalité intéressante de l'élément Draggable, que nous avons perdue lors du passage à jScrollPane, est que lorsque vous faites glisser le curseur près du bord de l'élément contenant, il fait défiler cet élément si possible. Il ne le fait pas avec jScrollPane. Est-ce que quelqu'un d'autre a essayé de résoudre ce problème?

Merci!

Answer 1

Malheureusement, ce n'est pas possible de manière simple. En regardant le code jquery.ui.draggable.js, la partie pertinente est:

$.ui.plugin.add("draggable", "scroll", { 
    start: function(event, ui) { 
     var i = $(this).data("draggable"); 
     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset(); 
    }, 
    drag: function(event, ui) { 

     var i = $(this).data("draggable"), o = i.options, scrolled = false; 

     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') { 

      if(!o.axis || o.axis != 'x') { 
       if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed; 
       else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed; 
      } 

      if(!o.axis || o.axis != 'y') { 
       if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed; 
       else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed; 
      } 

     } else { 

      if(!o.axis || o.axis != 'x') { 
       if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); 
       else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); 
      } 

      if(!o.axis || o.axis != 'y') { 
       if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed); 
       else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed); 
      } 

     } 

     if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) 
      $.ui.ddmanager.prepareOffsets(i, event); 

    } 
}); 

Comme vous pouvez le voir, il manipule directement les propriétés scrollTop et scrollLeft du scrollParent. Malheureusement, jScrollPane n'utilise pas ces propriétés ...

Il est possible que vous puissiez ajouter une méthode supplémentaire à draggable, en suivant le modèle de celui ci-dessus. Dans la fonction glisser au lieu de définir scrollTop ou scrollLeft, vous utiliserez les méthodes API scrollBy.

Si vous parvenez à obtenir ce fonctionnement, veuillez placer le plugin sur github et soumettre une demande de pull. Si vous ne pensez pas que vous pouvez alors s'il vous plaît open a feature request on github et je vais essayer de le mettre en œuvre quand j'ai un peu de temps libre.

Answer 2

Vous devez réinitialiser jScrollPane après avoir affiché chaque onglet. Un exemple simple ici:

http://jscrollpane.kelvinluck.com/invisibles.html

Dans votre cas, vous pouvez essayer:

$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane 
    return false; 
});