2013/02/28
【jQuery】スペースが足りない時に使えるtoolbarjs
最近のプロジェクトでは、スペースがあまりないですが、格好いいかつ分かりやすいツールバーみたいのものを導入したいと思います。
そのとき、このtoolbar.jsというjQueryプラグインを思い出しました。
公式サイト（一応）の格好良さに釣られて、結構簡単に実装できるかなと思いましたが、そうではありません。。
ソースの書き方が明言されていない
ます、公式サイトで載せてる書き方（下記）を見て、
|
1 2 3 4 5 | $('#format-toolbar').toolbar({ content: '#format-toolbar-options', position: 'top', hideOnClick: true }); |
|
1 2 3 4 5 | <div id="format-toolbar-options"> <a href="#"><i class="icon-align-left"></i></a> <a href="#"><i class="icon-align-center"></i></a> <a href="#"><i class="icon-align-right"></i></a> </div> |
id=format-toolbar-optionsのdivは書いてありますが、id=format-toolbarのは書いてありません。
公式サイトのhtmlソースを見て拾いましたが、実装してみて下記の書き方しかうまくいきませんでした。
|
1 2 3 4 5 6 7 8 | <div style="width:5px;float:left;"> <div id="format-toolbar" class="settings-button"><i class="icon-wrench"></i></div> <div id="format-toolbar-options"> <a href="#"><i class="icon-arrow-up"></i></a> <a href="#"><i class="icon-arrow-down"></i></a> <a href="#"><i class="icon-trash"></i></a> </div> </div> |
id=format-toolbar-optionsのとid=format-toolbarのを同じdivに入れなければうまく表示出来できませんでしたが、
公式サイトのhtmlソースにはid=format-toolbar-optionsのとid=format-toolbarをばらばら書いてでも表示出来ています。。
何かが条件になっているのかよくわかりません。。
jQueryのバージョンに注意を
ソースをダウンロードしてから分かるですが、このプラグインはjquery1.7以上でしか動きません。
公式サイトにはjqueryのバージョンや、対応ブラウザなど一切書いてませんから、ちょっと不安です。
IE8は対応していることを確認できましたが。
結論
jQueryのプラグインの選び方をもっと慎重にしたいと思います。
Author Profile
スターフィールド編集部
SHARE
