如何在 jQuery Mobile 导航栏中添加/删除元素？

Question

在 jQuery Mobile 中，假设我有以下导航栏：

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item2">Item 2</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

然后我可以使用 jQuery 删除一个项目，使其看起来像：

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

但是，jQuery Mobile 仍然将其呈现为好像有三个选项卡，而在中间的一个选项卡中，什么都没有。因此，不是每个选项卡占用 1/2 宽度，而是每个选项卡占用 1/3 宽度。

我仔细看了看，jQuery Mobile 自动向<ul> 元素添加了一个名为“ui-grid-b”的类，如果我手动将其更改为“ui-grid-a”，它看起来很好，两个选项卡占用整个宽度。但是，手动更改这些类似乎太老套了，我猜有更好的方法来做到这一点。有什么想法吗？

Answer 1

我没有想出一个很好的解决方案，但我至少想出了一个不那么老套的解决方案。

对于我的问题，我至少提前知道我想要在导航栏中添加的所有元素，因此我可以简单地构建几组导航栏并根据特定情况打开或关闭它们。因此，HTML 看起来像 phil 的解决方案，但他的解决方案的 JS 看起来像：

$('#navbar1').hide();
$('#navbar2').show();
$('#page1').page();

Answer 2

试试这个：

<script type="text/javascript">
    function addItem() {
        // create the navbar element
        var li = $("<li></li>");
        var a = $("<a></a>");
        var navbar = $("#navbar1");

        a.attr("id", "item4").text("Item 4");
        li.append(a);
        // remove the JQM auto-init classes
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });

        // destroy the navbar widget object
        navbar.navbar("destroy");

        // append the newly created element
        li.appendTo($("#page1 ul"));

        // re-init the navbar
        navbar.navbar();
        console.log(navbar.data());
    }
</script>

我猜你现在已经知道如何从导航栏中删除元素了。

Answer 3

不是一个真正的工作示例，但：http://jsfiddle.net/ZsSHE/10/

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <div data-role="navbar" id="navbar1">
            <ul>
                <li><a id="item1">Item 1</a></li>
                <li><a id="item2">Item 2</a></li>
                <li><a id="item3">Item 3</a></li>
            </ul>
        </div>
        <br />
        <div data-role="navbar" id="navbar2">
            <ul>
                <li><a id="item4">Item 4</a></li>
                <li><a id="item5">Item 5</a></li>
            </ul>
        </div>
    </div><!-- /content --> 
</div><!-- /page --> 

JS

$('#item3').remove();
$('#page1').page();

Answer 4

您可以通过添加普通链接 (A) 来向 jQuery Mobile 导航栏添加按钮，然后在导航栏元素本身上调用 navbar() 方法。

例如：在 HTML 中，您可以像这样放置一个空导航栏：

  <div data-role="navbar" data-theme="a">
    <ul id="myNavbar"></ul>
  </div>

与 JavaScript 相比，您可以执行以下操作：

// creating new buttons
$("#myNavbar").append('<a href="#" class="ttxButton">button 1</a>');
$("#myNavbar").append('<a href="#" class="ttxButton">button 2</a>');
$("#myNavbar").append('<a href="#" class="ttxButton">button 3</a>');

// calling the navbar method
$("#myNavbar").navbar();

Answer 5

刷新导航栏而不重新创建组件

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

小提琴

http://jsfiddle.net/tM3KR/

Answer 6

您应该简单地使用 $('#navbar').navbar('refresh')。 #navbar 可以是任何 id 或元素引用。

Answer 7

.navbar 方法本身似乎不适用于 jquery mobile 1.4.2。我必须先执行销毁，似乎样式被重新应用了。

仅供参考，只要添加的按钮不换行，这将起作用。如果为导航栏添加足够多的按钮来包裹它们，则应用的样式并不完全正确。

代码看起来像

$('#yournavbarDIV').navbar("destroy");
$('#yournavbarDIV').navbar();

在你附加你的 li 元素之后。

Answer 8

html

<div id="def"></div>

javascript

$("#def").append("<ul id='abc'></ul>");
$("#abc").append('<li><a href="#">111</a></li>');
$("#abc").append('<li><a href="#">222</a></li>');
$("#abc").append('<li><a href="#">333</a></li>');
$("#def").navbar();

Answer 9

我遇到了同样的问题，这就是我所做的。

在 HTML 中

<div data-theme="b" data-role="footer" data-position="fixed">
  <div class="maintenance_tabs">
  </div>
</div>

然后在 JS 函数中，我做了这个

var mynavbar = '<div data-role="navbar" data-iconpos="top" class="maintenance_tabs">'
                +'  <ul>'
                +'    <li>'
                +'      <a href="log.html" data-transition="fade" data-theme="b" data-icon="bars">'
                +'        View Log'
                +'      </a>'
                +'    </li>'
                +'    <li>'
                +'      <a href="'+ data.page +'" data-transition="fade" data-theme="b" data-icon="plus">'
                +'        New Entry'
                +'      </a>'
                +'   </li>'
                +'    <li>'
                +'      <a href="" data-transition="fade" data-theme="b" data-icon="back" onclick="return logoutAction();">'
                +'        Logout'
                +'      </a>'
                +'   </li>'
                +'  </ul>'
                +'</div>';
  $(".ui-page-active .maintenance_tabs").empty();
  $(".ui-page-active .maintenance_tabs").append(mynavbar).trigger('create');

我每次都调用 .empty() 以便它不会一次又一次地重复导航栏。希望这对某人有所帮助。

谢谢。

Answer 10

我在更改导航栏内容时遇到了很多问题。 这是因为新的内容/按钮不正常

实际上，它在 1.4.3 中并不能完全工作：当您单击另一个选项卡时，新创建的选项卡会保持活动状态 – Matthieu

在源代码中搜索我发现导航栏正在这样做：

$navbar.delegate( "a", "vclick", function( /* event */ ) {

因此，即使您销毁导航栏并重新创建它，此事件也会被触发两次，这将破坏正常行为。这将起作用：

navbar = $("#my-navbar");
navbar.navbar("destroy");
navbar.undelegate();

navbar.html("<ul><li><a href=\"#area1\">First  option</a></li><li><a href=\"#area2\">Second option</a></li></ul>");
navbar.navbar();
$('#my-tabs').tabs('refresh');

这已经连续好几天让我发疯了......我希望它会帮助你。