從JSON數據動態創建Jquery Mobile Navbar

我試圖從數據動態創建一個導航欄，我從提供服務json數據的web api獲取數據。下面的代碼：https://gist.github.com/2962277 如果我使用：從JSON數據動態創建Jquery Mobile Navbar

<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中的代碼一樣從數據中創建列表元素。任何人都可以指引我正確的方向？

來源

2012-06-20 Luis D Urraca

查看某處.trigger（'create'）添加Jquery Mobile來動態添加元素，但不知道如何使用它。 –

你目前使用現在的方法有哪些問題？ – kinakuta

Jquery Mobile樣式不加載，它只是加載元素，但不包含jquery移動添加到樣式元素的類。 –

一旦你炮製你的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'); 
});

聲明I如何炮製HTML，和所使用的.append()功能。

來源

2012-06-20 22:33:32 Jasper

謝謝，我沒有在例子中看到.trigger（'trigger'）。我應該把那個放在哪裏？我的意思是使用你的例子，我得到了相同的結果，列表沒有應用Jquery風格。 –

我更新了答案，只是將它添加到要添加HTML的元素上，如果這給你一個困難的時間，那麼執行此操作：'$（'＃main-content'）。append（...）。children（）。去年（）。觸發器（ '創建'）'。 – Jasper

這有點有用，但只在元素上，jquerymobile添加了一個名爲ui-link的類，但ul和li上的元素樣式仍未加載。你想讓我用我現在的代碼更新要點嗎？ –

我有同樣的問題（我再生我的導航欄的時候，根據所取得的數據），我的解決方案是以下幾點：

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-26 15:57:28 Marshal

從JSON數據動態創建Jquery Mobile Navbar

回答

相關問題