滑动工作但下一个和上一个按钮不起作用

时间：2014-05-30 09:59:24

标签： jquery html5 css3 jquery-mobile

我正在使用jquery-mobile app。 对我来说，滑动页面是有效的，但是下一个和上一个按钮不起作用。 我测试了自己的测试页面。 提前致谢。 以下是我的代码。

<div data-role="page" id="article1">
 <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Header 1</h1>
 </div>
 <div data-role="content">
<p>sunday</p>
 </div>
 <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l">Previous</a> <a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r">Next</a>       </div>
  </div>
  </div>
 <div data-role="page" id="article2">
 <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
<h1>Header 2</h1>
  </div>
  <div data-role="content">
  <p>monday </p>
   </div>
 <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l">Previous</a> <a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r">Next</a>    </div>
</div>
 </div>

CSS 

.control.ui-btn-left {
top: auto;
bottom: 7px;
margin: 0;
}

jquery的 

    $(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
     {    
    var nextpage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
      if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
    }
    event.handled = true;
    }
   return false;         
 });

  $(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
   {      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
    }
    event.handled = true;
    }
    return false;     


    });

1 个答案:

答案 0 :(得分：4)

好的，所以你有睾丸，但你看看这些按钮应该去哪里？缺少该数据，您的所有按钮都 href =“＃”。

以下是一个有效的例子：http://jsfiddle.net/32DKR/

HTML：

    <div data-role="page" id="article1">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
            <h1>Header 1</h1>
        </div>
        <div data-role="content">
            <p>sunday</p>
        </div>
        <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
            <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l">Previous</a> <a href="#article2" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r">Next</a>       </div>
        </div>
    </div>
    <div data-role="page" id="article2">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
            <h1>Header 2</h1>
        </div>
        <div data-role="content">
            <p>monday </p>
        </div>
        <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
            <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#article1" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l">Previous</a> <a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r">Next</a>    </div>
        </div>
    </div>

解决方案2

这里有更动态的解决方案：http://jsfiddle.net/LLc3E/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="article1">
            <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
                <h1>Header 1</h1>
            </div>
            <div data-role="content">
                <p>sunday</p>
            </div>
            <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
                <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" id="prev">Previous</a> <a href="" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" id="next">Next</a>       </div>
            </div>
        </div>
        <div data-role="page" id="article2">
            <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Header 2</h1>
            </div>
            <div data-role="content">
                <p>monday </p>
            </div>
            <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" style="bottom:0px; position:fixed; width:200px;">
                <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" id="prev">Previous</a> <a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" id="next">Next</a>    </div>
            </div>
        </div>
    </body>
</html>

的JavaScript：

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('click', '#next', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true,    true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
        }
        event.handled = true;
    }
    return false;     
});

$(document).on('click', '#prev', function(event){ 
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $.mobile.activePage.prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true,   true);
        }
        event.handled = true;
    }
    return false;     
});
相关问题
最新问题