Google Material Design 滑動（拉）刷新： Material Refresh

Google Material Design 滑動（拉）刷新控件。

高性能

只支持移動

它使用CSS3+JavaScript開發，依賴于Zepto 和 jQuery。

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.baiduhome.net/lib/view/home/1425526901978