開閉するサイドバーを作成するjavascript「PBB SideBar」

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加するこのページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

コンテンツを重視する観点から、メニューなどは必要に応じて開閉できると良いかもしれません。
PBB SideBarはエフェクト付きでサイドバーを開閉できるjavascriptです。
mooSideBar

使用方法
PBB SideBarからpbbsidebar.v1.00.jsを、mootoolsからmootools.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/pbbsidebar.v1.00.js"></script>
<script type="text/javascript">
window.onload = function() {
MySideBar = new PBBSideBar();
}
</script>

上記を記述したら何らかの要素にonclick="javascript:MySideBar.display();を付与すれば完成です。
<input type="submit" value="開/閉" onclick="javascript:MySideBar.display();">
またオプションとして以下のようなものがあります。
 ・position:出る場所
 ・width:幅(px)
 ・background-color:背景色
 ・opacity:透明度
 ・showDuration:開く速度
 ・showEffect:開くエフェクトの種類
 ・hideDuration:閉じる速度
 ・hideEffect:閉じるエフェクトの種類
開閉するサイドバーを作成するjavascript「PBB SideBar」サンプルでの例:
MySideBar = new PBBSideBar({
position : 'right',
styles: {
'width': '400',
'color': 'white',
'background-color': 'red',
'opacity': 0.6
},
showDuration: 500,
showEffect: Fx.Transitions.backOut,
hideDuration: 500,
hideEffect: Fx.Transitions.quadInOut
});

2007年12月01日

前の記事:Movable Typeのサイト内検索をAJAXで高速化する
次の記事:javascriptライブラリ「mootools」でアコーディオンメニュー

関連記事

コメント投稿











開閉するサイドバーを作成するjavascript「PBB SideBar」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

過去の記事

rss

ページトップに戻る