jquery簡易プラグイン:リンク範囲拡張

プラグイン作成の練習で、リンク範囲を拡張するプラグインを作ってみた。

<a>で囲ったところよりも広範囲をクリック範囲にします。
例えばこんな、一覧で項目を選ぶと詳細を表示させたいテーブルで使うと
行のどこをクリックしてもページ遷移できるようにできます。

氏名 ふりがな ステータス 登録 更新
山田 太郎 やまだ たろう 登録済 2012/05/05 10:00 2012/06/01 15:30
田中 洋子 たなか ようこ 仮登録 2012/06/01 12:00 2012/06/01 12:00
高橋 健太 たかはし けんた 登録済 2012/04/10 09:00 2012/06/01 10:00
佐藤 優子 さとう ゆうこ 登録済 2012/05/05 10:00 2012/06/01 9:00

 プラグイン

	(function($){
		$.fn.clickArea = function() {
			return this.each(function() {
				var url = $(this).find('a').attr('href');
				if(url) {
					$(this).css('cursor','pointer').click(function(){
						location.href = url;
					})
				}
			});
		};
	})(jQuery);

設定

$('対象オブジェクト').clickArea();

例のような一覧テーブルで使いたい場合は、こんな感じ。

$('tr').clickArea();

挙動などすこしくわしく…

飽くまで簡易版ということで、…大雑把です。

拡張範囲をクリックしたとき遷移するURLは
対象オブジェクトの子孫にあるaを探し1件目に見つかったものが適用されます。

a要素が見つからなかったら、拡張リンクは無効。何もおこりません。

2件以上のa要素が見つかった場合は1件目が拡張エリアクリック時の遷移先になります。
2件目以降のaは生きたままなので、リンクを直接クリックすれば個別のリンク先へ遷移します。

また時間みつけて動作サンプルも設置します!
大したソースではないのですが、ご入用の場合は自由に使って下さい。

ただ、損害が出ても当方では責任をお取り致しかねます。
すみませんが、そこだけご了承いただき各自の責任でご使用下さいませ。

関連記事

Pocket