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. 利用PS脚本自动删除7天之前建立的目录-方法1！

    目前有一个备份目录,目录名称为d:\temp\bak目录,在这目录下,根据备份要求,自动生成了如下目录的列表: 20131012 20131011 20131010 20131009 20131008 ...

  2. 小编接地气——第六届中国云计算大会攻略Q&amp;A

    2014年5月20-23日,第六届中国云计算大会在北京召开. 花个1000多元,在工作日请假来參加大会,不能让大家白跑一趟而是物有所值. 小编写了大会攻略Q&A,分享给各位 Q:为什么要參加关 ...

  3. [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...

  4. mysqld --debug-sync

    http://hedengcheng.com/?p=238https://dev.mysql.com/doc/internals/en/debug-sync-facility.html mysqld ...

  5. JavaScript无限极菜单

    <!DOCTYPE html> <html> <head> <title> New Document </title> <meta c ...

  6. 在Vivado中调用ModelSim生成FSM的状态转移图

    如果我们已经书写了一段FSM代码,现在想倒过来把它转换成为状态转移图,方便我们直观地检查我们书写的状态对不对(在写论文什么的画图太麻烦的时候,有个自动生成的是多方便啊!),应该怎么弄呢?通过在Viva ...

  7. Maven 私服的使用实战

    本日志主要是介绍下面的配置 1. 将内部构件部署到私服 在工程的pom文件中添加下面配置 <distributionManagement> <repository> <i ...

  8. 百思不得其解—这些年做Web开发遇到的坑？

     请教一个问题:Bootstrap 模态框modal里面的嵌入 iframe ,然后iframe 里面载入的是优酷的视频 ,现在的问题是:这个模态框在谷歌浏览器上面可以播放出视频,而在ff浏览器里面无 ...

  9. Redis Cache 简介

    Microsoft Azure Redis Cache 是基于流行的开源Redis Cache 1.Microsoft Azure Redis Cache 可分为以下几个级别: Basic – 单节点 ...

  10. TransactionScope事务

    一个错误的理解就是Complete()方法是提交事务的,这是错误的,事实上,它的作用的表示本事务完成,它一般放在try{}的结尾处,不用判断前台操作是否成功,如果不成功,它会自己回滚. #region ...