Question

我可以在jQuery移动页面中创建一个2项导航栏，其中包含以下代码段：

<div id="nav-bar" data-role="navbar">
    <ul id="nav-list">
        <li><a id="link1" href="#">Nav 1</a></li>
        <li><a id="link2" href="#">Nav 2</a></li>
    </ul>
</div>

我正在尝试使用以下代码的各种版本以编程方式添加第三个导航栏元素：

$("#nav-list").append("<li><a id='newElement' href='link3'>Nav 3</a></li>");
$("#nav-bar").navbar();
//$("#pageName").page();
//$("#pageName").trigger("create");
//$("#nav-list").listview("refresh");

当我执行此操作时，我看到“Nav 3”链接出现，但它没有采用其他链接的jQuery移动格式。

非常感谢任何帮助。

Answer 1

在JQM的增强开始之前，您应该将HTML附加到pagebeforecreate处理程序中。

Answer 2

由于这个问题我失去了理智。 .navbar（）曾经在以前的版本中工作，由于某些原因不再存在。

我已经创建了一个函数，其工作是添加一个新元素，然后重建navbar。其中一部分来自其他人，因此我无法对此代码承担全部责任（用于样式剥离的方法）。

以下是工作示例：http://jsfiddle.net/Gajotres/V6nHp/

以下是使用的方法：

var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        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");
            }
        });
        return navbar;   
    }
}

以编程方式在jQuery Mobile中添加导航栏元素

2 个答案: