下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

pull-to-reload

pull-to-reloadは、Webページ内で下へ引くだけでページをリフレッシュ(リロード)することができるスクリプトです。Webアプリケーションやシングルページのアプリケーションなどで、ユーザーに手軽にページをリロードさせたい時にはピッタリですね。

pull-to-reload

デモ

下に引っ張ることでページがリフレッシュされます。スマホアプリなどではよく見かける動作ですね。

リロードされている時は、画面上部に「Loading…」という文字が大きく表示されるので、現在ページが読み込まれている最中であることが瞬時に把握できると思います。

マークアップやJSの記述もシンプルで使いやすい仕様になっています。また、pull-to-reloadにはオプションもいくつか用意されています。

利用できるオプション項目は、refresh-element、content-element、border-height、height、font-size、threshold、pre-content、loading-content、callback-loadingです。

ボーダーの高さや文字の大きさなども、オプションから手軽に調整できるので、細かいカスタマイズをして使いたい人にもうれしいですね。

pull-to-reload

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives