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. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  2. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  3. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  4. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  5. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  6. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP