动态加载collpase和listview

最新推荐文章于 2017-03-08 12:33:43 发布

转载最新推荐文章于 2017-03-08 12:33:43 发布 · 818 阅读

标签

#jquery mobile #collapsible #listview

jquery mobile 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Ajax获取数据并将其加载到UI组件（如Collapsible和ListView）的方法。通过示例代码展示了如何动态创建这些组件，并将获取的数据进行格式化以适应特定的UI需求。

花了一天时间都没弄出来，突然间看到了这个，完美的解决了我的问题。通过ajax获取的信息加载collpase和listview

http://jsfiddle.net/Palestinian/VLc65/

里面的核心代码：

var data = [{
    "title": "Category 1",
        "items": [
        "one", "two", "three"]
}, {
    "title": "Category 2",
        "items": [
        "four", "five", "six"]
}, {
    "title": "Category 3",
        "items": [
        "seven", "eight", "nine", "ten"]
}];

$.each(data, function (i, v) {
    var items = v.items;
    var col = $("<div/>", {
        "data-role": "collapsible"
    });
    var title = $("<h3/>", {
        text: v.title
    }).appendTo(col);
    var list_items = '';
    $.each(items, function (x, y) {
        list_items += "<li><a href='#'>" + y + "</li>";
    });
    var list = $("<ul/>", {
        "data-role": "listview",
            "id": "listview" + i,
            "data-inset": true
    });
    $(list).append(list_items);
    $(list).appendTo(col);
    $("#stuff").append(col).collapsibleset().trigger("create");
});

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible-set" id="stuff"></div>
    </div>
</div>