[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js
Post on:2016年12月12日
sponsors
スマホやタブレットの便利操作、プルダウンするとリフレッシュできる機能をページに簡単に実装できるJavaScriptの軽量ライブラリを紹介します。
リフレッシュは範囲やトリガーを設定でき、通常のプルダウンしてリフレッシュする挙動だけでなく、ヘッダを残してコンテンツだけというのもできる優れ物。
PulltoRefresh.js
PulltoRefresh.js -GitHub
PulltoRefresh.jsのデモ
デモはスマホ、タブレットでご覧ください。
※デスクトップ環境では動作しません。
という訳で、iPadでデモページを見てみました。
デモではリフレッシュ時に、アラートが表示されます（もちろん無しにできます）。
デモページ: iPadで表示
PulltoRefresh.jsは、オプションでプルダウンの位置を設定できます。
Basicではヘッダの下、コンテンツをプルダウンするとリフレッシュできます。
デモページ: Basic
ヘッダの下にリフレッシュが表示されており、ヘッダより下がリフレッシュされます。
通常の位置でのリフレッシュももちろん可能。
デモページ: Raw
ページ全体がリフレッシュされます。
しかも、特定の要素をトリガーにすることもできます。
デモページ: Trigger
PulltoRefresh.jsの使い方
HTML
HTMLはページを普通に実装するだけ大丈夫です。
|
1 2 3 4 5 6 7 8 9 |
<div id="header"> ヘッダ </div> <div id="main"> コンテンツ </div> <div id="footer"> フッタ </div> |
外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="pulltorefresh.js"></script> </body> |
JavaScript
リフレッシュの対象とする要素（#main）を指定して、スクリプトを初期化します。
このコードは、デモ: Basicです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> PullToRefresh.init({ mainElement: '#main', // above which element? onRefresh: function(){ var promise = new Promise( function(resolve, reject){ setTimeout(()=>{ resolve(); alert('refresh'); }, 1500); } ); return promise; } }); </script> |
ページ全体に適用する時は、「body」を指定します。
|
1 2 3 4 5 6 |
<script> PullToRefresh.init({ mainElement: 'body', onRefresh: function(){ window.location.reload(); } }); </script> |
スクリプトのオプションでは、リフレッシュに必要な距離、アニメーションの時間、表示するアイコンやテキストを変更できます。
sponsors
