jQueryプラグイン Part1

半ば自分用のメモとして書きます。
ついでにご覧の方の参考になれば幸いです。


◯jqDock
MacのDock風エフェクト。
jquery.jqDock.min.jsはコンパクトバージョン。

そのエフェクトは素晴らしいんですが、なかなかビミョ〜なガイダンス（英語）しかありません。
しかもそのガイダンスまでAjaxバリバリで表示する徹底ぶり（上記リンクページ上部の「introduction」の行）。
結局、そのページのソースに良い感じの説明コメントが記載されていて、こちらの方が理論派には分かりやすいかもしれません。


ポイント

・jqDockとはどんなものか
アイコンの最大サイズはオリジナル画像のサイズです。
最小サイズは後述するオプション設定で変更できます。
htmlは非常にこざっぱりしていて、余計なタグやスクリプト記載はありません。
jquery.jqDock.jsとjquery.jqDock.min.jsとの違いについての説明は見当たりません。同じソースながら、コメントや記載をコンパクトにしたものがminバージョンなのかもしれません。

・prototype.jsとの共存は難しい、、かも

そもそも$()がぶつかっています。
なのでコンフリクトを防止するステップを追加するんですが（前回記載）、プラグインは当然コンフリクトのないjQueryオンリーの状態で書かれています。
jqDock自体を改造しないと使えません。
私は面倒なので改造しませんでした。
prototype.jsで重宝していたのは$()とAjax.Updater、Ajax.Requestだけだったので、同じ機能を持つjQueryであれば問題ありません。

・htmlの記載例

<div id='menu2' class='demo'>
    <a href='index.php?dt=2' title='Camera'>
        <img src='images/m2/Camera.png' alt='' />
    </a>
    <img src='images/m2/Floppy.png' alt='Floppy' title='Floppy' />
</div>

aタグでimgタグを囲んでも、imgタグのみでもDockのアイコンとして同じ振る舞いをします。
ただし、imgタグのみのアイコンにリンク等を設けるには、後述するJava Scriptが必要です。当然か。。。
画像数は考える必要がありません。jqDockの方で自動調整してくれるようです。
classの記載も気にする必要はありません。デモ用に使われてるCSS用のクラスなようです。

・あった方がよさげな初期設定Java Script

 jQuery(function($){
  $('div.dock>img').each(function(i){
      $(this).one('click', function(){ location.href = 'index.php?dt='+(i%5); return false; });
  });
  $('div.dock').each(function(i){
   var opts = {align:'right', size:60, distance:72, coefficient:1.5, labels:'ml', duration: 500};
   $(this).jqDock(opts);
  });

  $('div.dock a>img').not($('#icons a>img')).bind('click', function(){
   var Href = $(this).parent().get(0).href;
   if(Href && !/^javascript:/i.test(Href)){ //change location...
    location.href = Href;
   }else{ //trigger a click handler?...
    $(this).parent().trigger('click');
   }
   return false;
  });
 });

３行目：imgタグのみでリンクできる設定をしている部分ですね。
６行目：オプション設定の部分です。※詳細は後述
１０行目〜：imgタグでのクリックを適用しているセクション（と思われます）。

・オプション設定
ガイダンスを要約しました。他にもオプションはあるようですが、ひとまず基本動作設定を。

- align : 'top' , 'middle' , 'bottom' , 'left' , 'center' , 'right'
 デフォルトは'bottom'。
 動かないポイント（ライン）を設定します。
- coefficient : 数値
 デフォルトは1.5。
 カーソルからの距離とアイコンの拡大比率を設定する数値です。
 1がリニアです。
- distance : 整数
 デフォルトは54[pix]。
 アイコン拡大が反応するカーソルとの距離です。
- duration : 整数
 デフォルトは500[ms]。
 ドックが反応するまでの遅延設定です。マウスのon、off両方の共通値です。
- labels : ブーリアンまたは文字列 , true , 'tl' , 'tc' , 'tr' , 'ml' , 'mc' , 'mr' , 'bl' , 'bc' , 'br'
 デフォルトはfalse。
 文字列の意味は、
  't' : top
  'm' : middle
  'b' : bottom
  'l' : left
  'c' : center
  'r' : right

・スタイルシート
jqDockページのソースを元に説明しています。

-水平＆固定型：ブラウザ画面左上に固定される水平タイプです

#menu4 {position : absolute; top : 0px; left : 0px;}

-水平＆相対型：ページ構成に準じて配置される水平タイプです

#menu1 {position : relative; top : 100px; padding-left : 131px;}

-垂直＆固定型：ブラウザ画面右上に固定される垂直タイプです

#menu2 {position : absolute; top : 0px; right : 0px;, width : 50px;}

垂直＆相対型のサンプルがないので、できないのかな？？
個人的に今は必要ないので試してません。

docks(div.jpDock)の設定がabsoluteポジション、ゼロpadding, margin、かつoverflowがvisible、widthとheightが定まっている場合、デフォルトの背景色は、、↓

div.jpDock {background-color : transparent;}

ラベル(div.jqDockLabel)はabsoluteポジションでゼロmargin（topとleftも定義された上で）でのみ得られます。あとはあなた次第です。
デフォルトの設定は↓

div.jqDockLabel {border:0px none; padding:0px 4px; font-weight:bold; font-size:14px; font-style:italic; white-space:nowrap; color:#000000; background-color:transparent;}
div.jqDockLabelLink {cursor:pointer;}
div.jqDockLabelImage {cursor:default;}

設定例です↓
右側固定の垂直型、白地に小さい＆太字ではない＆深紅のラベル。

#menu2 div.jqDockLabel {color:#cc0000; background-color:#ffffff; padding:1px; font-size:12px; font-weight:normal;}

こんなもんだと思います、、が、まだちょっとしたモノがあったような…。
もっと分かりやすく書きたかったんですが、予想以上に手間なもんで。。ごめんなさい。