Question

嗨，我是jquery mobile的新手。我需要将snap.js添加到我的应用程序以存档幻灯片菜单功能。谷歌搜索我决定使用snap.js. https://github.com/jakiestfu/Snap.js/

请参阅下面的代码

page1.html

 <a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' data-prefetch="true" href="page2.html">Sign in</a>

page2.html

<body>
  <div data-role="page" data-title="Panel fixed positioning" id="landingPage" class="snap-content" >
    <div data-role="header" data-position="fixed">
        <div id="branding">Smart Realtor</div>
        <a href="" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-nodisc-icon" id="menuBtn">Menu</a>
<a href="index.html" rel="external" class="ui-btn ui-icon-power-off ui-btn-icon-notext ui-nodisc-icon" id="logoutBtn">Logout</a>

    </div><!-- /header -->


    <div role="main" class="ui-content jqm-content jqm-fullwidth">
    <!-- coverstory -->
           <div class="coverstory">
            <img src="images/cover_story_img.jpg" alt="" class="scale-with-grid"/>
<div class="textbox">
        <h1>Cover Story</h1>
                <p>Latest pre-launch properties & new launch properties for sale in Kuala Lumpur & Selangor, Malaysia. Our site shows you new property launches for investment .....</p>
            </div>
        </div><!-- /coverstory -->
        <div class="clear"></div>
         <!-- main button -->
        <div class="ui-grid-a">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-calendar ui-nodisc-icon" id="calendarBtn" ><br>Appointment<br><br>

</a>
      </div>

      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-file-text-o ui-nodisc-icon" id="co-brokingBtn"><br>Co-broking<br>
 Agreement</a>


      </div>
    </div>

    <div class="ui-grid-a">
      <div class="ui-block-a">
        <a href="advertise_group.html" rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comment ui-nodisc-icon" id="pagroupBtn" ><br>Property Advertisement<br>(Group)</a>
      </div>

      <div class="ui-block-b">
        <a href="advertise_agent.html"  rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comments ui-nodisc-icon" id="paagentBtn"><br>Property Advertisement<br>(Agent)</a>


      </div>
    </div>






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

    <div data-role="footer" data-title="fixed positioning" >
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="slideup_menu.html" rel="external" data-icon="arrow-u" data-transition="slideup">More Menu</a></li>
                </ul>
            </div>
        </div>
</div>



    <div id="menu" class="panel_bg snap-drawers">
    <div class="snap-drawer snap-drawer-left">

         <a href="profile.html"><div class="profile_wrapper">
        <img src="images/profile_pic.jpg">
    <h2>John Smith</h2>
    <p>GCS Property Agent</p>
    <p class="smalltxt">View Profiles</p>

    </div> </a>
    <div class="clear"></div>


    <ul class="side_navi">
                <li class="list-divider" >DISCOVER MORE</li>
                <a href="#panel-fixed-page2"><li><img src="css/png/bookmark.png" alt="" class="ui-li-icon ui-alt-icon"/>News & Noteworthy</li></a>
               <a href="passcode.html" rel="external"> <li><img src="css/png/book.png" alt="" class="ui-li-icon ui-alt-icon"/>Customer Contact Lisiting</li></a>
                <a href="teamleader_monitoring.html" rel="external"><li><img src="css/png/laptop.png" alt="" class="ui-li-icon ui-alt-icon"/>Team Leader Monitoring</li></a>
                <a href="property_listing.html" rel="external"><li><img src="css/png/home.png" alt="" class="ui-li-icon ui-alt-icon"/>Property Listing</li></a>
                <a href="tenant-listing.html" rel="external"><li><img src="css/png/user.png" alt="" class="ui-li-icon ui-alt-icon"/>Tenant Listing</li></a>
                <a href="#panel-fixed-page2"><li><img src="css/png/calendar.png" alt="" class="ui-li-icon ui-alt-icon"/>Appointment Management</li></a>
                <a href="#panel-fixed-page2"><li><img src="css/png/usd.png" alt="" class="ui-li-icon ui-alt-icon"/>Home Loan Calculator</li></a>
                <li class="list-divider" >Miscellaneous </li>
                <a href="#panel-fixed-page2"><li><img src="css/png/gears.png" alt="" class="ui-li-icon ui-alt-icon"/>Setting</li></a>
               <a href="#panel-fixed-page2"> <li><img src="css/png/envelope.png" alt="" class="ui-li-icon ui-alt-icon"/>Feed Back</li></a>

        </ul>
    </div><!-- /panel -->
    </div>



 <script type="text/javascript" src="js/snap.js"></script>
 <script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
    var snapper = new Snap({
        element: document.getElementById('landingPage'),
        disable: 'right'
    });

        </script>
</body>

如果我改变超链接使用 rel =“external”

，那么一切正常

 <a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' rel="external" href="page2.html">Sign in</a>

任何解决方案，如果我想在我的hperlink中使用data-perfetch =“true”？

如果使用data-prefetch =“true”，Jquery mobile snap.js无效

0 个答案: