jQuery Mobile滑动以单页样式导航

debugcn 发表于 Dev

Skpaul

我是JQuery Mobile的新手。当前正在尝试在ASP.NET MVC项目中使用JQM。我正在关注在JQM官方网站上找到的本教程。但是它使用多个html页面。

<div data-role="page" id="page2" data-prev="page1" data-next="page3">
    <div role="main" class="ui-content">
        .....
    </div>
</div>

这里data-next="page3"用来显示page3.html。我question-是page3.html同时观看阿贾克斯加载page2.html？如果我想通过使用JQM Page在单个html文件中使用所有页面，我应该如何进行？

赞克

data-next和data-prev只是示例中用于存储下一页和上一页url的任意HTML5数据属性。对于内部页面，您可以将它们设置为“＃page2”，“＃page3”等。因此，对于3个页面，可以这样设置：

<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>

然后，您只需更新示例的javascript以使用内部url，而无需在其中添加“ .html”：

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 );
        }
    });
});

jQM使用jqmData（）函数来获取和设置数据属性。