今日の人気記事

  1. ボックスからはみ出たテキストをドットに変換「dotdotdot」
  2. 同じ内容の入力フォームを追加・削除「Repeater」
  3. 入力フォームのフォーカスを自動でタブ移動「Autotab」
  4. 3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
  5. アンカータグに確認やポップアップ効果を追加「A+」

マウスオーバーでテーブル・カラム(列)のスタイルを変更「wholly」

スポンサーリンク

マウスオーバーでテーブル・カラム(列)のスタイルを変更する「wholly」を紹介します。

jQueryプラグイン「wholly」

このプラグインを適用するとマウスカーソルをテーブルのカラム(列)に重ねることで、その列のスタイルを変更することができます。

tableの要素を指定して、CSSを切り替える仕組みなので、ササッと実装できます。

スポンサーリンク

デモページにあるテーブルにマウスカーソルを重ねてみてください。

「wholly」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="whollyのデモでーす。">
<title>wholly - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.wholly.js"></script>
<style>
table { table-layout: fixed; border-collapse: collapse; margin: 20px; }
th,
td { padding: 5px 20px; border: 1px solid #ebebeb; }
th.wholly-highlight,
td.wholly-highlight { background: #ccc; }
</style>

<script>
$(function () {
  var table = $('table');
  table.wholly();
  table.on('wholly.mouseenter', 'td, th', function () {
    $(this).addClass('wholly-highlight');
  });
  table.on('wholly.mouseleave', 'td, th', function () {
    $(this).removeClass('wholly-highlight');
  });
});
</script>
</head>
<body>
<h1>whollyのデモでーす。</h1>
<p>テーブルにマウスカーソルを重ねてみてください。</p>
<table>
<thead>
<tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr>
</thead>
<tbody>
<tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr>
<tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr>
<tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr>
<tr><td>Mac OS X 10.3</td><td>Panther</td><td>2003年10月</td></tr>
<tr><td>Mac OS X 10.4</td><td>Tiger</td><td>2005年4月</td></tr>
<tr><td>Mac OS X 10.5</td><td>Leopard</td><td>2007年10月</td></tr>
<tr><td>Mac OS X 10.6</td><td>Snow Leopard</td><td>2009年8月</td></tr>
<tr><td>Mac OS X 10.7</td><td>Lion</td><td>2011年7月</td></tr>
<tr><td>Mac OS X 10.8</td><td>Mountain Lion</td><td>2012年7月</td></tr>
<tr><td>Mac OS X 10.9</td><td>Mavericks</td><td>2013年10月</td></tr>
</tbody>
</table>
</body>
</html>

jsファイルのダウンロード、その他オプションなどの詳細とはこちらからどうぞ。
» wholly

スポンサーリンク

関連記事(一部広告含む)