0

これは私の jquery モバイル ページ ヘッダー セクションです。動的に入力されたデータを JavaScript からこのコードのナビゲーション バーに入力したいと考えています。 

<div data-role="page" data-theme="a" id="homePage"  >
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3 class="mblHeading">Client</h3>
        <a href="#assignedWI" data-icon="home" data-transition="slide" data-theme="a"></a> <a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
        <div data-role="navbar" >
            <ul id="navid">
                <li><a href="a.html">One</a></li>
                <li><a href="b.html">Two</a></li>
            </ul>
        </div>
    </div>

content.Here querytableid を動的に設定するための私の Java スクリプト コードは、navid.navigationList は配列です。

function populateQueryList4(queryTableID)
{
    var listParent = jq(queryTableID);
    listEntry = document.createElement("LI");
    aNode = document.createElement("A");

    aNode.innerHTML=navigationList[k-1];

    listEntry.appendChild(aNode);

    aNode.onclick = function() {
        //displayArtifactContent(artifactAreaInfoMap[wiTitle]);
    };
    listParent.append(listEntry);
    jq("#navid").navbar('refresh');
}
4

1 に答える 1

2

残念ながら、そのようにナビゲーションバーを設定することはできません。関数 navbar() および navbar('refresh') はここでは役に立ちません。trigger('create') または trigger('pagecreate') ではありません。何らかの理由で、追加の navbar アイテムを動的に追加すると、スタイルが適切に設定されず、これはエラーになります。

それを行う方法は 2 つあります。

pagecreate または pagebeforecreate ページ venet 中にナビゲーション バーを動的に設定します。

基本的に、これら 2 つのイベント ページのスタイルは、jQuery Mobile スタイルに従ってスタイル設定されていません。したがって、この時点で追加されたコンテンツは自動的に強化されます。

jsFiddle の実際の例を次に示します: http://jsfiddle.net/Gajotres/SJG8W/

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});

動的に追加されたナビゲーション バー アイテムを手動で強化する

他の解決策は、自分で行うことです。実際の例でわかるように、複雑ではありません: http://jsfiddle.net/Gajotres/V6nHp/

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


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 ページ イベントがどのように機能するかを理解する必要があります。詳細については、他の回答をご覧ください: jQuery Mobile: document ready vs page events。

また、jQuery Mobile ページのマークアップの強化に関する私の他の回答もご覧ください: jQuery Mobile: Markup Enhancement of dynamic added content

于 2013-05-06T07:34:40.717 に答える