Jscrollpane плагин для всплывающих окон - PullRequest
Новая
       21

Jscrollpane плагин для всплывающих окон

1 голос
/ 29 января 2011

Я использую плагин jscrollpane jquery для применения к всплывающему окну div (лайтбокс для краткости), но полоса прокрутки 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;
}

Ответы [ 2 ]

4 голосов
/ 29 января 2011

jScrollPane не работает с элементами, которые невидимы при инициализации.Это потому, что он не может рассчитать размер, которым он должен быть.Поэтому вам нужно повторно инициализировать jScrollPane после отображения содержимого, как показано в этом примере:

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

Обратный вызов может быть предоставлен в качестве второго параметра для jQuery show , поэтомувы можете заменить: 

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

на: 

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

В качестве примечания, пробелы вокруг знаков = в вашем HTML, вероятно, помешают его проверке ...

1 голос
/ 29 января 2011

A Несколько вещей, которые нужно попробовать:

Если я правильно помню, к элементам должно быть применено свойство css 

 overflow:auto;

, поэтому вставьте его в свой css для # testing2

Проблема в том, что элемент, на который вы нацелены, скрыт, поэтому вы можете попытаться инициализировать scrollPane после функции show: 

  $(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 - что объясняет использование его на невидимых элементах

...