새소식

Front

jquery mobile swipe page demo!

  • -
728x90

jquery mobile swipe page demo!


demo : http://jsfiddle.net/ezanker/L2GTD/1/


a.html


<!DOCTYPE html> 
<html> 
    <head> 
    <title>Jazz Calendar</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.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
    function navnext( next ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
        transition: "slide"
    });
}
function navprev( prev ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
        transition: "slide",
        reverse: true
    });
}


$( document ).one( "pagecreate", "#page1", function() {
    // Handler for navigating to the next page
    // Navigate to the next page on swipeleft
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $( this ).jqmData( "next" );
        if ( next ) {
            navnext( next );
        }
    });
    // The same for the navigating to the previous page
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if (prev) {
            navprev( prev );
        }
    });
});

    </script>
</head> 
<body> 
<div id="page1" data-role="page" data-prev="" data-next="#page2">
    <div data-role="header" data-position='fixed'>
         <h1>Page 1</h1>
    </div>
    <div data-role="content">
        I am page 1
    </div>
</div>

<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
    <div data-role="header" data-position='fixed'>
         <h1>Page 2</h1>
    </div>
    <div data-role="content">
        I am page 2
    </div>
</div>

<div id="page3" data-role="page" data-prev="#page2" data-next="">
    <div data-role="header" data-position='fixed'>
         <h1>Page 3</h1>
    </div>
    <div data-role="content">
        I am page 3
    </div>
</div>

</body>
</html>


good luck! :)


#jquery #mobile #swipe #page

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.