Nullyのぶろぐ

仙台から東京へ転勤したエンジニアのブログ

jQueryプラグイン jQueryBreadcrumbを作りました

会社の方からこんなパンくずできたらおもろいよねー!

って言われたので、jQueryプラグインのおさらいをかねて作ってみました。

jQueryBreadcrumbとは

パンくずにアニメーションをかけることができるプラグインです。

デジタルチックなサイトに合いそうなプラグインです。

jQueryBreadcrumbのダウンロード

ソースコード基本的Githubで管理しています。

jQueryBreadcrumbはこちらからダウンロードしてください。

jQueryBreadcrumbの使い方

他のjQueryプラグイン同様に、jQueryを読み込んでからjQueryBreadcrumbを読み込ませます。

[CC lang="html"]

[/CC]

読み込ませたらば、パンくずを囲っている要素を対象に、イカのように記述します。

[CC lang="html"]

jQuery(function(){

jQuery(".breadcrumb").breadcrumb();

});

[/CC]

これで指定されたパンくずがアニメーションしながら表示されます。

指定可能なオプション

jQueryBreadcrumbは多数のオプションを指定出来ます。

指定できるオプションは以下のとおりです。

timer

アニメーションを繰り返す時間。

数値で指定します。

初期値は100ms。

animTime

アニメーションの時間。

数値で指定します。

初期値は50ms。

isVertical

縦方向のアニメーションの指定。

trueなら縦方向のアニメーション、falseなら横方向のアニメーション。

初期値はfalse。

not

アニメーションさせたくない要素のセレクタ

初期値はnull。

lastItemClass

パンくずの最後の要素に付けるクラス名。

初期値はbreadcrumb-last。

easing

jQueryEasingプラグインのイージング名。

初期値はnull。

※アニメーション速度が早いとイージングの効果は殆どみられません。

onComplete

アニメーション完了後のコールバック。

onStep

アニメーション中に呼び出されるコールバック。

DEMO

デモはこちらから。

終りに

作ってみたはいいけど、実用性はどうなんだ!と個人的に突っ込みを...いやなんでもないです。

所詮ツールであって、使い方はユーザーの発想にもよってきますしね!

使っていただけたら嬉しいですけど、何番煎じなのかはわからないです^q^