Question

我是JQuery Mobile的新手。目前正在尝试在ASP.NET MVC项目中使用JQM。我正在关注JQM官方网站上发现的this tutorial。但它使用多个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。我的问题是 page3.html 在查看 page2.html 时由ajax加载？如果我想使用 JQM Page 在单个html文件中使用所有页面，我该如何处理？

Answer 1

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以使用内部网址而不添加“.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() 函数来获取和设置数据属性。

这是一个有效的 DEMO

JQuery Mobile滑动以单页样式导航

1 个答案: