tableの見たいところをハイライト表示してくれるjQueryプラグイン「jQuery HighTabler Plugin」

長い文章を読んでいると、どこを読んでいるかわからなくことがあります。
そんな時、読んでいるところをハイライト表示してくれるとわかりやすくなります。
jQuery HighTabler Pluginはそれを実現するjQueryプラグインです。

使用方法

jQuery HighTabler Plugin | JB is Programmingからjquery.hightabler-0.0.1.jsをjQueryからjquery.jsをダウンロードします。

<script src="/test/js/jquery-1.4.4.min.js" type="text/javascript"></script>	
<script src="/test/js/jquery.hightabler-0.0.1.js" type="text/javascript"></script>
<script>
$(function () {
	$("#id名").click(function(e){ //ハイライトさせる時にクリックさせるid
		$.hightabler ("id2",{ //ハイライト対象のtable id
			closePanelText:"閉じる", //閉じるボタンテキスト
			closePanelClass:"cursorspacer" //閉じるボタンのCSS
		});
	}); 
});
</script>
あとは下記のようにhtmlを記述すれば完成です。

<div id="id名">ハイライトさせる</div>
<table id="id2">
<tbody>
	<tr>
		<td>テキスト</td>
	</tr>
<!-- 以下tr分 -->
</tbody>
</table>
tableってのがあれですが、どこかで使えそうなプラグインです。

サンプル

High My Table
HighTabler is a jQuery plugin which Highlights the rows of a table. Start effect by pressing the above High My Table link. After that, the effect will start and it will focus on the first table row. To go to the next row, simply click on the bottom panel or press the right arrow key. To go to the previous table row, just click on the top panel or press your left arrow key.
It does work on most browsers (including IE9) but not on IE8, IE7, IE6 because Internet Explorer is stupid. I tried to make it work but I couldnt. I am still trying.
If you like this effect, you may also want to check Highliner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamt. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamd
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamt. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamd
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamt. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquam gravid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor aliquam lacinia. Nullam non dui nunc. Nulla facilisi. Nam quis pretium nunc. Ut sollicitudin sapien pretium ante consequat ac varius ipsum egestas. Aliquamd
Javascriptサンプルページ一覧
skuare.net