今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. 左右にスクロールできるタブメニュー「ScrollTabs」
  3. テーブルをレスポンシブ対応に「rt Responsive Tables」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

マウスオーバーでテーブルに照準を「Cross Hairs」

スポンサーリンク

マウスオーバーでテーブルに照準をつけてくれるプラグイン「Cross Hairs」を紹介します。

jQueryプラグイン「Cross Hairs」

このプラグインを使えば、マウスオーバーするとクロス(十字)の照準をテーブルに付加することができます。

「行の項目」と「列の項目」を見合わせる必要があるようなでっかいテーブルには便利なプラグインですね。

例えば、「九九の表」とかでしょうか。

スポンサーリンク

それでは、デモページのテーブルをご覧ください。

「Cross Hairs」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Crosshairs のデモでーす。">
<title>Crosshairs - jQueryプラグイン</title>
<style>
.rowHighlight {
  background-color: blue;
}
.columnHighlight {
	background-color: blue;
}
</style>
</head>
<body>
<h1>Crosshairs のデモでーす</h1>
<table width="100%" cellspacing="0" class="tbl">
<tbody>
  <td></td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
<tr>
  <td>1</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
<tr>
  <td>2</td>
  <td>2</td>
  <td>4</td>
  <td>6</td>
  <td>8</td>
  <td>10</td>
  <td>12</td>
  <td>14</td>
  <td>16</td>
  <td>18</td>
</tr>
<tr>
  <td>3</td>
  <td>3</td>
  <td>6</td>
  <td>9</td>
  <td>12</td>
  <td>15</td>
  <td>18</td>
  <td>21</td>
  <td>24</td>
  <td>27</td>
</tr>
<tr>
  <td>4</td>
  <td>4</td>
  <td>8</td>
  <td>12</td>
  <td>16</td>
  <td>20</td>
  <td>24</td>
  <td>28</td>
  <td>32</td>
  <td>36</td>
</tr>
<tr>
  <td>5</td>
  <td>5</td>
  <td>10</td>
  <td>15</td>
  <td>20</td>
  <td>25</td>
  <td>30</td>
  <td>35</td>
  <td>40</td>
  <td>45</td>
</tr>
<tr>
  <td>6</td>
  <td>6</td>
  <td>12</td>
  <td>18</td>
  <td>24</td>
  <td>30</td>
  <td>36</td>
  <td>42</td>
  <td>48</td>
  <td>54</td>
</tr>
<tr>
  <td>7</td>
  <td>7</td>
  <td>14</td>
  <td>21</td>
  <td>28</td>
  <td>35</td>
  <td>42</td>
  <td>49</td>
  <td>56</td>
  <td>63</td>
</tr>
<tr>
  <td>8</td>
  <td>8</td>
  <td>16</td>
  <td>24</td>
  <td>32</td>
  <td>40</td>
  <td>48</td>
  <td>56</td>
  <td>64</td>
  <td>72</td>
</tr>
<tr>
  <td>9</td>
  <td>9</td>
  <td>18</td>
  <td>27</td>
  <td>36</td>
  <td>45</td>
  <td>54</td>
  <td>63</td>
  <td>72</td>
  <td>81</td>
</tr>
</tbody>
</table>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.crosshairs.js"></script>
<script>
  $(".tbl").crosshairs();
</script>
</body>
</html>
スポンサーリンク

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