jQuery mobile 动态加载数据-List View

由于jQuery Mobile页面渲染机制的限制,我们在页面中动态添加元素的时候经常会遇到无法被正常渲染的情况,List View组件是开发团队最早提供出动态更新解决方案的组件,在这里我们来实战一下解决方案——listview('refresh')
代码示例:
程序代码 程序代码
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script><script>
    $(function(){
        $("#more").live("click",function(){
            var i = 0;
            for (i=0;i<=5;i++){
                var list = $("<li><a href='http://uedcool.com'>uedcool-"+i+"</a></li>");
                $("#list").append(list).find("li:last").hide();
                $('ul').listview('refresh');
                $("#list").find("li:last").slideDown(300);
                }
            });
        });
    </script>
    </head>
    <body>
    <div data-role="page">
      <div data-role="header">
        <h1>www.uedcool.com</h1>
      </div>
      <!-- /header -->
      <div data-role="content">
        <ul data-role="listview" id="list" data-inset="true">
          <li><a href="#">用户体验</a> </li>
          <li><a href="#">前端技术</a></li>
        </ul>
      </div>
      <!-- /content -->
      <div data-role="footer" class="ui-bar"> <a href="#" data-role="button" id="more">更多...</a> </div>
      <!-- /footer -->
    </div>
    <!-- /page -->
</body>
</html>


[本日志由 eddy 于 2011-04-18 00:17 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: jQuery Mobile 动态 加载 List View
相关日志:
评论: 6 | 引用: 0 | 查看次数: 14786
回复回复Geno[2017-08-02 05:44 PM | del]
如何动态跟一个 input 输入的绑定关系啊?
回复回复lidongtao[2011-08-16 11:13 AM | del]
请问,live和bind有什么区别?
回复回复jankerli[2011-08-04 09:29 PM | del]
希望继续更新啊,最近我也学习这方面的知识,之前看的都是英文的手册,可惜看不太懂又费劲,希望博主出更多更好更实用的教程哈,呵呵~~
回复回复somewindows[2011-05-10 11:19 AM | del]
这个是我弄的一个jquery 测试页,头两条新闻 和 下面两头 是一样的文件。

【问题】头两新闻链接是站外引用 没有侧滑动效果,后两条新闻文件在其根目录,点击有侧滑效果。

不知道,这个框架是不是不支持跨目录的访问效果呢?

谢谢了。我的QQ:434924
回复回复somewindows[2011-05-10 10:54 AM | del]
看到你发布了一系列jQuery Mobile的教程,非常不错,在国内写教程的不多。想请教你一个小问题,方便吗。谢谢了。

回复回复orange[2011-04-19 02:38 PM | del]
期待继续更新,学到了不少……
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭