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插件彈出框問題

回答

相關問題