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自动将一个类添加到名为“ui-grid-b”的<ul>元素中，如果我手动将其更改为“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），然后在navbar元素本身上调用navbar（）方法，将按钮添加到jQuery Mobile导航栏。

例如：在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

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

的小提琴 的

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正在这样做：

$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');

这使我连续很多天发疯……希望它能对您有所帮助。

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

10 个答案: