Question

我遇到了Jquery Mobile的问题：我想使用JS脚本从头开始在gridView中动态创建一个listView。

我的HTML代码是：

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <!--<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="b" data-role="header">
            <h1>Listview Test</h1>
        </div>
        <div data-role="content" id="pageContent">
        </div>
    </div>    
</body>

我的JS代码是：

$(document).on('pagebeforeshow', '#index', function()
{ 
    var html = "";
    html += "<div class='ui-grid-b'>";
    html += "<div class='ui-block-a' id='block_a'>"
    html += "<ul data-role='listview' data-split-icon='star' data-split-theme='a' class='listview' id='daViewList'>"

    html += "<li id='grid_li'>"
    html += "<a href='projets.html'>";
    html += "<img src='http://demos.jquerymobile.com/1.2.0-alpha.1/docs/lists/images/album-bb.jpg' />";
    html += "<h3>A</h3>";
    html += "<p>Another one</p>";
    html += "<p>And finally another one</p></a>";
    html += "<a href='simulations.html' data-transition='slide' data-icon='arrow-r' data-theme='c'></a>";
    html += "</li>";
    html += "</ul>";
    html += "</div>";
    html += "</div>";
    $(html).appendTo('#pageContent');
    $("#daViewList").listview().listview("refresh");
});

这个JSFiddle：http://jsfiddle.net/KagLD/向您展示了我想要实现的目标，但是当我勾选左侧面板上的Jquery Mobile 1.2.0选项时，代码不再起作用了。问题是我使用Jquery Mobile来制作我的应用程序，所以我无法摆脱它。

代码中出现了什么问题？我需要更改什么才能满足Jquery Mobile的要求？

谢谢大家

动态创建ListView不适用于Jquery的移动版本

0 个答案: