0

以前にこの質問をしたことがありますが、jQuery Mobile を使用するときに DOM にロードしようとするすべての JavaScript に適用されるため、今回は質問に詳細を追加します。

jQuery Mobile 1.4.0 RC1 で作成した 3 つのページがあります。index.html は単純な単一ページのテンプレートです。swiperを 2 ページ目に追加し、swiper と easytabs を 3 ページ目に追加しました。

jQuery と jQuery Mobile の javascript ファイルをいくつかの異なる方法で配置してみました。たとえば、idangero.us の追加の javacript Swiper と、Jango Steve による Easytabs.js を data-role ページの外側と内側に配置しました。

pagecreate または pageinit を使用して、DOM の内外で easytabs と swiper の JavaScript をどこに配置するかによって、ページの読み込みまたは更新時に奇妙な結果が得られます。JavaScript を機能させるには、ページを更新する必要があります。または、他のページのコンテンツが読み込まれないページに読み込まれます。

私の質問は次のとおりです。javascript はどこに配置すればよいですか? jQuery Mobile をロードする前ですか、ロードした後ですか? JavaScript ファイルを正確にどこに配置すればよいですか? また、どのページ イベントが自分のページに適していますか? コンテンツを表示するためにページ イベントを使用し、別のページに移動する前にそのコンテンツを停止するために別のページ イベントを使用する必要がありますか?

お時間をいただきありがとうございます。

    <div data-role="header">
        <h1>three</h1>
    </div><!-- /header -->

    <div data-role="navbar" class="navbar">
        <ul>
            <li><a href="index.html">Index</a></li>
            <li><a href="page-two.html">Page 2</a></li>
            <li><a href="page-three.html">Page 3</a></li>
        </ul>
    </div>

    <div data-role="content">       

        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
            <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
            <div class="swiper-slide">
              <div class="content-slide">
                <p class="title">Slide with HTML</p>
                <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination"></div>


        <div id="tab-container" class="tab-container">
            <ul class="etabs">
                <li class="tab"><a href="#tab1">Tab 1</a></li>
                <li class="tab"><a href="#tab2">Tab 2</a></li>
                <li class="tab"><a href="#tab3">Tab 3</a></li>
            </ul>
            <div class="panel-container">
                <div id="tab1">
                    content 3
                </div>
                <div id="tab2">
                    content 2
                </div>
                <div id="tab3">
                    content 1
                </div>
            </div>
        </div>

    </div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->  


<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
$(function(){
    var mySwiper = $('.swiper-container').swiper({
        pagination: '.pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true
    })
})

$('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
})

$('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
})

</script>

<script src="js/jquery.easytabs.min.js"></script>
<script>
    $(function() {
        $('#tab-container').easytabs();
    });
</script>   

</div>

4

1 に答える 1

0

次の理由により、すべてのページにすべて JavaScript を含める必要があります。

  • ユーザーはindex、page1またはpage2
  • 読み込まれた最初のページが「アンカー ページ」になります (~ JQM はそれを呼び出しますdocumentBase)。
  • (一方通行で)リンクに追加しない限り、ユーザーはこのページを離れることはありませんdata-ajax="false"
  • ユーザーがアクセスする後続のページは、AJAx を介して JQM によってフェッチされ、既存の DOM に追加されます。
  • その際、JQM は<div data-role="page"></div>ロードされるページの最初のページの内容のみを挿入します。

JQM ハッシュ管理を無効にすると、次のようになります。

/foo/bar/index.html > /foo/bar/page1.html

URLをに切り替えます

 /foo/bar/index.html#foo/bar/page1.html

どのJQMがマスクするか

  /foo/bar/page1.html

したがって、ユーザーがこのページで開始しない限り、配置したすべての<script>タグはpageX読み込まれません。

jsメソッドをファイルに入れ、必要な他の JavaScript ファイルと一緒にロードすることをお勧めします。すべてのファイルをすべてのページに配置すれば、準備完了です。ファイルは最初のページにのみ読み込まれるため、唯一の問題は最初のページの読み込みを最小限に抑える方法です (すべてをフェッチする必要がある場合 - それは別の話です)。

于 2013-11-01T16:27:14.103 に答える