jquery移动页面注入 [英] jquery mobile page injection
本文介绍了jquery移动页面注入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个简单的html（我正在托管我自己的文件并且它有效）
I have this simple html (I am hosting my own files and it works)
<!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>
我必须调用此函数并将js中生成的内容添加到id =main_div 或data-role =content
on the onload I have to call this function and add the content generated in js to id="main_div" or 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);
}
这只是我必须做的一个简单例子。但无论我做什么它都不起作用....
this is just a simple example of what I have to do. But no matter what I do it doesn't work....
推荐答案
你无法加载这样的页面但是如果您的目标是加载此菜单，则可以使用此代码段实现此目的：
You can't load a page like that but If your goal is to load this menu you can achieve that with this snippet :
$(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函数。那是你想要做的吗？
you can remove the onload function from your body with that method. Is that what you want to do?
这篇关于jquery移动页面注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
