1. 程式人生 > >jquery 動態生成html5列表項以及header,footer的固定,居中排列

jquery 動態生成html5列表項以及header,footer的固定,居中排列

在開發跨平臺移動應用中,由於資料動態更新,所以列表項需要動態生成,查了很多資料,以下方法親測可用

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');
            }
        });