Question

如何构建包含3个页面的滑动页面并添加“气泡”按钮以显示您刚刷过的页面？

你能给我一些建议或链接，可以找到一个例子吗？

Answer 1

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

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.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>

    <body>
        <article data-role="page" id="article1" data-pagination="1">
            <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>
            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>    
            </div>
        </article>

        <article data-role="page" id="article2" data-pagination="2">
            <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">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>   
            </div>
        </article>

        <article data-role="page" id="article3" data-pagination="3">
            <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">
                <div id="bubble-holder">
                    <div id="page1-bubble"></div>
                    <div id="page2-bubble"></div>
                    <div id="page3-bubble"></div>                    
                </div>   
            </div>
        </article>

    </body>
</html>

Javascript：

$(document).on('pagebeforeshow', 'article[data-role="page"]', function(){    
    selectbubble($(this));
});

$(document).off('swipeleft').on('swipeleft', 'article', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('article[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', 'article', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('article[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

function selectbubble(page) {
    $.each($('#bubble-holder div'), function (index,value) {
        var bubble = $(this);
        bubble.css('background','#3408AE'); 
        if(bubble.attr('id') === 'page' + page.attr('data-pagination') + '-bubble'){
            bubble.css('background','#0B0228');
        }
    });    
}

CSS：

.ui-footer {
    height: 30px;
}

#bubble-holder {
    margin: 10px auto 0 auto;
    width: 60px;
    height: 10px;
}

#page1-bubble, #page2-bubble, #page3-bubble {
    position: relative;
    float: left;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    background: #3408AE;
    -webkit-border-radius:  5px;
    border-radius: 5px;    
    -moz-box-shadow: inset 0 -1px #eee;    
    -webkit-box-shadow: inset 0 -1px #eee;    
    box-shadow: inset 0 -1px #eee;    
}

使用“气泡按钮”在页面之间移动Jquery

1 个答案: