Nakajiman Software Blog: 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>