从 JSON 数据动态创建 Jquery 移动导航栏

Dynamically create Jquery Mobile Navbar from JSON data

本文关键字：移动 导航 Jquery 创建 JSON 数据 动态      更新时间：2023-09-26

我正在尝试从提供 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 中显示的代码一样。有人能指出我正确的方向吗？

一旦你为导航栏小部件炮制了 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() 函数的。

我遇到了同样的问题（我一直在重新生成导航栏，具体取决于获取的数据），我的解决方案如下：

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>
相关文章：