/*次のサンプルは住所の単語 "新宿" の郵便番号を検索するものです。はじめに検索中を表す 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 |
本日 2007 年 7 月 7 日から Postal Search Ajax API の中に jQuery 1.1.2 を含めて配布するようにしました。今後 Postal Search Ajax API は jQuery の特徴を活かしつつ jQuery を緩やかに取り込みながら成長していきたいと思います。Postal Search Ajax API with jQuery では jQuery と $ のほかに Postal.jQuery と Postal.$ という別名でも jQuery オブジェクトを参照できます。
//jQuery や $、Postal.jQuery、Postal.$ は、どれをとっても結果は同じですので、Postal Search Ajax API を使う目的や主旨によって、そのオブジェクト(別名)を使い分けてもよいですね。
// Postal.$
//
Postal.$ = jQuery;
//
// Postal.jQuery
//
Postal.jQuery = jQuery;
var object = new Object();世の中のJavaScriptのプログラムはこのルールを前提に作られているものも少なくないと思います。このルールはIEやNN（Firefox）、Operaなど需要ブラウザのJavaScriptエンジンで実装されているので基本的に問題は起こらないのですが、Rhinoでは問題になります。Rhinoでは上記のオブジェクトからfor inでプロパティを取り出すとc、d、a、bの順に取り出されます。値と定義の順序を変えても同じ順序で取り出されるので名前を元に何らかのルールでソートしているようです。
object.a = 3;
object.b = 2;
object.c = 1;
object.d = 0;
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |
<script type="text/javascript" src="prototype.js"></script>次のように Postal Search Ajax API より後にロードするようにします。
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>もしくは Postal Search Ajax API をロードした後に jQuery.noConflict メソッドを呼び出してください。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="prototype.js"></script>jQuery と他の JavaScript ライブラリの併用方法は jQuery 公式サイトにも解説 jQuery JavaScript Library has a problem がありますので参考にしてください。
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
/*次の例のように Favicon Plugin は img タグを操作します。favicon メソッドに URL を指定すると
* Favicon 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($) {
// favicon
$.fn.favicon = function(url) {
var self = this;
var dir = url.split('/').splice(0, 3).join('/');
// http://example.com/foo.html -> http://example.com
self.hide();
self.attr('width', 16);
self.attr('height', 16);
self.attr('src', dir + '/favicon.ico');
self.one('load', function() {
self.show();
});
return self;
};
})(jQuery); // function($)
<div id="r1"></div>次の例は HTML ページの全 a タグを探し、その a タグのリンク先の favicon を表示しています。favicon は insertBefore メソッドを使って a タグの直前に追加しています。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('<img />')
.favicon('http://weather.goo.ne.jp/area/4410.html')
.appendTo('#r1');
});
//]]>
</script>
<script type="text/javascript">Favicon Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
//<![CDATA[
jQuery(function($) {
$('a').each(function(i, n) {
$('<img />')
.favicon(n.href)
.insertBefore(n);
});
});
//]]>
</script>
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |
This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}.JSON for jQuery というプラグインを jQuery ライクに書き換えてみました。
/*次のとおり、使い方は JSON for jQuery とほとんど変わりありません。JSON for jQuery は URL に埋め込むコールバック関数を {callback} で表しますが、このプラグインは {fn} としています。何でも短い名前が好みなんです。(^^
* JSONP 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($) {
// $.jsonp
$.jsonp = {
};
// jsonp
$.fn.jsonp = function(url, fn) {
var self = this;
var key = 'fn' + (new Date()).getTime();
var script = $(document.createElement('script'))
.attr('type', 'text/javascript')
.attr('charset', 'UTF-8')
.attr('src', url.replace(/{fn}/, 'jQuery.jsonp.' + key));
$.jsonp[key] = function(json) {
script.remove();
fn.apply(self, [json]);
};
$('head', document).append(script);
return self;
};
})(jQuery); // function($)
JSON for jQuery のアイディアとと実装の枠組みは同じですが、いくつか改善しています。
var url = 'http://express.heartrails.com/api/json?jsonp={fn}';
var params = jQuery.param({
method: 'getStations',
x: 経度,
y: 緯度,
});
jQuery('#station')
.text('loading...')
.jsonp(url+'&'+params, function(json) {
//TODO:
});
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |
/*以下は div タグに a タグを追加する例です。tag メソッドで a タグを生成し、gat メソッドでその a タグを div タグに追加しています。
* Tag 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($) {
// $.tag
$.tag = function(name) {
return jQuery('<' + name + ' />');
};
// tag
$.fn.tag = function(name) {
var self = this;
return self.pushStack($.tag(name));
};
// gat
$.fn.gat = function() {
var self = this;
return self.end().append(self);
};
})(jQuery); // function($)
<div id="r1"></div>以下は div タグに ul と li のリストタグ、さらに a タグを追加する例です。ul と li タグがスタックに積まれ、最終的に div タグまでさかのぼって追加されることになります。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r1')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/')
.text('Postal Search APIs & Solutions')
.gat();
});
//]]>
</script>
<div id="r2"></div>Tag Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r2')
.tag('ul')
.tag('li')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/digest.html')
.text('Postal Search Ajax API ダイジェスト')
.gat()
.gat()
.tag('li')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/reference.html')
.text('Postal Search Ajax API リファレンス')
.gat()
.gat()
.gat()
//]]>
</script>
| Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools |