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をラップします

  $(document).bind('pageinit',function(){
    $("body").on("load", function(){
    // your jquery
    //
    //
    }
   });
于 2012-06-19T07:42:24.243 に答える
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 に答える