JQM Listview 加载更多 demo - Warren的个人主页

JQM Listview 加载更多 Demo

Page Footer

<!DOCTYPE HTML>

<html>

    <head>

        <title>JQM Listview 加载更多 demo - Warren的个人主页</title>

        <meta name="keywords"

            content="JqueryMobile JqueryMobile JqueryMobile教程   JQM Listview 加载更多 demo Warren" />

        <meta name="description" content="JQM Listview 加载更多 demo" />

        <meta name="viewport"

            content="user-scalable=no, width=device-width, initial-scale=1.0" />

        <link rel="stylesheet"

            href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script

            src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

            <script type="text/javascript">

                $(function() {

                    $("#btnMore").click(function() {

                        loadData();

                    });

                });

                function loadData(){

                    var content = "<li><a href=\"#\">这是加载的数据</a></li>";

                    $("#contentList").append(content).listview('refresh');

                }

            </script>

    </head>

    <body>

        <div data-role="page">

            <div data-role="header">

                <h1>

                    JQM Listview 加载更多 Demo

                </h1>

            </div>

            <div data-role="content">

                <ul data-role="listview" id="contentList">

                    <li>

                        <a href="#">测试数据1</a>

                    </li>

                    <li>

                        <a href="#">测试数据2</a>

                    </li>

                    <li>

                        <a href="#">测试数据3</a>

                    </li>

                    <li>

                        <a href="#">测试数据4</a>

                    </li>

                </ul>

                <p>

                    &nbsp;

                </p>

                <div id="moreDiv">

                    <button id="btnMore" data-icon="refresh">

                        显示更多

                    </button>

                </div>

            </div>

            <div data-role="footer">

                <h4>

                    Page Footer

                </h4>

            </div>

        </div>

    </body>

</html>

Listview 加载更多的更多相关文章

  1. ListView 加载更多列表 Load More mono forandroid 项目笔记

    今天项目经理找我说Listview加载更多的时候会出现一些问题,主要表现在会顿一下.让我我就去找Java的方法看看.自己写出了mono 的加载更多功能.和大家分享一下 先看效果 首先是模型类ListI ...

  2. Android ListView加载更多

    先看效果: ListView的footer布局: <?xml version="1.0" encoding="utf-8"?> <Relati ...

  3. Listview加载更多是，恢复到原来的位置，如果不加特殊处理，总是跳转第一条

    1.记录listView滚动到的位置的坐标,然后利用listView.scrollTo精确的进行恢复 listView.setOnScrollListener(new OnScrollListener ...

  4. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  5. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  6. LIstView 滚动 异步 加载更多 mono for android ScrollStateChanged ScrollState.Idle; Fling;TouchScroll

    今天项目需要实现一下列表的分页加载 找到了Listview的ScrollStateChanged方法. 和大家分享一下 //先找到Listview ListView order = FindViewB ...

  7. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  8. android ListView下拉刷新 上拉加载更多

    背景 最近在公司的项目中要使用到ListView的下拉刷新和上拉加载更多(貌似现在是个项目就有这个功能!哈哈),其实这个东西GitHub上很多,但是我感觉那些框架太大,而且我这个项目只用到了ListV ...

  9. Windows Phone 8.1开发：如何让ListView下拉加载更多？

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

随机推荐

  1. SQL Server2000企业管理器在Win7中新建表错误的解决方法

    Sql Server2000建表错误与解决方法: 在Windwos7中SQL Server 2000企业管理器在新建表时会提示错误,尝试各种方法均告无效,包括升级SP3和SP4,最终发现如下规律可以暂 ...

  2. android inflater 用法

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  3. The Tangled Web （Web之困）第四章 摘要

    1. HTML语法: 由Tag组成层级结构,标签视为名,而值插在当中. 关键组成符:<, >, ', ", & 2. 解析模式: 文件开头<!DOCTYPE> ...

  4. VB学习笔记

    stack segment stack 'stack' dw dup() ;此处输入堆栈段代码 stack ends data segment ;IBUF OBUF 看成是内存的地址,IBUF+1和I ...

  5. 1.Linux系统（CenntOS）固定IP的设定

    首先:我们配置一个临时的固定的固定ip,作用是让我们用其他的shell工具连接虚拟机 ifconfig eth0 192.168.10.168 在主机用ping命令查询连通后再进行下一步 ping 1 ...

  6. 学习tcl的资源

     在这里介绍一些学习tcl的资源,有问题的时候可以尝试从这些资源中获取帮助.       网站:     http://www.tcl.tk 官方站点     http://www.scriptics ...

  7. UML 行为图之用例图 总结

    学习UML图形 推荐阅读<UML参考手册>第2版. http://www.umlchina.com/  推荐微软的开发软件设计模型 http://msdn.microsoft.com/zh ...

  8. 从URI中获取实际的文件path

    如题,经常用在onActivityResult方法中解析图片等各种地址,因为Android 4.4之后google更改了对应的方法. /** * Get a file path from a Uri. ...

  9. IOS_OC_地图与定位

    知识点介绍 一. 定位 实现一次定位 CLLocation对象介绍 实现持续定位 请求用户授权 二. 地理编码 正地理编码 反地理编码 三. 地图的基本使用 显示用户位置 设置地图显示类型 根据用户位 ...

  10. HDU 3008 Warcraft（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3008 题目大意:人有100血和100魔法,每秒增加 t 魔法(不能超过100).n个技能,每个技能消耗 ...