0

3 ページのスワイプ ページを作成し、「バブル」ボタンを追加して、スワイプしたページを表示するにはどうすればよいですか?

例を見つけることができるアドバイスやリンクを教えてもらえますか?

4

1 に答える 1

5

これが実際の例です：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;    
}
于 2013-04-30T10:26:05.810 に答える