3

我有这个简单的 html（我正在托管自己的文件并且它可以工作）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="JQM/jquery.mobile-1.0.1.min.css" />
<script src="JQM/jquery.js"></script>
<script src="JQM/jquery.mobile-1.0.1.min.js"></script>
<script src="pages.js"></script>
</head> 
<body onload="main_page();"> 

<div data-role="page">
<div data-role="header">
    <h1>My Title</h1>
</div>
<div id="main_div" data-role="content"> 
</div>
</div>

</body>
</html>

在 onload 我必须调用这个函数并将 js 中生成的内容添加到 id="main_div" 或 data-role="content"

function main_page(){//trips menu

 var this_page =' ';
 var this_body='';

 this_body += '<ul data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;

 var $page = $( pageSelector ),
        $content = $page.children( ":jqmData(role=content)" );
    $page+=this_page;

 $.mobile.changePage(#,$page);
}

这只是我必须做的一个简单示例。但无论我做什么，它都不起作用......

4

3 回答 3

2

您无法加载这样的页面，但如果您的目标是加载此菜单，则可以使用以下代码段实现：

$(document).on('pageinit',function(){
    // this is the mobile onload event
 var this_page =' ';
 var this_body='';

 this_body += '<ul id="menu" data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;

 $('#main_div').append($(this_page));
 //EDIT : you also need to trigger the listview creation after inserting, almost forgot this trick :P
 $('#menu').listview();

});

您可以使用该方法从您的身体中删除 onload 功能。那是你想做的吗？

于 2012-06-19T07:46:14.083 回答
1

对于使用 jquery 的动态附加（页面注入），附加不起作用。在这种情况下，此代码适用于我。

function main_page(){

 var this_page =' ';
 var this_body='';

 this_body += '<ul data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;


     $("#atmlist").append(this_page);/*data to append*/
     $.mobile.changePage($('#index')); /*page navigation the particular where data shown*/
     $("#index").trigger("pagecreate"); /*This is like a page refresh in jquery*/
}
于 2012-06-19T09:58:25.517 回答
1

像这样包装你的jquery

  $(document).bind('pageinit',function(){
    $("body").on("load", function(){
    // your jquery
    //
    //
    }
   });
于 2012-06-19T07:42:24.243 回答