Jscrollpane插件解决弹出框问题

发布于 2024-10-15 10:39:48 字数 3142 浏览 3 评论 0原文

我正在使用 jscrollpane jquery 插件来应用弹出 div 框（简称 lightbox），但 jscrollpane 滚动条不显示。这是 html：

{
<!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;
}

原文

I'm using the jscrollpane jquery plugin to be applied for a pop up div box(lightbox for short), but the jscrollpane scroll bar does not show up. Here is the html:

{
<!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> 
}

Here is the 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

李不 2024-10-22 10:39:48

jScrollPane 不适用于初始化时不可见的项目。这是因为它无法计算其应有的大小。因此，您需要在显示内容后重新初始化 jScrollPane，如下例所示：

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

可以将回调作为 jQuery show 的第二个参数提供，以便您可以将：替换

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

为：

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

作为旁注，HTML 中 = 符号周围的空格可能会阻止其验证...

jScrollPane doesn't work on items which are invisible when you initialise it. This is because it can't calculate the size that it is meant to be. So you need to reinitialise jScrollPane after showing the content as shown in this example:

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

A callback can be provided as the second parameter to jQuery show so you can replace:

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

with:

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

As a side note, the spaces around the = signs in your HTML will probably stop it from validating...

回复收藏 0 原文

醉南桥 2024-10-22 10:39:48

有几件事要尝试：

如果我没记错的话，元素必须应用 css 属性，

 overflow:auto;

因此请将其粘贴到 #testing2 的 css 中。

问题是因为您的目标元素被隐藏，因此您可以尝试在显示功能后初始化scrollPane：

  $(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 - 解释了在不可见元素上使用它

A Few things to try:

If I recall correctly elements must have the css property

 overflow:auto;

applied so stick that into your css for #testing2

The issue because the element your targeting is hidden so you could try initializing scrollPane after the show function:

  $(document).ready(function() {   

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

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

       });

    });

Try without the element hidden to see if that works ok.

Also check out these links - comment5 here: http://code.google.com/p/jscrollpane/issues/detail?id=30

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

in which case my above code would become

   $(document).ready(function() {   

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

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

   });

});

and http://jscrollpane.kelvinluck.com/invisibles.html - which explains using it on invisble elements

回复收藏 0 原文

~没有更多了~

关于作者

花落人断肠

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Jscrollpane插件解决弹出框问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

Jscrollpane插件解决弹出框问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。