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. ThinkPHP函数详解：M方法

    M方法用于实例化一个基础模型类,和D方法的区别在于:1.不需要自定义模型类,减少IO加载,性能较好:2.实例化后只能调用基础模型类(默认是Model类)中的方法:3.可以在实例化的时候指定表前缀.数据 ...

  2. node.js在windows下的学习笔记(1)---安装node.js

    1.首先打开http://www.nodejs.org/ 2.选择DOWNLOADS,跳转到下面的画面,我的系统是windows7的32位.所以选择.msi的32bit版本. 3.下载后,得到一个5. ...

  3. 系统数据文件和信息之附加组ID

    4.2BSD引入了附加组ID(supplementary group ID)的概念.我们不仅可以属于口令文件记录项中组ID所对应的组,也可属于多达16个另外的组.文件访问权限检查相应被修改为:不仅将进 ...

  4. Socket异步通信学习一

    最近在做一个频谱管理项目,负责通信模块,自己也是小白,重头学起,直至今天通信基本框架已经完成,把自己在学习中的心得与大家分享一下,做一个socket系列的博文,顺便加固一下自己对socket通信的认识 ...

  5. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  6. Android5.0之TextInputLayout、FloatingActionButton的使用

    TextInputLayout和FloatingActionButton都属于MD风格的控件,比起普通的EditText和Button.ImageButton,TextInputLayout和Floa ...

  7. 观察者模式Demo

    using System; using System.Collections.Generic; namespace Demo {     #region 抽象层,定义了观察者模式     /// &l ...

  8. linux 常用查找命令 小技巧

    wc -l `find . -name "*.css"`|tail -n1 指定目录下 在指定后缀文件 查找关键字 find ./ -name "*" -exe ...

  9. 幻灯片の纯CSS，NO JavaScript

    之前就遇到有人问,不用js,纯css实现幻灯片. 那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟. 方案一:利用css3的animation 例子传送门 ...

  10. Linq 的IQueryable和IEnumerable方式

    IEnumerable方式: public IEnumerable<WebManageUsers> GetWebManageUsers(ISpecification<WebManag ...