wiss inc

WISS inc.

DIV要素をHOVER指定できるリンクにする

core. jQuery拡張のBiggerlinkがあまりに素敵なので。

リスト表示ブロック内に写真と文字を配置するような場合でもごっそりリンク領域にできると嬉しいです、ポータルなどで活用できそうです。Aタグをブロック要素にすることでも可能ですが構造的に限界があります。これをDojoで出来るかやってみました。

まず、マウスオーバー時に自動追加されるHOVER用ののスタイルを定義(初期値.hover)。追加されるクラスは既存のクラスの上位に配置されるようなので"!important"が必要です。

<style type="text/css">	
.hover {
	cursor: pointer;
	background-color:#DAF1F1 !important;
}
.hover a:link,.hover a:visited {
	color: #006666 !important;
}
.hover .bar {
	background-color:#C7D8C6 !important;
}
</style>

HTML部分はこんな感じ、ここではCSSクラス"links"がリンクになります。
<div class="listBox links">
  <strong><a href="http://...">Wiss</a></strong>
  <div>
    Dojo (Dojo Toolkit)は...<br/>
    <a href="http://...">Read more</a>
  </div>
</div>
・・・以上の繰り返し

スクリプトはbiggerlinkの仕様を参考にしました。
<script type="text/javascript">
function biggerlink(opts) {
  var settings = { hoverclass:'hover', 
    targetclass:'hot' };
  if (opts) for (var k in opts) settings[k] = opts[k];
  //対象クラスすべてに処理
  dojo.query("."+settings.targetclass).forEach(
    function(el){
      dojo.connect(el,"onmouseover",function(){
        dojo.addClass(el,settings.hoverclass);
      });
      dojo.connect(el,"onmouseout",function(){
        dojo.removeClass(el,settings.hoverclass); 
      });
      dojo.connect(el,"onclick",function(e){
        var o = dojo.query("a",el)[0]; if (!o) return;
        window.location = o.href;
        e.stopPropagation(); //イベントの伝搬を中止
        e.preventDefault();  //デフォルト処理停止
      });
    }
  );
}
</script>

サンプルでは効果を確認するため、ボタンに"biggerlink({targetclass:"links"})"を割り当てています。実際は、dojo.addOnLoad などで呼びます。

リンクに変更したいクラス(targetclass)、HOVER時に付加するクラス(hoverclass)を関数(biggerlink)のパラメータで指定すると対象のDIV要素すべてに対して、そのDIV要素内の最初のAタグのリンクを参照して、各イベントを自動割り当てします。

サンプル:


※jQueryのBiggerlinkも同じなのですが、taget="_blank"には対応できませんでした。

TITLE