jquery mobile场面切换 -

Junqiang

浏览: 29466 次

最近访客更多访客>>

Robert666

JesseLen

zllhit

abc558899

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery mobile场面切换

jquery mobile

    <!doctype html>  
    <html>  
    <head>  
        <title>Multipage example</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>  
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  
    </head>  
    <body>  
    <div class="ui-page" data-role="page" id="page1" data-title="page1" data-next="page2">  
        <div data-role="header">  
            <h1>Page 1</h1>  
        </div>  
        <div role="main" class="ui-content">  
            <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>  
        </div>  
    </div>  
    <div class="ui-page" data-role="page" id="page2" data-title="page2" data-prev="page1">  
        <div data-role="header">  
            <h1>Page 2</h1>  
        </div>  
        <div role="main" class="ui-content">  
            <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To  
                Page 1</a>  
        </div>  
    </div>  
    <script>  
        $(document).on("swipeleft", ".ui-page", function () {  
            var thePage = $(this),  
                    next = thePage.jqmData("next");  
            if (next) {  
                $(":mobile-pagecontainer").pagecontainer("change", "#" + next, {transition: "slide"});  
            }  
        });  
        $(document).on("swiperight", ".ui-page", function () {  
            var thePage = $(this),  
                    prev = thePage.jqmData("prev");  
            if (prev) {  
                $(":mobile-pagecontainer").pagecontainer("change", "#" + prev, {transition: "slide", reverse: true});  
            }  
        });  
    </script>  
    </body>  
    </html>

分享到：