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

jopen 5年前

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