jquery 动态生成html5列表项以及header，footer的固定，居中排列

来源：互联网发布：淘宝企业店注册编辑：程序博客网时间：2024/06/06 07:13

在开发跨平台移动应用中，由于数据动态更新，所以列表项需要动态生成，查了很多资料，以下方法亲测可用

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

0 0