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>

次のコードのさまざまなバージョンを使用して、プログラムで3番目のナビゲーションバー要素を追加しようとしています。

$("#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」リンクが表示されますが、他のリンクのjQuerymobileフォーマットは使用されません。

どんな助けでも大歓迎です。

4

2 に答える 2

1

JQM の機能拡張を開始する前HTMLに、ハンドラにyour を追加する必要があります。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 に答える