「jquery」カテゴリーアーカイブ

スマートフォンサイト用に画面の横からポイっとでてくるサイドバー jqueryのPageSlide

リンクをタップすると画面の横からヌルっとサイドバーがでてくるjqueryです。

PageSlide という名ですね。

PageSlideにあるサンプルでは、スライドの指定方法は3パターンあるようです。

1.htmlのaタグのリンクテキストをタップ・クリックすると横からページがスライドして表示

<a href="_secondary.html" class="first">Link text</a>
<script>
$("a.first").pageslide();
</script>

 

2.htmlのaタグでページ内リンク(#modal)を指定して、タップしたときに同一ページ内のdivのid=”modal” の部分をスライドして表示

<a href="#modal" class="second">Link text</a>
<div id="modal" style="display:none">
<h2>Modal</h2>
1<a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
$(".second").pageslide({ direction: "left", modal: true });
</script>

3.htmlのaタグにjavascriptでファイルを指定、タップしたときにそのページをスライドして表示

href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>

 

 

 

実際にjqueryのPageSlide をダウンロードして自分のサイトに付け足してみました。

1.PageSlide をダウンロードからダウンドード

私の場合はsrobbin-jquery-pageslide-v2.0-0-gd00801f.zip というファイル名でした。

 

2.ダウンロードしたファイルを展開する。

展開するとフォルダの中身はこんな感じでした。

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

 

3.WEBサーバにファイルを配置する。

cssフォルダに jquery.pageslide.css を配置した。

jsフォルダにjquery.pageslide.min.js と jquery-1.7.1.min.jsを配置した。

 

4.htmlファイルの</body>の直前に記載するソース

今回はスマートフォン用なので フッター</footer>よりも下、かつ、</body>の直前に記載した。

html5なのでフッターにはfooterタグを使用してます。

<head>の中に、1と2のjavascriptのファイルの指定を記載すると、スライドしませんでした。

</footer>

<script src="js/lib/jquery-1.7.1.min.js"></script> ・・・1
<script src="js/jquery.pageslide.min.js"></script> ・・・2

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

 

5. htmleの<head>にcssファイルを指定する。

cssを使用するので、<head>内にcssファイルのパスの指定は必須です。

<link rel="stylesheet" href="css/jquery.pageslide.css">

 

6.タップするとサイドバーがでてくるリンクを設定する。

<a href="#modal" class="second ">サイドメニュー</a>

リンク先は、ページ内の#modalです。 classにはsecondを指定し、javascriptの

$(".second").pageslide({ direction: "left", modal: true });

が動きます。

 

以上でござる。