Browser Selector Plugin はメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。上記のとおり、以前に公開した Browser Selector Plugin は、メソッドチェーンを途切ることなく Selector 風の使い勝手を提案したプラグインでしたが、今回は jQuery の Selector 自体を拡張して、Selector 構文を使って Web ブラウザに依存したコードを書き分けることができるようにしました。
jQuery は Selector を拡張する仕組みも持っているのですね。こんなに簡単に！
Browser Selector Plugin for jQuery ダウンロード
/*次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。:browser と Web ブラウザの名前を指定して JavaScript コードを書き分けています。
* 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($)
Browser Selector Plugin for jQuery サンプル
<div id="r2"></div>次のサンプルは、上記のサンプルと同じですが、:browser を使わずに :msie や :mozilla のように Web ブラウザの名前を指定しています。:browser のショートカット(エイリアス) を表したものです。少し直感的な印象になりました。
<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 Selector Plugin for jQuery サンプル
<div id="r3"></div>Browser Selector Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。
<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>
なお、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 Techniques Jonathan Chaffer Karl Swedberg      by G-Tools |
