Web ブラウザに依存したコードを書き分ける jQuery Browser Selector プラグイン #1

ホーム > Postal Search Ajax API with jQuery > Selectors

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

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

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

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

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

ダウンロード

jquery.browser.js (Uncompressed only)

(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 風に使えるので直感的でしょ。

<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>

jQuery Browser Selector プラグインは jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Web ブラウザに依存したコードを書き分ける jQuery Browser Selector プラグイン #1

ダウンロード

デモ

関連情報