pull-to-reload

JavaScript

下へ引いてページをリフレッシュ(リロード)できる「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

jQuery.appearビューポート外のコンテンツ表示を防止できる「jQuery.appear」前のページ

かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」次のページZiehharmonika

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP