jquerymobile知识点:动态ListView

这里要讲的是jqueryMobile 中的ListView 动态的列表

<ul data-role="listview" data-inset="true" id="uiList">
</ul>
</body>
</html>
<script type="text/javascript">

    $(document).ready(function () {
        InitDataBind();
    });

    function InitDataBind() {
        var dataLi = $("#uiList");
        $.ajax({
            type: "POST",
            url: "/ajax/Test_News.ashx?date=" + new Date().getTime(),
            data: "",
            dataType: "json",
            success: function (data) {
                data = eval(data);
                var listHtml = "";
                listHtml += "<li data-role=‘list-divider‘ data-theme=‘g‘>今天是:2013年10月11日<span class=‘ui-li-count‘>2</span></li>";
                $.each(data.Test_News, function (i, item) {
                    listHtml += "<li>";
                    listHtml += "<a href=‘#‘>";
                    listHtml += "<img src=‘/Img/2.jpg‘>";
                    listHtml += "<h2>" + item.username + "</h2>";
                    listHtml += "<p>" + item.usercontent + "</p>";
                    listHtml += "<p class=‘ui-li-aside‘><strong>" + item.userdate + "</strong></p>";
                });
                dataLi.html(listHtml.replace("undefined", ""));
                <span style="color:#FF0000">$("#uiList").listview(‘refresh‘); // 重要  </span>
            },
            error: function (data) {
                dataLi.append("数据有误!");
            }
        });
    }
</script>
时间: 2024-10-24 02:24:01

jquerymobile知识点:动态ListView的相关文章

jquerymobile知识点:动态Grid的绑定以及刷新

下面jquerymobile是ajax动态绑定和刷新的例子.直接上图以及代码. 下面是实例代码: //初始绑定 function GetInitBind(PageIndex, PageSize, sqlwhere, OrderType) { showLoading(); var adapGrid = $("#adapGrid"); $.ajax({ type: "POST", url: "/Ashx/YouHui.ashx?MethodName=GetSe

jquerymobile知识点:select的动态帮定

代码: <div data-role="navbar"> <ul> <li> <select name="select-choice-min" id="select_cata" data-mini="true" data-corners="false" data-ajax="false"> <option>全部分类</op

22、(转载)jQueryMobile 知识点总结

本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术.HTML 5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能

javascriptDOM编程艺术_学习笔记_知识点 动态创建标记

传统技术:document.write 和 innerHTML 深入剖析DOM方法:createElement.createTextNode.appendChild 和 insertBefore 7.1.1 document.write document对象的write()方法可以方便快捷地把字符串插入到文档里. document.write的最大缺点是它违背了“行为应该与表现分离”的原则. 1 document.write("<p>This is inserted.</p&g

jquerymobile知识点:button与a

首先先上一段代码: <a href="#" data-role="button" onclick="change();" id="IDBtn" data-corners="false" data-icon="back" data-iconshadow="false">Link button</a> <input type="bu

jquerymobile知识点:实现toolbar下方显示,自定义图标!

css: .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: non

jquerymobile知识点三:弹出层popup

弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width: 460px;" class="

Listview 加载更多

JQM Listview 加载更多 demo - Warren的个人主页 JQM Listview 加载更多 Demo 测试数据1 测试数据2 测试数据3 测试数据4 显示更多 Page Footer <!DOCTYPE HTML> <html> <head> <title>JQM Listview 加载更多 demo - Warren的个人主页</title> <meta name="keywords" content

Android 博客导航

Android 博客导航 一. 基础知识 Android 常用知识点 Android 常见问题解决 Android 常用控件 控件常用属性 Material Design 常用控件 二.常用知识点 动态权限获取 双击返回 退出程序 三.四大组件 Intent 内容提供器--通过 ContentResolver 读取联系人信息 广播--通过广播监听网络状态 AsyncTask 服务-Service 活动 广播 四.高级知识 Android 消息机制 五.功能实现 ListView 上拉加载更多 通