1

ajax が読み込まれたコンテンツでtinyscrollbar ( http://baijs.nl/tinyscrollbar/ ) を使用しようとしています。元のページには次のような div があります。

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

この関数を使用して ajax 呼び出しを行います。

$('#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>

しかし、それはまったく機能しません。私は何を間違っていますか？

4

1 に答える 1

2

最初に、次のような content.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>

次に、このように test.htm という別のファイルを作成しました

<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>

それは私にとってはうまくいきます。

問題を段階的に絞り込む必要があると思います。まず、コンテンツ div からコンテンツが適切に読み込まれているかどうかを確認してから、tinyscrollbar を確認します。次のコードブロックで何か間違ったことをしていると思います

$('#nav li a').click(function(){
    var toLoad = $(this).attr('href')+' #content';
    $('#content-wrap').load(toLoad,showNewContent);
于 2012-10-09T22:11:52.457 に答える