0

これは私のページ コードであり、「page1_nav」にこれまでのメニュー項目を追加する必要がありますが、動作しないか表示されません。

<div data-role="page"  id="page1" >
<div id="main" data-role="header" id="page1_header">
    <h1></h1>
    <div data-role="navbar" id='page1_nav'>
    </div>
</div>
<div data-role="content">   
</div>
</div>

$('#page1').live('pageshow',function(event, ui){
var navbar =''; 
navbar+='<ul><li><a href="#"  onclick="goBack()" data-back="true" class="ui-btn-inactive ui-state-persist">Menu1</a></li>';
navbar+='<li><a href="#"  class="ui-btn-active ui-state-persist">Menu2</a></li></ul>';
 $('#page1_nav').append($(navbar));
 $('#page1_nav').page();
});

任意の提案、前もって感謝します

4

2 に答える 2

0

HTMLエラー（Double id属性）があります。また、pagebeforeshowを使用して、jQMマークアップを拡張します。

これは機能しますか？

HTML

<div data-role="page" id="home" data-add-back-btn="true">
    <div id="main" data-role="header" data-position="inline">
        <h1>Home</h1>
        <a href="#" data-icon="check">Save</a>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">List View Navigation</li>
            <li><a href="#page1">Go to Page1</a></li>
        </ul>        
    </div>
</div>

<div data-role="page" id="page1" data-add-back-btn="true">
    <div id="myCustomNavbar" data-role="header" data-position="inline" data-add-back-btn="true">
        <!-- dynamic navbar -->
    </div>
    <div data-role="content">
        <p>
            Hello Page 1
        </p>            
    </div>
</div>

<div data-role="page" id="page2" data-add-back-btn="true">
    <div data-role="header" data-position="inline">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">List View Navigation</li>
            <li><a href="#home">Go to Home Page</a></li>
        </ul>        
    </div>
</div>

JS

$('#page1').live('pagebeforeshow', function(event, ui) {
    var myNav  = $('#myCustomNavbar');
    var navbar = '<div data-role="navbar">'
        + '<ul>'
        + '<li><a href="#" data-rel="back" data-direction="reverse">Back</a></li>'
        + '<li><a href="#page2">Page 2</a></li>'
        + '</ul>'
        + '</div>';

    myNav.html(navbar).trigger( 'create' );         
});
​
于 2012-06-23T00:47:33.150 に答える
0

jQuery をスクリプト タグでラップしていますか? スクリプト タグ内にない場合、スクリプトは実行されません。

<script type="text/javascript">

//Your code here


</script>
于 2012-06-22T23:30:37.267 に答える