[JS]これは楽しい!スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js

スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。

サイトのキャプチャ

Hook.js

Hook.jsのデモ

ページを下に引っ張ると、スマフォのようにページをリフレッシュします。

デモのキャプチャ

Hook.js

最上部に戻ってからの上方向スクロールでもリフレッシュするようです。
普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、

Hook.jsの使い方

実装は簡単で、2ステップです。

Step 1: 外部ファイル

jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

Step 2: リフレッシュの表示

あとは、リフレッシュ時に表示するコンテンツを用意します。
コンテンツは、<body>のすぐ後に配置してください。

<div id="hook">
	<div id="loader">
		<div class="spinner"></div>
	</div>
	<span id="hook-text">Reloading...</span>
</div>

top of page

©2017 coliss