0

tinyscrollbar (tinyscrollbar.js) を jquery mobile に data-role=page で実装しようとしています。最初のページでは、完全に正常に動作します。しかし、2 ページ目にはバーがありません。要素の検査をクリックするまで。tinyscrollbar_update()、update(0)、slideToggle().promise() を試しました...動作しません。それらはすべて私にさまざまな種類のエラーを与えます。

このように見えます

<div class="scrollbar1">
 <div class="scrollbar" style="height: 200px;">
     <div class="track" style="height: 200px;">
         <div class="thumb" style="top: 0px; height: 32.6530612244898px;">
             <div class="end"></div>
         </div>
     </div>
 </div>
 <div class="viewport">
     <div class="overview">//text</div>
 </div>


<div id="footerNavigation">
    <a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-theme="b">Back</a>
    <a href="#theNextPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">Next</a>
</div>

上記とまったく同じコードを 2 番目のページ コードにコピーしました。

<div id="theNextPage" data-role="page"><!--scrollbar code--></div>

そして私のjavascriptファイル：

$(document).ready(function() {
    $('.scrollbar1').tinyscrollbar();
});

誰もがそれがどのように考えているのですか？それを解決する方法はありますか？

4

1 に答える 1

0

離れて分かった！

クラスをidに変更します。class="scrollbar1" >> id="scrollbar1"

次のページ: class="scrollbar2" >> id="scrollbar2"

$(document).ready(function() {
                $('#scrollbar1').tinyscrollbar();
                $('#scrollbar2').tinyscrollbar();
});


$(document).on("pageshow", "#theNextPage", function () {
    var $scrollbar2 = $('#scrollbar2');
    $scrollbar2.tinyscrollbar();
    var scrollbar1 = $scrollbar2.data("plugin_tinyscrollbar")
    $scrollbar2.update(0);
});

このような方が良いでしょう

于 2014-05-12T04:43:34.440 に答える