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. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  2. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  3. Babylon Grid
  4. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP