xcode 如何在phonegap应用程序中使用jquerymobile动态加载页脚标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8667135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load dynamically footer tabs using jquerymobile in phonegap app?
提问by regeint
I am using jQuery Mobile for my PhoneGap app in Xcode. I have created multiple pages having tabs in footer. It works properly in static page as follows.
我在 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>
When I tried to load tabs according to user role. HTML code in page :
当我尝试根据用户角色加载选项卡时。页面中的 HTML 代码：
<div data-role="footer" data-position="fixed">
<div data-id="mainTab" data-role="navbar">
<ul id="footer_tabs">
</ul>
</div>
<div>
jQuery code:
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');
Picture of static loading: 
静态加载图片：
Picture loading from jQuery:
从 jQuery 加载图片：
I have refreshed the list too, but not working. I don't know what the problem is. Please help me.
我也刷新了列表，但没有用。我不知道是什么问题。请帮我。
Thanks, -regeint
谢谢，-regeint
采纳答案by Jasper
I'm not sure how you refresha nabvarwidget in the jQuery Mobile framework but I know that you can remove the previous navbarand insert a fresh one:
我不确定您如何使用 jQuery Mobile 框架中refresh的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');
Here is a demo: http://jsfiddle.net/ZVGSZ/
这是一个演示：http: //jsfiddle.net/ZVGSZ/
Notice that I created an array of HTML strings and then joined them together to do a single .append()rather than an append for each HTML string (.html(string) == (.remove() + .append(string))).
请注意，我创建了一个 HTML 字符串数组，然后将join它们编辑在一起以.append()对每个 HTML 字符串 ( .html(string) == (.remove() + .append(string)))执行单个而不是附加。
回答by Bodkins
I dont have the rep to thank Jasper as well, but its a great solution.
我也没有代表感谢 Jasper，但这是一个很好的解决方案。
Just wanted to add here that I did the same and used a blank navbar to feed into, so in the html theres a blank div:
只是想在这里补充一下，我做了同样的事情，并使用了一个空白的导航栏来输入，所以在 html 中有一个空白的 div：
<div data-role="navbar" data-iconpos="left" id="PageLinks">then in the script:
然后在脚本中：
$('#PageLinks').html(footerLinks.join('')).trigger('create');targets it - might be useful if people have multi-pages in their file.
以它为目标 - 如果人们的文件中有多个页面，可能会很有用。
Thanks again
再次感谢
