2007-08-12

Browser Selector Plugin for jQuery アップデート

Browser Selector Plugin for jQuery 1.1.2
Browser Selector Plugin はメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。
上記のとおり、以前に公開した Browser Selector Plugin は、メソッドチェーンを途切ることなく Selector 風の使い勝手を提案したプラグインでしたが、今回は jQuery の Selector 自体を拡張して、Selector 構文を使って Web ブラウザに依存したコードを書き分けることができるようにしました。

jQuery は Selector を拡張する仕組みも持っているのですね。こんなに簡単に!

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 : []);
};

// :browser
$.extend($.expr[':'], {
'browser': 'jQuery.browser[m[3]]',
'msie': 'jQuery.browser["msie"]',
'mozilla': 'jQuery.browser["mozilla"]',
'opera': 'jQuery.browser["opera"]',
'safari': 'jQuery.browser["safari"]'
});

})(jQuery); // function($)
次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。:browser と Web ブラウザの名前を指定して JavaScript コードを書き分けています。

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

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r2:browser(msie)')
.css('color', 'blue')
.css('margin', '.5em 0');
$('#r2:browser(mozilla)')
.css('color', 'red')
.css('margin', '1em 0')
$('#r2')
.text('Postal Search APIs & Solutions')
});
//]]>
</script>
次のサンプルは、上記のサンプルと同じですが、:browser を使わずに :msie や :mozilla のように Web ブラウザの名前を指定しています。:browser のショートカット(エイリアス) を表したものです。少し直感的な印象になりました。

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

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r3:msie')
.css('color', 'blue')
.css('margin', '.5em 0');
$('#r3:mozilla')
.css('color', 'red')
.css('margin', '1em 0')
$('#r3')
.text('Postal Search APIs & Solutions')
});
//]]>
</script>
Browser Selector Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

なお、jQuery のプラグインを作る方法や Selector を拡張する方法は 『Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques』 を参考にしています。この洋書は実例に富んでいて、アイディアを支えてくれます。

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