2007-07-16

oogo Plugin for jQuery 1.1.2

Delay Plugin for jQuery 1.1.2
このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索!」のような動きのある効果にも応用できそうですね。
検索ボックスにキーワードをカチカチと入力し、検索ボタンをクリック!のようなテレビ CM の結びをよく見かけます。いわゆる「○○で検索してください」という手法です。このキーワードをカチカチと入力する雰囲気を実現する jQuery プラグインを作ってみました。

oogo Plugin と名付けました。oo (オーオー) は「○○を検索してください」の「○○を」を、 go (ゴー) は「検索してください」を表現したつもりです。oogo Plugin は Delay Plugin for jQuery 1.1.2 に依存しますので、あわせて使ってください。

検索ボックスのキーワードを入力する input タグに oogo メソッドを適用します。oogo メソッドは、指定したキーワードを1文字ずつに分割し、その文字を Delay Plugin を使って 500 ミリ秒の間隔で1文字ずつ追加するようにします。キーワードを省略すると、事前に入力してあったキーワードを使うようにしています。

これにより、検索ボックスにキーボードでカチカチと入力したような効果が実現できています。

oogo Plugin for jQuery ダウンロード
/*
* oogo Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Depend on Delay Plugin for jQuery 1.1.2
* http://postal-search-apis-and-solutions.blogspot.com/
*/
(function($) {

// $.oogo
$.oogo = {

// $.oogo.interval
interval: 500
};

// oogo -- depend on Delay Plugin for jQuery
$.fn.oogo = function(val) {
var self = this;
self.each(function(i, n) {
$.each((val || n.value).split(''), function(i, v) {
jQuery(n).delay(function() {
this.value += v;
});
});
n.value = '';
});
$.resume($.oogo.interval);
return self;
};

})(jQuery); // function($)
次のサンプルは、Google の検索ボックス に FM/V のテレビ CM で話題になった「地底人は誰?」というキーワードを指定したものです。キーボードを使ってカチカチっと入力したかのように見えませんか?

oogo Plugin for jQuery サンプル
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript" src="jquery.oogo.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('input[@name=q]').oogo('地底人は誰?');
});
//]]>
</script>
oogo Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

0 件のコメント: