Question

我试图在按钮点击时动态创建JQM中的listviews选项卡。目前，我使用包含样本数据的JS数组，最终将通过ajax填充。经过研究，似乎我应该触发触发器（“创建”）或触发器（“刷新”），但显然，我没有正确地做到这一点。这是代码：

HTML：

<!doctype html>
    <html lang="en"> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>navbar demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
        <script type="text/javascript" src="../JS/nav.js"></script>
     </head>
     <body>
         <button onclick="fillCategories()">Fill</button>
         <div id = "decisions" > </div>
     </body>
    </html>

使用Javascript：

function fillCategories() {
var navElements =   [{"category_sublist_id":"1","category_sublist_name":"Europe"},
                    {"category_sublist_id":"2","category_sublist_name":"Asia"},
                    {"category_sublist_id":"3","category_sublist_name":"Americas"}];
var categoriesTabs = $('<div id="categories">')
                        .attr("data-role","tabs")
                        .appendTo("#decisions");
var navBar = $("<div>").attr("id","categoriesNames")
                        .attr("data-role","navbar")
                        .appendTo("#categories");
var listElements =  [{"sublist_row_id":"1","category_sublist_id":"1","sublist_name":"Great Britain"},
                    {"sublist_row_id":"2","category_sublist_id":"1","sublist_name":"Sweden"},
                    {"sublist_row_id":"3","category_sublist_id":"1","sublist_name":"France"},
                    {"sublist_row_id":"4","category_sublist_id":"1","sublist_name":"Germany"}];

$("#categoriesNames").append($("<ul>").attr("id","categoriesUl"));
$(navElements).each(function(){
        $("#categoriesUl").append($("<li>")
            .attr("value", this.category_sublist_id)
            .append($("<a>")
                .attr("href", "#sublist"+this.category_sublist_id)
                .attr("data-theme","a")
                .attr("data-ajax","false")
                .text(this.category_sublist_name)));
});

$("#categories").append(navBar).trigger("create");
categorySublistView("categories", "sublist2", listElements);}

function categorySublistView(elementId, listLink, listData) {
var listId = listLink+"id";
var tab = $("<div>").attr("id",listLink)
                    .addClass("ui-content")
                    .appendTo("#"+elementId);
var list = $("<ul>").attr("data-role","listview")
                    .attr("data-inset","true")
                    .attr("data-icon","false")
                    .attr("id", listId)
                    .appendTo("#"+listLink);
$(listData).each(function(){
    var li = $("<li/>")
        .attr("value",this.sublist_row_id)
        .appendTo("#"+listId);
    var link =$("<a>")
        .attr("href", "#")
        .text(this.sublist_name)
        .appendTo(li);
});
if ( $('#'+listId).hasClass('ui-listview')) {
    $('#'+listId).listview('refresh');
 }
else {
    $('#'+listId).trigger('create');
 }}

修改我最初的目的是在导航栏中绘制3个选项卡，这些选项卡是列表视图，在选项卡点击中可见

在jQuery mobile中动态创建带有listview的选项卡

0 个答案: