0

JSONデータを提供するWeb APIから取得したデータから動的にナビゲーションバーを作成しようとしています。コードは次のとおりです: https://gist.github.com/2962277 私が使用する場合:

    <div data-role="navbar">
      <ul>
        <li><a href="a.html">One</a></li>
        <li><a href="b.html">Two</a></li>
    </ul>
   </div>

直接htmlコードでうまく動作しますが、これは私が探しているものではありません. Gist show のコードのように、データからリスト要素を作成できるようにしたいと考えています。誰でも私を正しい方向に向けることができますか？

4

2 に答える 2

4

navbar ウィジェット用の HTML を作成したら.trigger('create')、ウィジェットを呼び出すだけです。

var myNavbar = $('<div data-role="navbar"><ul><li><a href="a.html">One</a></li><li><a href="b.html">Two</a></li></ul></div>');
$('#some-container').append(myNavbar).trigger('create');

ここにデモがあります：http://jsfiddle.net/Jde95/

これにより、jQuery Mobile がトリガーされ、ウィジェットが初期化されます。

例えば：

var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
$.getJSON(url,function(data){
    var output = [];
    $.each(jsonresults, function(i,v){
        output.push('<li><a href="' + jsonresults[i].link + '">' + jsonresults[i].name + '</a></li>');
    });
    $('#main-content').append('<div data-role="navbar">' + output.join('') + '</div>').trigger('create'); 
});

HTML を作成し、.append()関数を使用した方法に注目してください。

于 2012-06-20T22:33:32.773 に答える
0

私は同じ問題を抱えていました（フェッチされたデータに応じて、常にナビゲーションバーを再生成しています）、私の解決策は次のとおりです：

var navBar = '<div id="invNavBarAction" data-role="navbar" data-iconpos="left"><ul>';
navBar += '<li>MANY LINES AS YOU NEED</li>';
navBar += '</ul></div>';
$('#invNavBarAction').remove();
$('#invNavBarContainer').append($(navBar));
$('#invNavBarAction').navbar();

HTML： 

<div id="invNavBarContainer">
    <div id="invNavBarAction" data-role="navbar" data-iconpos="left"></div>
</div>
于 2012-06-26T15:57:28.420 に答える