開閉するサイドバーを作成する「PBB_SideBar」


(既にPBB SideBarは配布されていないようです (Googleに尋ねても見つからない)。記事を消すのはもったいないため、そのまま置いておきます)
カッコよく開閉できるサイドバー「PBB SideBar」 …ですが、そのままだとただ開閉するだけで、何もできませんでした。

そこで、MRBで少しコードを改修し、内容を直接HTMLで書き込めるようにしました。
仮にJavaScriptがOFFになっていても、コンテンツの一部として普通に表示されます。

  1. ダウンロード
  2. 使用方法
  3. オプション

# ダウンロード


別途、MooToolsからmootools.jsをダウンロードしてください。

_^_

# 使用方法

<script type="text/javascript" src="./mootools.js"></script>
<script type="text/javascript" src="./pbbsidebar.mrb.js"></script>
<script type="text/javascript">
window.onload = function() {
MySideBar = new PBBSideBar();
}
</script> 

上記を記述したらアンカー要素などにonclick="javascript:MySideBar.display();を追記してください。

<a onclick="javascript:MySideBar.display();">Open<->Close</a>

_^_

# オプション

以下の通り。


例:
MySideBar = new PBBSideBar({
position : 'left',
styles: {
'width': '500',
'color': 'white',
'background-color': 'red',
'opacity': 0.6
},
showDuration: 500,
showEffect: Fx.Transitions.backOut,
hideDuration: 500,
hideEffect: Fx.Transitions.quadInOut
});

_^_

# Related Page(s)

タグ:JavaScript


HOME2011年の記事開閉するサイドバーを作成する「PBB_SideBar」

HOMEHOME CategoryCategory HistoryHistory

Site Search :

[HTML link code]
[PR]セール品のみ検索もできるAmazon検索