0

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

我用 jQuery Mobile 1.4.0 RC1 构建了三个页面。index.html 只是一个单页模板，我将 swiper 添加到第 2 页，将 swiper 和 easytabs 添加到第 3 页。您可以在此处查看它们：http: //builtformobile.com/demos/jquerymobile/swiper1/index.html

我尝试以几种不同的方式将 jQuery 和 jQuery Mobile javascript 文件放置在头部和底部，至于来自 idangero.us 的附加 javacript Swiper 和 Jango Steve 在数据角色页面内外的 Easytabs.js。

根据我将用于easytabs和swiper的javascript放置在DOM内部或外部，使用pagecreate或pageinit，在加载或刷新页面时我仍然会得到奇怪的结果。我要么必须刷新页面才能使 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"到链接
  • 用户访问的后续页面将由 JQM 通过 AJAx 获取并添加到现有 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 回答