使用 Jquery mobile 滑动页面答案

【问题标题】：Swipe pages using Jquery mobile使用 Jquery mobile 滑动页面
【发布时间】：2014-06-06 16:11:16
【问题描述】：

请任何人建议如何使用查询移动左/右滑动页面

var nextpage = $(this).next('div[data-role="page"]');

不返回首页

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/JB22E/4/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Share QR</title>
        <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />   
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.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>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 1</p>
                <a data-role="button" id="add-dynamic-page">Add new dynamic page</a>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <h1>Footer</h1>    
            </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>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 2</p>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <h1>Footer</h1>
            </div>
        </div>

        <div data-role="page" id="article3">
            <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>Articles</h1>
            </div>
            <div data-role="content">
                <p>Article 3</p>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <h1>Footer</h1>
            </div>
        </div>        
    </body>
</html>

JavaScript：

$(document).on('pageinit', '#article1', function(){       
    $(document).on('click', '#add-dynamic-page', function(event){  
        if(event.handled !== true) // This will prevent event triggering more then once
        {          
            var nextPageId = parseInt($('body [data-role="page"]').length)+1;
            $('[data-role="page"]').last().after('<div data-role="page" id="article'+nextPageId+'"><div data-role="header" data-theme="b" data-position="fixed" data-id="footer"><h1>Articles</h1></div><div data-role="content"><p>Article '+nextPageId+'</p></div><div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"><h1>Footer</h1></div></div>');
        }
    });       
});

$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', 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).off('swiperight').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;            
});

这是我几个月前创建的一个示例。你会找到你需要的一切+更多。只需滑动即可查看一切如何运作，您甚至可以单击“添加新动态页面”查看此示例如何处理动态添加的页面。

【讨论】：

我知道这是一个旧线程，但我刚刚找到它。这是我想做的完美解决方案。对我来说，杀手是可怕的 CSS，就像所有的文本阴影之类的东西一样。有没有办法在没有样式的情况下拥有功能？还是我需要尝试全部覆盖它们？
这里是：stackoverflow.com/questions/15987014/…