jquery - 如何在phonegap应用程序中使用jquerymobile动态加载页脚选项卡？

Question

我在 Xcode 中为我的 PhoneGap 应用程序使用 jQuery Mobile。我创建了多个页脚中带有选项卡的页面。在静态页面中可以正常运行，如下。

<div data-role="footer" data-position="fixed">      
    <div data-id="mainTab" data-role="navbar">
        <ul id="footer_tabs">
            <li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>
            <li><a href="my_favorite_page.html" data-icon="star" data-transition="slideup">Favorites</a></li>
            <li><a href="my_account_page.html" data-icon="gear" data-transition="slideup">Account</a></li>
            <li><a href="create_ad_page.html" class="ui-state-persist ui-btn-active" data-transition="slideup" data-icon="plus">Create Ad</a></li>
        </ul>
    </div>
<div>

当我尝试根据用户角色加载选项卡时。页面中的 HTML 代码:

<div data-role="footer" data-position="fixed">      
    <div data-id="mainTab" data-role="navbar">
        <ul id="footer_tabs">
        </ul>
    </div>
<div>

jQuery 代码:

$('#footer_tabs').append('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>');
$('#footer_tabs').append('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>');
$('#footer_tabs').append('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>');
if(userRole == '3'){
    $('#footer_tabs').append('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>');
}
$('#footer-tabs').listview('refresh');

静态加载图片:

从 jQuery 加载图片:

我也刷新了列表，但不起作用。我不知道问题是什么。请帮我。

谢谢，-统治

Answer 1

我不确定您如何在 jQuery Mobile 框架中刷新 nabvar 小部件，但我知道您可以删除以前的navbar并插入一个新的:

//create an output variable, I used an array
var output = ['<div data-id="mainTab" data-role="navbar"><ul id="footer_tabs">'];

//push items onto the output array
output.push('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>');
output.push('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>');
output.push('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>');
if(userRole == '3'){
    output.push('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>');
}
output.push('</ul></div>');

//this last line is important, the output array is being joined into a string, then appended to the footer element,
//also the `create` event is being triggered on the footer element so the jQuery Mobile framework will update the widget with all the necessary styles
$('[data-role="footer"]').html(output.join('')).trigger('create');

这是一个演示:http://jsfiddle.net/ZVGSZ/

请注意，我创建了一个 HTML 字符串数组，然后将它们连接在一起以执行单个 .append()，而不是为每个 HTML 字符串添加一个附加(.html(string) == (.remove() + .append(string))).