为了将swiper正确地加载到jQuery Mobile中，我应该按照哪个顺序正确放置javascript文件，我应该使用哪个页面事件？

Question

我之前已经问过这个问题，但是这次我要为这个问题添加更多细节，因为它适用于在我使用jQuery Mobile时尝试加载到DOM中的任何JavaScript。

我有使用jQuery Mobile 1.4.0 RC1构建的三个页面。 index.html只是一个页面模板，我在第2页上添加了swiper，在第3页上添加了swiper和easytab。您可以在这里看到它们： http ://builtformobile.com/demos/jquerymobile/swiper1/index.html

我尝试过以几种不同的方式将jQuery和jQuery Mobile javascript文件放在顶部，底部，以及Jango Steve在数据角色页面内外的idangero.us和Easytabs.js中的其他Javacript Swiper。

根据我使用pagecreate或pageinit在DOM中或在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>

Answer 1

每个页面都应具有所有JavaScript，因为：

• 用户可以从index ， page1或page2
• 加载的第一页将是您的“锚页面”（〜JQM称为documentBase ）。
• 用户将永远不会离开此页面，除非您（以一种方式）将data-ajax="false"到链接
• JQM将通过AJAx获取用户访问的后续页面，并将其添加到现有DOM中
• 这样做时，JQM仅插入正在加载的页面的第一个<div data-role="page"></div>中的内容。

如果禁用JQM哈希管理，您将看到以下信息：

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

会将网址切换为

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

JQM屏蔽的对象

  /foo/bar/page1.html

因此，除非用户在此页面上启动，否则不会加载您放置在pageX上的所有<script>标记。

我建议将您的js方法放入文件中，然后将其与所需的其他JavaScript文件一起加载。 将所有文件放在所有页面上，一切顺利。 文件只会在首页上加载，因此唯一的问题是如何最大程度地减少首页加载（当需要提取所有内容时，情况就不同了）