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. Swift编程语言的相关资料

    苹果官方Swift文档<The Swift Programming Language> 苹果开发人员Swift文档及介绍 网友整理的Swift中文文档<Apple Swift编程语言 ...

  2. ORACLE ------MYSQL2014 大会 PPT

    https://oracleus.activeevents.com/2014/connect/focusOnDoc.do?focusID=17888

  3. Android应用程序所包含的四种组件和DDMS

    关注用户组件         Activity                               编辑文本 .玩游戏 后台进程               Service           ...

  4. datejs lib

    // Get today's date Date.today(); // Add 5 days to today Date.today().add(5).days(); // Get Friday o ...

  5. javaweb 中的乱码问题

    一.post 方式 首先我们看下面一段代码,在该HTML中我们指定的编码为“UTF-8”,如图所示. 在该代码中,我们将表单数据提交给ParamServlet 处理 servlet 会将接收到的数据打 ...

  6. 转载---SQL Server XML基础学习<2>之--FOR XML AUTO/RAW

    本文主要介绍FOR XML 的 AUTO 模式和 RAW 模式 --AUTO 模式将查询结果以嵌套 XML 元素的方式返回.这不能较好地控制从查询结果生成的 XML 的形式. --如果要生成简单的层次 ...

  7. WinEdit7 破解方法

    最近遇到了winEdit7 超过试用期的问题,找了下解决方案. 这个靠谱,通过在每次退出时自动删除注册表信息,达到无限试用的目的: https://lttt.blog.ustc.edu.cn/2012 ...

  8. iOS iTunes文件共享

    众所周知苹果不允许用户查看文件,不同的应用之间文件也没有联系.从电脑上往手机传文件,也只能通过开放沙盒目录,传到对应的应用下. 有时候我们需要导入文件到应用沙盒下,或者从沙盒中导出文件.这就需要应用的 ...

  9. JavaScript中的Date

    Date 对象用于处理日期和时间. var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值. Date常用方法有: myDate.getYear(); //获取 ...

  10. IO流中的文件创建并且写入读取

    package com.java.inoutputstreamDmeo.www; import java.io.File;import java.io.FileInputStream;import j ...