Question

我在使用Jquery Mobile开发的项目上添加了一些JQuery滑动导航。我可以毫无后顾之忧地工作，但它不是DRY实现，我知道我将来会有更新它的问题。我所拥有的是一系列HTML页面，可以滑动导航到同一文件夹中的其他HTML页面。以下是HTML代码的示例：

<div id="point2" class="tpb" data-role="page" data-title="Baby Section - Talking Point 2">
  <header data-role="header" data-theme="f" data-position="fixed">
      <a href="#" data-rel="back" data-theme="h" data-icon="arrow-l" data-direction="reverse">Back</a>
      <a href="../activities.html" data-theme="h" data-icon="baby">Activities</a>
      <h1>0-12 Months</h1>
  </header>
  <div data-role="content" class="content" data-theme="a">
   <h1>Mother&rsquo;s Voice</h1>
   <p>Babies learn to recognise their mother&rsquo;s voice in utero. By birth your baby has a preference for your voice over other sounds. Babies also begin to learn the difference between sounds not long after birth.</p>
<p>Talk to your baby often and from birth. Use their name, talk about whatever you are doing and repeat words many times. Babies need to hear words lots of times before they understand and use them.</p>
    <p><img src="../../img/baby/Baby-TP2-Mothers-Voice.jpg" class="insert" /></p>
  </div>
<script type="text/javascript">
$("#point2").on('swipeleft', function (event, ui) {
   if(event.handled !== true){
    $.mobile.changePage('point3.html', {transition: "slide", reverse: false}, true, true);
       event.handled = true;
   }
    return false; 
});
$("#point2").on('swiperight', function (event, ui) {
   if(event.handled !== true){
    $.mobile.changePage('point1.html', {transition: "slide", reverse: true}, true, true);
       event.handled = true;
   }
    return false; 
}); 
</script>
</div>

现在我已经尝试按照JQuery Mobile文档执行DRY方式了，文档对我来说毫无意义。似乎所有示例都交换了具有不同背景图像的div。 http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html

我相信如果所有页面都在一个HTML文件中，所有页面都加载到DOM（单页面应用程序）中，但是我正在使用单独的文件，我可以让DRY正常工作吗？我只是想知道我是否可以设置一个数组来获取文件夹中的连续页面并保持一定的顺序？我的JS技能不是很好，所以我正在寻找一个可以分开的工作示例，以便我能理解它的实现。如果你有任何好的实现，请告诉我。我想干嘛!!

在JQuery Mobile中轻扫导航

0 个答案: