Jquery Mobile - 多页面模板

时间:2014-04-03 11:57:30

标签: javascript jquery jquery-mobile

请在JQM 1.2.0中检查以下多页模板....

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Multi-page template</title>
        <link rel="stylesheet" href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <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="one">
            <div data-role="header">
                <h1>Page One</h1>
            </div>

            <div data-role="content">
                <a href="#two" id="two" data-role="button" >Two</a>
            </div>
        </div>

        <div data-role="page" id="two">
            <div data-role="header">
                <h1>Page Three</h1>
            </div>

            <div data-role="content" >
                <a href="#three" id="three" data-role="button" >Three</a>
            </div>
        </div>

        <div data-role="page" id="three">
            <div data-role="header">
                <h1>Page Four</h1>
            </div>

            <div data-role="content" >
                <a href="#four" id="four" data-role="button" >Four</a>
            </div>
        </div>

        <div data-role="page" id="four">
            <div data-role="header">
                <h1>Back to One</h1>
            </div>

            <div data-role="content" >
                <a href="#one" id="one" data-role="button" >One</a>
            </div>
        </div>



    </body>
</html>

在这里,我的问题是我如何使用'#page-id'改变页面....(即)..我想通过使用jquery来显示/隐藏相应的页面($('#page-id' ).on('click')函数..

有可能这样做吗?......任何人都建议......

提前致谢....

1 个答案:

答案 0 :(得分:1)

试试这个

HTML

<a href="#one" data-transition="flip" >1</a>
<a href="#two" data-transition="flip" >2</a> 

脚本

$( "a" ).on( "click", function( event ) {
event.preventDefault();
$.mobile.navigate( this.attr( "href" ));
});

DEMO