javascript - 向导航栏添加按钮并以编程方式显示它们

Question

这是我的页面代码，我需要将我目前拥有的菜单项添加到“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();
});

任何建议，提前谢谢

Answer 1

你的 jQuery 用脚本标签包装了吗？如果您的脚本不在脚本标签内，您的脚本将不会运行。

<script type="text/javascript">

//Your code here


</script>

Answer 2

你有一些 HTML 错误（双 id 属性），我也会使用 pagebeforeshow 然后增强 jQM 标记

这行得通吗？

• http://jsfiddle.net/Mg7rc/

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' );         
});
​