아약스와 함께 tinyscrollbar 사용

아약스로드 된 콘텐츠 tinyscrollbar (http://baijs.nl/tinyscrollbar/) 사용하려고합니다.아약스와 함께 tinyscrollbar 사용

$('#nav li a').click(function(){ 
    var toLoad = $(this).attr('href')+' #content'; 
    $('#content-wrap').load(toLoad,showNewContent); 
    function showNewContent() { 
     $('#content-wrap').fadeIn(1000).css("display", "block"); 
     $('#scrollbar1').tinyscrollbar(); 
     $("#scrollbar1").tinyscrollbar_update(); 
    }

호출 된 내용은 다음과 같습니다 :

<div id="content"> 
    <div id="scrollbar1"> 
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> 
    <div class="viewport"> 
    <div class="overview"> 
     //some content 
     //some more content 
    </div></div></div> 
</div>

그러나

<div id="content-wrap" style="display:none;">   
</div>

내가 AJAX 호출을 만들기 위해이 기능을 사용 내 원래 페이지가이 같은 DIV있다 전혀 작동하지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까 ?

출처

2012-10-09 soundswaste

은 내가 먼저 내가이

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.js"></script> 
<style> 
#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; } 
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; } 
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; } 
#scrollbar1 .thumb .end, 
#scrollbar1 .thumb { background-color: #003D5D; } 
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; } 
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; } 
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } 
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; } 
#scrollbar1 .disable{ display: none; } 
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } 


</style> 
</head> 
<body> 
<div id="content-wrap" style="display:none;">   
</div> 
<input type="button" value="Load Content" id="btnLoad"/> 

<script language="javascript"> 
    $('#btnLoad').click(function(){ 
     var toLoad = "http://localhost/tinyscrollbar/Content.htm #content"; 
     $('#content-wrap').load(toLoad,function(){ 
      $('#content-wrap').fadeIn(1000).css("display", "block"); 
      $('#scrollbar1').tinyscrollbar(); 
      $("#scrollbar1").tinyscrollbar_update(); 
     }); 
    }); 
</script> 
</body> 
</html>

처럼 test.htm을라는 다른 파일을 만든 다음

<html> 
<body> 
<div id="content"> 
    <div id="scrollbar1"> 
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> 
    <div class="viewport"> 
    <div class="overview"> 
     <p>//some content</p> 
     <p>//some content</p> 
     <p>//some content</p> 
     <p>//some content</p> 
     <p>//some content</p> 
     <p>//some content</p> 
    </div></div></div> 
</div> 
</body> 
</html>

아래처럼 content.htm라는 파일을 생성하고 나를 위해 잘 작동합니다.

문제를 단계적으로 좁혀 야한다고 생각합니다. 먼저 콘텐츠가 콘텐츠 div에서 제대로로드되는지 확인한 다음 tinyscrollbar를 확인합니다. 다음 코드 블록에서 뭔가 잘못하고 있다고 가정합니다.

$('#nav li a').click(function(){ 
    var toLoad = $(this).attr('href')+' #content'; 
    $('#content-wrap').load(toLoad,showNewContent);

출처

2012-10-09 22:11:52 Tariqulazam

고마워요! 나는 CSS를 전혀 포함하지 않았다. 그들은 어딘가에 그것을 문서화해야한다. – soundswaste

아약스와 함께 tinyscrollbar 사용

답변

관련 문제