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

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

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

ダウンロード

jquery.browser.js (Uncompressed only)

(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 コードを書き分けています。

<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 のショートカット(エイリアス) を表したものです。少し直感的な印象になりました。

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

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

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

ダウンロード

デモ

関連情報