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. VersionCode和VersionName

    关于apk更新版本的问题   先上结论: Google为APK定义了两个关于版本属性:VersionCode和VersionName,他们有不同的用途. VersionCode:对消费者不可见,仅用于 ...

  2. SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程 'sys.sp_OACreate' 的访问

    sqlserver2008导入excel到数据库的时候报错: SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程 'sys.sp_OACreate' ...

  3. linux Page cache和buffer cache----- systemtap

    http://shixm.iteye.com/blog/1724718 http://blog.csdn.net/dianhuiren/article/details/7543886

  4. Java IO学习笔记

    Java流的分类,一般可按以下方式分: 按方向分,分为输入流,输出流. 按类型分,分为字节流和字符流. 2.1字节流是通过字节来读取数据 2.2字符流是通过字符来读取数据 按操作方式分,分为节点流和过 ...

  5. Android（java）学习笔记144：Android音视频录制类MediaRecorder用法举例

    Android语音录制可以通过MediaRecorder和AudioRecorder.MediaRecorder本来是多媒体录制控件,可以同时录制视频和语音,当不指定视频源时就只录制语音(默认录制语言 ...

  6. PHP克隆魔术方法

    克隆对象 __clone() $p2=clone $p; $p=>say(); 克隆对象的时候自动调用的方法 作用和构造方法一样是对新克隆的对象进行初始化 在这个方法中$this是副本所以可以给 ...

  7. c++基础语法 构造函数 析构函数 类的组合

    1 构造函数 1.不能指定任何返回值,甚至连void都不能有. 2.与Java不同,c++不同new对象,对于无参的构造函数声明对象时括号应该省略. 2 析构函数 1. 前加~,不能有参数,不能有返回 ...

  8. c语言，strcpy

    #include <stdio.h> #include <string.h> int main() {  char string[10];  char *str="a ...

  9. bubble_sort

    冒泡排序法: #include <iostream> #include <algorithm> using namespace std; int main(){ int n; ...

  10. .net+easyui系列--按钮

    easyui提供了各种按钮样式,包括搜索.新增.保存.删除等 <a id="btn" href="#" class="easyui-linkbu ...