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

関連記事

  1. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  2. pixelate.js
  3. no-image
  4. PopCircle
  5. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  6. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

最近の記事

  1. M32ミニ
  2. CITTA TT5.0
  3. Kindle Oasis
  4. OWL-WDDESK01

アーカイブ

PAGE TOP