jQuery Mobile的頁面注入

我有這個簡單的HTML（我主持我自己的文件和它的作品）jQuery Mobile的頁面注入

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

這只是我必須做的一個簡單例子。但無論怎樣我不工作....

來源

2012-06-19 user1342645

'pageSelector'從哪裏來？ – Cranio

包住你的jQuery這樣

$(document).bind('pageinit',function(){ 
    $("body").on("load", function(){ 
    // your jquery 
    // 
    // 
    } 
    });

來源

2012-06-19 07:42:24 Rab

請勿在JQM中使用加載事件，因爲它會混淆：http://jquerymobile.com/demos/1.1.0/docs/api/events.html – TecHunter

您不能加載一個頁面一樣，但如果你的目標是加載該菜單可以通過以下代碼實現：

$(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-19 07:46:14 TecHunter

對於動態追加（頁面注入）使用jQuery，append不起作用。在這種情況下，這段代碼適用於我。

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-19 09:58:25 Akilan

jQuery Mobile的頁面注入

回答

相關問題