0

我可以使用以下代码片段在 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 移动格式。

任何帮助将不胜感激。

4

2 回答 2

1

您应该在 JQM 的增强功能开始之前将您的HTMLin 添加到处理程序中。pagebeforecreate

于 2012-12-17T05:11:19.900 回答
0

因为这个问题，我失去了理智。.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;   
    }
}
于 2012-12-17T16:36:32.680 回答