こんにちは。
今回はスマホで画面下部に引っ張って更新が実装できるJSライブラリ「Pull to Refresh.js」です。
アプリのように画面下部に引っ張るとリロードすることができるスクリプトを紹介します。
スマホで画面下部に引っ張って更新が実装できるJSライブラリ「Pull to Refresh.js」
Pull to Refresh.js
「Pull to Refresh.js」をダウンロードしてみよう！
https://github.com/BoxFactura/pulltorefresh.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「Pull to Refresh.js」を設置してみよう！
pulltorefresh.jsを/bodyの手前に読み込みます。
1 | <script src="pulltorefresh.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 | <script> PullToRefresh.init({ mainElement: 'body', onRefresh: function(){ window.location.reload(); } }); </script> |
デモのようにidを指定することもできますよ。
1 2 3 4 5 6 7 8 9 10 11 | <script> PullToRefresh.init({ mainElement: '#main', // above which element? onRefresh: function (done) { setTimeout(function () { done(); // end pull to refresh alert('refresh'); }, 1500); } }); </script> |
何となくJavaScriptを書いていた人が一歩先に進むための本
いかがでしたか。アプリでよくある機能をWebサイトに簡単に実装できますね。
以上でスマホで画面下部に引っ張って更新が実装できるJSライブラリ「Pull to Refresh.js」でした。
