-
(en)
"Cursor jQuery Plugin" is a jQuery plugin provides a movable cursor within the HTML elements, like the Gmail and Google Reader cursor. Combined with a keyboard shortcuts, you'll be able to provide a good UI.
-
(ja)
GmailやGoogle Readerで見かけるカーソル移動が出来るようになるjQueryプラグインです。 キーボードショートカットと組み合わせて使うと、UIの幅が広がります。
Cursor jQuery Plugin / 2min Intro Movie - YouTube
- jQuery 1.4.0 or higher
$('#list').cursor();
$('#list').cursor.next();
$('#list').cursor.prev();
console.log($('#list').cursor.current());
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cursor.min.js"></script>
<script type="text/javascript">
$(function(){
$('#list').cursor(); /* init */
/* bind action for cursor move */
$('#up').bind('click', function(){$('#list').cursor.prev();return false;});
$('#down').bind('click', function(){$('#list').cursor.next();return false;});
});
</script>
<style type="text/css">
.pointed{background:#ffedab;}
</style>
</head>
<body>
<h1>Cursor jQuery Plugin Example</h1>
<h2>List</h2>
<ul id="list">
<li>top</li>
<li>middle</li>
<li>CLICK ME !!!</li>
<li>bottom</li>
</ul>
<h2>Click this</h2>
<a id="up" href="#">UP</a> <a id="down" href="#">Down</a>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js"></script>
<script type="text/javascript" src="jquery.cursor.min.js"></script>
<script type="text/javascript">
$(function(){
$('#list').cursor({cursorElement: 'tr', currentClassName: 'cur'}); /* init */
/* binding keyboard */
shortcut.add('j',function(){$('#list').cursor.next();}); /* vim like */
shortcut.add('k',function(){$('#list').cursor.prev();}); /* vim like */
shortcut.add('Down',function(){list.cursor.next();});
shortcut.add('Up',function(){list.cursor.prev();});
});
</script>
<style type="text/css">
.cur td{background:#ffedab;}
</style>
</head>
<body>
<h1>Cursor jQuery Plugin Example</h1>
<h2>List</h2>
<table id="list">
<tbody>
<tr><td>1st</td></tr>
<tr><td>2nd</td></tr>
<tr><td>CLICK ME !!!</td></tr>
<tr><td>3rd</td></tr>
<tr><td>4th</td></tr>
</tbody>
</table>
</body>
</html>
-
cursorElement : String
default=
'li'(en) N/A
(ja) cursor()対象の子エレメントのうち、カーソル移動対象となるエレメントを指定します。
-
currentClassName : String
default=
'pointed'(en) N/A
(ja) フォーカスが当たっているエレメントに付与するクラス名を指定します。
-
debug : Boolean
default=
false(en) for debugging, using console.debug.
(ja) console.debugを使ってデバッグ用情報を出力するようになります。
-
.cursor.next()
(en) move to next element and return move source element.
(ja) 次のエレメントに移動します。その際、移動元のエレメントを返します。
-
.cursor.prev()
(en) move to prev element and return move source element.
(ja) 前のエレメントに移動します。その際、移動元のエレメントを返します。
-
.cursor.current()
(en) return focused element.
(ja) フォーカスが当たっているエレメントを返します。
(en) "Cursor jQuery Plugin" released under the MIT license (MIT-LICENSE.txt)
(ja) "Cursor jQuery Plugin"は MITライセンスで配布してます。 (MIT-LICENSE.txt)
[EoF]