HOME > >

jQuery PageSlide.js

ページをスライドさせてコンテンツを表示させるjQueryプラグイン。

使い方

jQuery本体とpageslide.js、CSSファイルが必要となります。

HTML

  1.  
  2. <link href="jquery.pageslide.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4. <script type="text/javascript" src="jquery.pageslide.min.js"></script>
  5.  

CSS設定

スライドして表示される部分の幅などの設定はCSSで行います。 最初の部分は変更してしますと、正常に動作しなくなるので編集しないように気をつけましょう。

jquery.pageslide.css

  1.  
  2. #pageslide {
  3.     /* These styles MUST be included. Do not change. */
  4.     display: none;
  5.     position: absolute;
  6.     position: fixed;
  7.     top: 0;
  8.     height: 100%;
  9.     z-index: 999999;
  10.  
  11.     /* ここから下を必要に応じて設定する。 */
  12.  
  13.     /* Specify the width of your pageslide here */
  14.     width: 99%;
  15.     padding: 1%;
  16.  
  17.     /* These styles are optional, and describe how the pageslide will look */
  18.     background-color: #333;
  19.     color: #FFF;
  20.     -webkit-box-shadow: inset 0 0 5px 5px #222;
  21.     -moz-shadow: inset 0 0 5px 5px #222;
  22.     box-shadow: inset 0 0 5px 5px #222;
  23. }
  24.  

オプション

speed スライド完了までの時間。fast、normalまたはミリ秒で指定。デフォルトは200ミリ秒
direction 左右どちらからスライドさせるか。デフォルトはright
modal この値がfalseの場合、スライドして表示されたコンテンツ以外をクリックした場合、自動で閉じますがtrueの場合、閉じません。 もしtrueにした場合、閉じるボタンなどを設置して、$.pageslide.close()をコールする必要があります。デフォルトはfalseです。
iframe By default, linked pages are loaded into an iframe. Set this to false if you don’t want an iframe. (default=true)
href Override the source of the content. Optional in most cases, but required when opening pageslide programmatically (e.g. $.pageslide({ href: '#some-element' }); ) (default=null)

サンプル

aタグを対象に使用した場合、herf属性に設定された場所が表示されます。

実行結果

ここの内容が表示されます。

Javascript

  1. $(function(){
  2.     $('.test a').pageslide();
  3. });

HTML

  1.  
  2. <div class="test">
  3.     <ul>
  4.     <li><a href="http://www.yahoo.co.jp/">yahoo.co.jp をスライド表示</a></li>
  5.     <li><a href="#SlideContents">#SlideContents をスライド表示</a></li>
  6.     </ul>
  7. </div>
  8.  
  9. <div id="SlideContents">
  10.     <p>ここの内容が表示されます。</p>
  11. </div>
  12.  

サンプル

modalがtrueの場合、閉じる動作は自分で実装する必要があります。

実行結果

#SlideContents2

SlideContents2の内容が表示されます。 closeボタンを押さないと閉じません。

Javascript

  1. $(function(){
  2.     $('.test2 a').pageslide({
  3.         direction: 'left',
  4.         modal    : true
  5.     });
  6.    
  7.     // ボタンを押すと閉じる
  8.     $('#SlideContents2 :button').on('click', function(){
  9.         jQuery.pageslide.close();
  10.     });
  11. });

HTML

  1.  
  2. <div class="test2">
  3.     <ul>
  4.     <li><a href="#SlideContents2">#SlideContents2 をスライド表示</a></li>
  5.     </ul>
  6. </div>
  7.  
  8. <div id="SlideContents2">
  9.     <h5>#SlideContents2</h5>
  10.     <p>
  11.     SlideContents2の内容が表示されます。
  12.     closeボタンを押さないと閉じません。
  13.     </p>
  14.     <button>close</button>
  15. </div>
  16.  

サンプル

jQueryオブジェクトのメソッドではなくjQuery関数の関数(クラス関数)として利用することもできます。

実行結果

#SlideContents3

SlideContents3の内容

Javascript

  1. $(function(){
  2.     $('.test3 :button').on('click', function(){
  3.         jQuery.pageslide({
  4.             direction: 'left',
  5.             href     : '#SlideContents3'
  6.         });
  7.     });
  8. });

HTML

  1.  
  2. <div class="test3">
  3.     <button>Slide</button>
  4. </div>
  5.  
  6. <div id="SlideContents3">
  7.     <h5>#SlideContents3</h5>
  8.     <p>
  9.     SlideContents3の内容
  10.     </p>
  11. </div>
  12.