Jscrollpane插件弹出框问题

我正在使用jscrollpane jquery插件应用于弹出div框（缩略图灯箱），但jscrollpane滚动条不显示。下面是HTML：Jscrollpane插件弹出框问题

{ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">                 
<head>                 
<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all"></link> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="JScrollPaneScripts/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="JScrollPaneScripts/jquery.jscrollpane.min.js"></script> 
<link rel = "stylesheet" type = "text/css" href = "sample1.css"></link>   
<script type="text/javascript"> 
$(document).ready(function() 
    { 
    $(function() 
    { 
    $('#testing2').jScrollPane(); 
    }); 

    $("#testing").click(function() 
    { 
    $("#testing2").show(5000); 
    }); 
    }  
);  
</script> 
</head>                 
<body> 
<div id = "wrapperdiv"> 
    <a id = "testing" href="#">Link</a> 
    <div id = "testing2"> 
    lksjflksjdlkflskdjflksjdflkjslkjdflk 
    lsdkflksjgliowtjlskdfjlskdfjlskgs 
    lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
    lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
    llvalkiwujoitjlkgskjdkgjlsd,fjlsllll 
    lksjflksjdlkflskdjflksjdflkjslkjdflk 
    lsdkflksjgliowtjlskdfjlskdfjlskgs 
    lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
    lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
    llvalkiwujoitjlkgskjdkgjlsd,fjlsllll 
    lksjflksjdlkflskdjflksjdflkjslkjdflk 
    lsdkflksjgliowtjlskdfjlskdfjlskgs 
    lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
    lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
    llvalkiwujoitjlkgskjdkgjlsd,fjlsllll 
    lksjflksjdlkflskdjflksjdflkjslkjdflk 
    lsdkflksjgliowtjlskdfjlskdfjlskgs 
    lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
    lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
    llvalkiwujoitjlkgskjdkgjlsd,fjlsllll 
    lksjflksjdlkflskdjflksjdflkjslkjdflk 
    lsdkflksjgliowtjlskdfjlskdfjlskgs 
    lksjlk,.x,cmlkvjlkjlwkeoltklfnjsklkj 
    lksjf.m,.jlkjoliwekjtlkjgkjjlkjlkjll 
    llvalkiwujoitjlkgskjdkgjlsd,fjlsllll 
    </div> 
</div> 
</body>                 
</html> 
}

这里是CSS：

* 
{ 
padding: 0px; 
margin: 0px; 
} 

#wrapperdiv 
{ 
width: 1000px; 
margin: 500px auto 0px auto; 
} 

#testing 
{ 
width: 100px; 
height: 50px; 
border: 1px solid; 
font-size: 22px; 
display: block; 
text-align: center; 
padding: 25px 0px 0px 0px; 
} 

#testing2 
{ 
display: none; 
width: 270px; 
height: 300px; 
background: yellow; 
border: 1px solid; 
bottom: 100px; 
left: 10%; 
position: relative; 
z-index: 999; 
}

来源

2011-01-29 dave

jScrollPane不适用于初始化时不可见的项目。这是因为它不能计算它的大小。因此，你需要显示如本例所示内容后重新初始化JScrollPane的：

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

的回调可以作为第二个参数jQuery show提供这样你就可以更换：

$("#testing2").show(5000);

有：

$("#testing2").show(
    5000, 
    function() // callback function 
    { 
     $('#testing2').jScrollPane(); 
    } 
);

作为一个方面说明，围绕在你的HTML的=迹象的空间可能会阻止它从验证...

来源

2011-01-29 19:25:36 vitch

的几件事情尝试：

如果我没有记错的元素必须有CSS属性

overflow:auto;

适用于所有人，以便将其粘贴到#test2的css中

的问题，因为你的目标是隐藏的，所以你可以尝试显示功能后，初始化滚动窗格元素：

$(document).ready(function() { 

     $('#testing').click(function(){ 

      $('#testing2').show(5000, function(){ 
       $('#testing2').jScrollPane(); 
      }); 

     }); 

    });

尝试没有隐藏，看看是否能工作正常的元素。

还可以点击这些链接 - comment5这里：http://code.google.com/p/jscrollpane/issues/detail?id=30

This ('#myDiv').show().jScrollPane() fix worked perfectly for me.

在这种情况下，我上面的代码将成为

$(document).ready(function() { 

    $('#testing').click(function(){ 

     $('#testing2').show(5000).jScrollPane(); 

    }); 

});

和http://jscrollpane.kelvinluck.com/invisibles.html - 这也解释了使用它invisble元素

来源

2011-01-29 19:24:02 tbwcf

捕捉！我所做的唯一修正是，在节目播放功能出现延迟时，节目播放后的重新初始化将不起作用，因为重新初始化将在该项目仍然隐藏时发生... – vitch 2011-01-29 19:27:24

是的，我几乎认为相同 - 似乎是参考文章的内容，但正如你所说的那样，延迟会让扳手进入工作状态。我想戴夫实际上意味着 .fade（5000）而不是展示也我猜戴夫实际上可以意味着淡入（5000） - 而不是秀（500）也 – tbwcf 2011-01-29 19:37:40

Jscrollpane插件弹出框问题

回答

相关问题