且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery Mobile的动态页面

更新时间:2023-12-02 11:00:40

正在工作的示例:

  1. 创建一个空的jqMobile页面(具有相应数据角色的id为id ="dynamicPage"的div)

  1. Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")

获取菜单链接的ID,并将其作为空白页的title属性插入.

Get your menu link's id, and insert it as the title attribute of the empty page.


    $("#appMainMenu a").live("click", function(evt){
    var whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});

  1. 像这样加载数据:


    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // animate while we're loading data
        var whatpage = $(this).attr('title'); // get the page's title we changed earlier
        var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id.
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file
        $.get(whatpage2, function(data) { // load content from external file
          $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div).
          $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled.
        });
});

希望这会有所帮助.有问题吗?

Hope this helps. Questions?