2007-07-19

Browser Selector Plugin for jQuery 1.1.2

Browser Selector Plugin はメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。

jQuery 自体はクロスブラウザ (Cross-browser) を指向しているので Browser Selector Plugin の存在は矛盾するかもしれません。また、ブラウザの依存性は、他の JavaScript ライブラリを活用したり、CSS を工夫すれば解決できることでもあります。

ただ、場面によって Web ブラウザの違いを JavaScript コードの中で書き分ける(たい)ことがあるのも確かです。Browser Selector Plugin はそのグレーなニーズを埋めるために作ってみたものです。

Browser Selector Plugin 自体はとてもシンプルです。browser メソッドに Web ブラウザを指定すると、その Web ブラウザのみに適用するメソッドチェーンが始まります。そして、browser メソッド以後は、通常どおり jQuery を操作します。最後に end メソッドを呼び出すと Web ブラウザのメソッドチェーンが終わります。

browser メソッドに指定する Web ブラウザの種類は $.browser.* と同じです。safari と opera、msie、mozilla を指定できます。

Browser Selector Plugin for jQuery ダウンロード
/*
* 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($)
次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。メソッドチェーンを途切る必要もないし、jQuery の Selector 風に使えるので直感的でしょ。

Browser Selector Plugin for jQuery サンプル
<div id="r"></div>

<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>
Browser Selector 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 件のコメント: