jquery 動態生成html5列表項以及header,footer的固定,居中排列
阿新 • • 發佈:2019-01-28
在開發跨平臺移動應用中,由於資料動態更新,所以列表項需要動態生成,查了很多資料,以下方法親測可用
html5程式碼
<div data-role="page" id="index" > <div style="overflow: hidden;" data-role="header" data-position="fixed"> <h1>首頁</h1> <div data-role="navbar" style="background-color:silver;"> <ul> <li><a href="#index">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </div>
<div data-role="content">
<ul data-role="listview" id="all" ></ul>
</div>
<div style="overflow: hidden;" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index">首頁</a></li> <li><a href="#">收藏</a></li> <li><a href="#">日曆</a></li> <li><a href="setting.html" rel="external">設定</a></li> </ul> </div> </div> </div>
js程式碼
$.ajax({
url: '(url)',
type: 'GET',
dataType: 'XML',
success: function (data) { all = $('#all');//括號內為要生成列表項地方的id var iHtml = ''; count = $(data).find("record").each(//每出現一次<record>執行一次下面的函式 function () { iHtml += '<li style="list-style-type:none;"><div style="vertical-align:middle;float:left;font-size:8%"><img style="margin-bottom: -4px;width: 14%" src="" /><span> </span></div>' + ' <div style="vertical-align:middle;float:right;font-size:8%"> <img style="margin-bottom: -4px;width:25%" src="" />12345</div><br />' + '<div> <a href="#" onclick="getcard_details(' + 變數 + ');"><img style=" margin: 0 0 -45% 0; overflow: hidden;" id="' + 變數 + '" width="100%" src=' + 變數 + 'aid:' + 變數 + '_display:1></a></div>' + '</li>'; } ).length;//count.length是為了獲得<record>標籤出現的次數,可不要 iHtml += '<a class="ui-btn" href="#">+新增更多</a>'; all.html(iHtml).listview('refresh'); } });