簡単に設置できるスライダー jquery プラグイン
画像をスライダーするjqueryプラグイン
カテゴリー
カテゴリー: jquery
smoothScroll.js jquery について調べた。
どういう風に使うのかなぁ。
これをしようすると、スムーズにページ内の移動ができるようですね。
こちらに使用方法がありました。
リンクをタップすると画面の横からヌルっとサイドバーがでてくるjqueryです。
PageSlide という名ですね。
PageSlideにあるサンプルでは、スライドの指定方法は３パターンあるようです。
１．htmlのaタグのリンクテキストをタップ・クリックすると横からページがスライドして表示
<a href="_secondary.html" class="first">Link text</a>
<script>
$("a.first").pageslide();
</script>
２．htmlのaタグでページ内リンク（#modal)を指定して、タップしたときに同一ページ内のdivのid=”modal” の部分をスライドして表示
<a href="#modal" class="second">Link text</a>
<div id="modal" style="display:none">
<h2>Modal</h2>
１<a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
$(".second").pageslide({ direction: "left", modal: true });
</script>
３．htmlのaタグにjavascriptでファイルを指定、タップしたときにそのページをスライドして表示
href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>
実際にjqueryのPageSlide をダウンロードして自分のサイトに付け足してみました。
私の場合はsrobbin-jquery-pageslide-v2.0-0-gd00801f.zip というファイル名でした。
２．ダウンロードしたファイルを展開する。
展開するとフォルダの中身はこんな感じでした。
srobbin-jquery-pageslide-d00801f │ jquery.pageslide.css │ jquery.pageslide.js │ jquery.pageslide.min.js │ LICENSE.txt │ README.textile │ ├─lib │ jquery-1.7.1.min.js │ └─examples basic.html menu.png responsive.html _secondary.html
３．WEBサーバにファイルを配置する。
cssフォルダに jquery.pageslide.css を配置した。
jsフォルダにjquery.pageslide.min.js と jquery-1.7.1.min.jsを配置した。
４．htmlファイルの</body>の直前に記載するソース
今回はスマートフォン用なので フッター</footer>よりも下、かつ、</body>の直前に記載した。
html5なのでフッターにはfooterタグを使用してます。
<head>の中に、1と２のjavascriptのファイルの指定を記載すると、スライドしませんでした。
</footer>
<script src="js/lib/jquery-1.7.1.min.js"></script> ・・・１
<script src="js/jquery.pageslide.min.js"></script> ・・・２
<div id="modal">
<h2>Sidebar</h2>
<ul>
<li><a href="#">jquery</a></li>
<li><a href="#">スマートフォンサイト</a></li>
</ul>
<p class="close"><a href="javascript:$.pageslide.close()">Close</a></p>
</div>
<!--/modal-->
$(".first").pageslide();
$(".second").pageslide({ direction: "left", modal: true });
</body>
５． htmleの<head>にcssファイルを指定する。
cssを使用するので、<head>内にcssファイルのパスの指定は必須です。
<link rel="stylesheet" href="css/jquery.pageslide.css">
６．タップするとサイドバーがでてくるリンクを設定する。
<a href="#modal" class="second ">サイドメニュー</a>
リンク先は、ページ内の#modalです。 classにはsecondを指定し、javascriptの
$(".second").pageslide({ direction: "left", modal: true });
が動きます。
以上でござる。