/*次のサンプルは住所の単語 "新宿" の郵便番号を検索するものです。はじめに検索中を表す loading ... というテキストを表示し、その後 coder メソッドを使って住所の単語から郵便番号を検索しています。郵便番号が見つかったときは、前述の loading... を上書きして郵便番号をリスト表示しています。
* Postal Coder 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.
*/
(function($) {
// $.coderSettings
$.coderSettings = {
timeout: 30
};
// $.coderSetup
$.coderSetup = function(settings) {
jQuery.extend($.coderSettings, settings);
};
// $.coder
$.coder = function(a, fn) {
var coder = new Postal.Coder($.coderSettings);
coder.onload = function() {
fn(coder.response, coder.status);
};
coder.onerror = function() {
fn([], coder.status);
};
coder.send(a) || setTimeout(function() {
fn([], 200);
}, 10);
};
// coder
$.fn.coder = function(a, fn) {
var self = this;
$.coder(a, function() {
self.each(fn, arguments);
});
return self;
};
})(jQuery); // function($)
<div id="r"></div>検索のタイムアウトを長くするときは $.coderSetup メソッドを使います。タイムアウトの初期値は30秒です。通常は変更せずそのまま使います。$.coderSetup メソッドは Postal.Coder クラス のコンストラクタのオプションに対応します。
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?"></script>
<script type="text/javascript" src="jquery.coder.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.text('Loading ...')
.coder('新宿', function(response) {
var ul = $('<ul />');
$.each(response, function() {
$('<li />')
.text(this.c)
.appendTo(ul);
});
$(this)
.empty()
.append(ul);
});
});
//]]>
</script>
$.coderSetup({
timeout: 180
});
Postal Coder Plugin は 2007年8月上旬から Postal Search Ajax API に含めて配布します。それまでは Postal Coder Plugin をダウンロードしてお使いください。Postal Coder Plugin のライセンスは jQuery と同じにしておきます。
/*次のサンプルは郵便番号 160-0021 の住所を検索するものです。はじめに検索中を表す loading ... というテキストを表示し、その後 lookup メソッドを使って郵便番号から住所を検索しています。住所が見つかったときは、前述の loading... を上書きして住所を表示しています。
* Postal Lookup 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.
*/
(function($) {
// $.lookupSettings
$.lookupSettings = {
timeout: 30
};
// $.lookupSetup
$.lookupSetup = function(settings) {
jQuery.extend($.lookupSettings, settings);
};
// $.lookup
$.lookup = function(c, fn) {
var lookup = new Postal.Lookup($.lookupSettings);
lookup.onload = function() {
fn(lookup.response, lookup.status);
};
lookup.onerror = function() {
fn([], lookup.status);
};
lookup.send(c) || setTimeout(function() {
fn([], 200);
}, 10);
};
// lookup
$.fn.lookup = function(c, fn) {
var self = this;
$.lookup(c, function() {
self.each(fn, arguments);
});
return self;
};
})(jQuery); // function($)
<div id="r"></div>検索のタイムアウトを長くするときは $.lookupSetup メソッドを使います。タイムアウトの初期値は30秒です。通常は変更せずそのまま使います。$.lookupSetup メソッドは Postal.Lookup クラス のコンストラクタのオプションに対応します。
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?"></script>
<script type="text/javascript" src="jquery.lookup.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.text('Loading ...')
.lookup('160-0021', function(response) {
if (response.length > 0) {
var addr = response[0];
$(this).text(addr.a);
}
});
});
//]]>
</script>
$.lookupSetup({
timeout: 180
});
Postal Lookup Plugin は 2007年8月上旬から Postal Search Ajax API に含めて配布します。それまでは Postal Lookup Plugin をダウンロードしてお使いください。Postal Lookup Plugin のライセンスは jQuery と同じにしておきます。
function オブジェクト名() {
[native code]
}
オブジェクト名、"[native code]"どちらもありません。Safariでオブジェクト名を調べる場合はinstanceof演算子を使って調べることになりそうです。またネイティブコードを含む関数かどうかの判定は、「組み込みオブジェクト = ネイティブコードを含む関数」という前提条件をつければ"[function]"はネイティブコードを含む関数とすることができます。[function]
このコードを実行すると次の結果になります。var array = ["a","b","c"];
array[0] = void 0;
for(var name in array)
alert(name);
alert(array.hasOwnProperty(0));
//Internet Explorer、Opera、Mozilla(Firefox)
0
1
2
true
//Safari
1
2
false
 | Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg      by G-Tools |
/*次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。メソッドチェーンを途切る必要もないし、jQuery の Selector 風に使えるので直感的でしょ。
* Browser Selector 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.
*/
(function($) {
// browser
$.fn.browser = function(expr) {
var self = this;
return self.pushStack($.browser[expr] ? self : []);
};
})(jQuery); // function($)
<div id="r"></div>Browser Selector Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.browser('msie')
.css('color', 'blue')
.css('margin', '.5em 0')
.end()
.browser('mozilla')
.css('color', 'red')
.css('margin', '1em 0')
.end()
.text('Postal Search APIs & Solutions')
});
//]]>
</script>
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |
このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索！」のような動きのある効果にも応用できそうですね。検索ボックスにキーワードをカチカチと入力し、検索ボタンをクリック！のようなテレビ CM の結びをよく見かけます。いわゆる「○○で検索してください」という手法です。このキーワードをカチカチと入力する雰囲気を実現する jQuery プラグインを作ってみました。
/*次のサンプルは、Google の検索ボックス に FM/V のテレビ CM で話題になった「地底人は誰？」というキーワードを指定したものです。キーボードを使ってカチカチっと入力したかのように見えませんか?
* 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($)
<script type="text/javascript" src="jquery.js"></script>oogo Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
<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>
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |
/*次のサンプルは、テキストを入力して実行ボタンをクリックすると、入力したテキストをタイプライタ風に再現するものです。
* Delay 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.
*/
(function($) {
// $.delay
$.delay = {
// $.delay.queue
queue: [],
// $.delay.timer
timer: null,
// $.delay.pause
pause: function() {
if (!$.delay.timer)
return;
clearInterval($.delay.timer);
$.delay.timer = null;
}
};
// $.resume
$.resume = function(interval) {
$.delay.pause();
$.delay.timer = setInterval(function() {
var fn = $.delay.queue.shift();
fn ? fn() : $.delay.pause();
}, interval || 10);
};
// delay
$.fn.delay = function(fn) {
var self = this;
$.delay.queue.push(function() {
self.each(fn);
});
return self;
};
})(jQuery); // function($)
<form onsubmit="run(this.q.value); return false;">Delay Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
<input type="text" name="q" value="Tag Plugin for jQuery 1.1.2" />
<input type="submit" name="g" value="実行" />
</form>
<p id="r"></p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript">
//<![CDATA[
function run(q) {
$.each(q.split(''), function(i, v) {
$('<span />')
.text(v)
.delay(function() {
$('#r').append(this);
});
});
$.resume(200);
}
//]]>
</script>
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |