[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js

スマホやタブレットの便利操作、プルダウンするとリフレッシュできる機能をページに簡単に実装できるJavaScriptの軽量ライブラリを紹介します。

リフレッシュは範囲やトリガーを設定でき、通常のプルダウンしてリフレッシュする挙動だけでなく、ヘッダを残してコンテンツだけというのもできる優れ物。

サイトのキャプチャ

PulltoRefresh.js
PulltoRefresh.js -GitHub

PulltoRefresh.jsのデモ

デモはスマホ、タブレットでご覧ください。
※デスクトップ環境では動作しません。

という訳で、iPadでデモページを見てみました。
デモではリフレッシュ時に、アラートが表示されます(もちろん無しにできます)。

デモのキャプチャ

デモページ: iPadで表示

PulltoRefresh.jsは、オプションでプルダウンの位置を設定できます。
Basicではヘッダの下、コンテンツをプルダウンするとリフレッシュできます。

デモのキャプチャ

デモページ: Basic
ヘッダの下にリフレッシュが表示されており、ヘッダより下がリフレッシュされます。

通常の位置でのリフレッシュももちろん可能。

デモのキャプチャ

デモページ: Raw
ページ全体がリフレッシュされます。

しかも、特定の要素をトリガーにすることもできます。

デモのキャプチャ

デモページ: Trigger

PulltoRefresh.jsの使い方

HTML

HTMLはページを普通に実装するだけ大丈夫です。

外部ファイル

当スクリプトを外部ファイルとして記述します。

JavaScript

リフレッシュの対象とする要素(#main)を指定して、スクリプトを初期化します。
このコードは、デモ: Basicです。

ページ全体に適用する時は、「body」を指定します。

スクリプトのオプションでは、リフレッシュに必要な距離、アニメーションの時間、表示するアイコンやテキストを変更できます。

top of page

©2017 coliss