| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

Google Material Design 滑动(拉)刷新: Material Refresh

Google Material Design 滑动(拉)刷新控件。

高性能

只支持移动

它使用CSS3+JavaScript开发,依赖于ZeptojQuery

Types and preview

Type1:Above surface(default)

Type2:Below surface

Type3:Button action

示例

在线示例

快速入门

安装它

Includematerial-refresh.min.jsandmaterial-refresh.min.cssin your target html file.

<link rel='stylesheet' href='material-refresh.min.css'/>    <script src='material-refresh.min.js'></script>

Cause it is a plugin forZeptoorjQuery, so we also need to includeZeptoorjQuery:

<script src='zepto.js'></script> <!-- or include jQuery.js--> <script src='jQuery.js'></script>

Usually, we will combine and compress all the css or js, depend on your needs.

You can also install it via Bower or npm:

bower install --save material-refresh
npm install --save material-refresh

基本用法

Example forType1: Above surface (default):

1.Instantiation:

mRefresh();

2.Finish the refresh and hide it:

mRefresh.resolve();

If you don't use this method, refesher will stop after the maxTime(Default: 6000ms).

Relations of three types

  • Type1andType2can not use in the same time.
  • Type3is depend onType1orType2, cause it will determine the refresher position
  • Type3and (Type1orType2) can use in the same time.

项目主页:http://www.open-open.com/lib/view/home/1425526901978

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1425526901978.html
移动Web开发框架 移动开发 Material Refresh