开发者

How to use jscrollpane with tabs

开发者 https://www.devze.com 2023-03-13 06:54 出处:网络
I am trying to use a jscrollpane in each of my tabs but only the first tab shows the scrollbars. See my code below: Hope someone can help, Many thanks. Philippe

I am trying to use a jscrollpane in each of my tabs but only the first tab shows the scrollbars. See my code below: Hope someone can help, Many thanks. Philippe

$(function() { $('.scroll-pane').jS开发者_C百科crollPane(); });


I know this is an old question, I think he is referring to JQueryUI tabs functionality. It is a normal thing that only the visible tab gets the scroll-bar, I have the same problem.

This is because the other tabs are hidden and the JScrollPane can't calculate the size of the content. It returns zero, so he decides not to put a scroll-bar in there.

Please take a look at this demo for using this plugin with invisible elements.

Hope it helped.


Try this...

$('#tabs').tabs({
    show : function(event, ui) {
        $(ui.panel).jScrollPane();  
    }       
});


Turns out the tabs function actually hides the divs, which need to be altered by the scroll function. A quick fix is to ensure the scroll function comes first.

$('#offers_content').jScrollPane(
       {
           verticalTrackHeight :100,
           verticalGutter   : 5
        }).css('padding','10px');   

$("#tabs").tabs();


I did it by using jQuery Layout plugin, and til now, its working fine. Here the example: http://layout.jquery-dev.net/demos/tabs.html

0

精彩评论

暂无评论...
验证码 换一张
取 消