如何在jQuery Mobile导航栏中添加/删除元素？
在jQuery Mobile中，假设我有以下导航栏：
然后，我可以使用jQuery删除项目，使其看起来像：
但是，jQuery Mobile仍然将它呈现为好像有三个选项卡，而在中间选项卡中，没有任何内容。 因此，不是每个标签间隔宽度的1/2，而是两个剩余标签中的每一个仅占宽度的1/3。
我仔细看了一下，jQuery Mobile自动在
- 元素中添加一个名为“ui-grid-b”的元素，如果我手动将其更改为“ui-grid-a”，那么它看起来很好，两个标签占用了整个宽度。 但是，手动更改这些类似乎过于苛刻，我猜测有更好的方法。 有任何想法吗？
- 111 '); $("#abc").append('
- 222 '); $("#abc").append('
- 333 '); $("#def").navbar();
- ' +' ' +' View Log' +' ' +' ' +'
- ' +' ' +' New Entry' +' ' +' ' +'
- ' +' ' +' Logout' +' ' +' ' +'
我没有找到一个很好的解决方案，但我至少想出了一个不那么讨厌的解决方案。
对于我的问题，我至少提前知道了我想要的所有元素，因此我可以简单地构建几组导航栏并根据特定情况打开或关闭它们。 因此，HTML看起来像phil的解决方案，但他的解决方案的JS看起来像：
$('#navbar1').hide(); $('#navbar2').show(); $('#page1').page();
试试这个：
我想你现在已经知道如何从导航栏中删除元素了。
不是一个真实的例子，但是： http ： //jsfiddle.net/ZsSHE/10/
JS
$('#item3').remove(); $('#page1').page();
您可以通过添加纯链接（A），然后在navbar元素本身上调用navbar（）方法，将按钮添加到jQuery Mobile导航栏。
例如：在HTML中，您可以放置一个空的导航栏，如下所示：
比在JavaScript中，您执行以下操作：
// creating new buttons $("#myNavbar").append('button 1'); $("#myNavbar").append('button 2'); $("#myNavbar").append('button 3'); // calling the navbar method $("#myNavbar").navbar();
刷新NavBar而不重新创建组件
function refreshNavbar(el) { var ul = el.children("ul"), childCount = 0, cls, visibleEl, children = ul.children("li"), clsList = ["ui-grid-solo","ui-grid-a","ui-grid-b","ui-grid-c","ui-grid-d","ui-grid-duo"], clsArr = ["ui-grid-solo","ui-grid-a","ui-grid-b","ui-grid-c","ui-grid-d","ui-grid-duo ui-grid-a"]; for (var i = 0, j = children.length; i < j; i++) { child = $(children[i]); if (child.is(":visible")) { childCount++; } } cls = clsArr[childCount-1]; if (childCount == 1) { visibleEl = ul.children("li:visible"); if (!visibleEl.hasClass("ui-block-a")) { visibleEl.addClass("ui-block-a"); } } else { ul.children("li").removeClass("ui-block-a"); ul.children("li:first").addClass("ui-block-a"); } //remove existing grid class var rx = new RegExp(clsList.join("|"), "gi"); var oldCls = ul.attr("class").replace(rx, function (matched) { return ""; }); //set new grid class, preserving existing custom clases ul.attr("class", oldCls + " "+ cls); }
小提琴
你应该只使用$（’＃navbar’）。navbar（’refresh’）。 #navbar可以是任何id或元素引用。
.navbar方法本身似乎不适用于jquery mobile 1.4.2。 我必须首先进行破坏，似乎重新应用了样式。
仅供参考，只要添加的按钮不包装，这将起作用。 如果为导航栏添加足够的按钮来包装它们，则应用的样式并不完全正确。
代码看起来像
$('#yournavbarDIV').navbar("destroy"); $('#yournavbarDIV').navbar();
在你追加你的元素之后。
HTML
javascript
$("#def").append("
"); $("#abc").append('
我有同样的问题，这就是我做的。
在HTML中
然后在JS函数中，我做到了这一点
var mynavbar = '' +' ' +'
' +''; $(".ui-page-active .maintenance_tabs").empty(); $(".ui-page-active .maintenance_tabs").append(mynavbar).trigger('create');
我每次都调用.empty（），以便它不会一次又一次地重复导航栏。 希望这有助于某人。
谢谢。
更改导航栏内容时遇到很多问题。 这是因为新内容/按钮不正常
实际上，它在1.4.3中并不完全有效：当您单击另一个选项卡时，新创建的选项卡保持活动状态 – Matthieu
在源代码中深入搜索我发现navbar正在执行此操作：
$navbar.delegate( "a", "vclick", function( /* event */ ) {
因此，即使您销毁导航栏并重新创建它，此事件也会被触发两次，这将破坏正常行为。 这将有效：
navbar = $("#my-navbar"); navbar.navbar("destroy"); navbar.undelegate(); navbar.html(""); navbar.navbar(); $('#my-tabs').tabs('refresh');
这让我连续几天疯狂……我希望它会对你有所帮助。