jQuery PageSlide.js

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

使い方

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

HTML

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

CSS設定

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

jquery.pageslide.css

#pageslide {
/* These styles MUST be included. Do not change. */
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/* ここから下を必要に応じて設定する。 */
/* Specify the width of your pageslide here */
width: 99%;
padding: 1%;
/* These styles are optional, and describe how the pageslide will look */
background-color: #333;
color: #FFF;
-webkit-box-shadow: inset 0 0 5px 5px #222;
-moz-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

オプション

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

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

HTML

<div class="test">
<ul>
<li><a href="http://www.yahoo.co.jp/">yahoo.co.jp をスライド表示</a></li>
<li><a href="#SlideContents">#SlideContents をスライド表示</a></li>
</ul>
</div>
<div id="SlideContents">
<p>ここの内容が表示されます。</p>
</div>

サンプル

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

実行結果

#SlideContents2 をスライド表示

#SlideContents2

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

Javascript

$(function(){
$('.test2 a').pageslide({
direction: 'left',
modal : true
});
// ボタンを押すと閉じる
$('#SlideContents2 :button').on('click', function(){
jQuery.pageslide.close();
});
});

HTML

<div class="test2">
<ul>
<li><a href="#SlideContents2">#SlideContents2 をスライド表示</a></li>
</ul>
</div>
<div id="SlideContents2">
<h5>#SlideContents2</h5>
<p>
SlideContents2の内容が表示されます。
closeボタンを押さないと閉じません。
</p>
<button>close</button>
</div>

サンプル

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

実行結果

#SlideContents3

SlideContents3の内容

Javascript

$(function(){
$('.test3 :button').on('click', function(){
jQuery.pageslide({
direction: 'left',
href : '#SlideContents3'
});
});
});

HTML

<div class="test3">
<button>Slide</button>
</div>
<div id="SlideContents3">
<h5>#SlideContents3</h5>
<p>
SlideContents3の内容
</p>
</div>

jQuery PageSlide.js

使い方

HTML

CSS設定

jquery.pageslide.css

オプション

サンプル

実行結果

Javascript

HTML

サンプル

実行結果

#SlideContents2

Javascript

HTML

サンプル

実行結果

#SlideContents3

Javascript

HTML

参照サイト

KANTENNA.COM

ライブラリ

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

jQuery PageSlide.js

使い方

HTML

CSS設定

jquery.pageslide.css

オプション

サンプル

実行結果

Javascript

HTML

サンプル

実行結果

#SlideContents2

Javascript

HTML

サンプル

実行結果

#SlideContents3

Javascript

HTML

参照サイト

ライブラリ

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Other

wwebdeww.com