jQuery、プラグイン、jQuery UI、Web経由のCDNとは：CSSの書き方も分かるjQueryプラグイン実践活用法（1）（2/3 ページ）

[葛西秋雄，＠IT]

jQueryプラグインとは、jQuery UIとは

　jQueryには、拡張機能として「プラグイン」がサポートされています。プラグインには、関数とメソッドの2種類の形式があります。

関数形式のプラグイン

　「$.log()」は、関数形式のプラグインで引数に指定したメッセージをコンソール（Firefoxの場合）、または警告ダイアログ（Internet Explorer/Safari/Google Chromeの場合）に表示します。

関数形式のプラグイン − $.log()

jQuery.log = function(message) {
  if (window.console) {
    console.log(message);
  } else {
    alert(message);
  }
};

$.log() の使い方

$.log('jQuery plugin - $.log()');

$.log()の構文

$.log(message);

図2　Firefoxのアドオン「Firebug」でコンソールにメッセージが出力されたことを確認

メソッド形式のプラグイン

　「fadeToggle()」は、メソッド形式のプラグインで、fadeIn()とfadeOut()を切り替え（トグルし）ます。このプラグインは、jQueryのanimate()を使用して、opacityプロパティをトグルすることにより実装しています。

メソッド形式のプラグイン − fadeToggle()

jQuery.fn.fadeToggle = function() {
  return this.each(function() {
    jQuery(this).animate({opacity: 'toggle'});
  });
};

　fadeToggle()メソッドにオプションパラメータを追加するには、プラグインを次のように書き換えます。fadeToggle()のオプションを省略したときは、speedのデフォルト値「normal」が適用されます。

fadeToggle()メソッドにオプションを追加

jQuery.fn.fadeToggle = function(options) {
  myoptions = jQuery.extend({
    speed: 'normal'
  }, options);
  return this.each(function() {
    jQuery(this).animate({ opacity: 'toggle' }, myoptions.speed);
  });
};

fadeToggle()メソッドの使い方

$('#fadeToggle').click(function() {
  $('#demo').fadeToggle({speed: 3000});
});
<a id="fadeToggle" href="#">fadeToggle</a>
<div id="demo">demo</div>

fadeToggle()の構文

$(selector).fadeToggle(speed);

ユーザーインターフェイスに特化したプラグイン「jQuery UI」とは

　jQuery UIは、ユーザーインターフェイスに特化したプラグインでAccordion、Datepicker、Dialogなどのウィジェットをサポートしています。また、ShowやHide、Animationなどの機能を拡張しています。

jQuery UI - Home via kwout

　jQuery UIについては、下記記事もご参照ください。

連載インデックス「パターンとライブラリで作るAjaxおいしいレシピ」 - ＠IT via kwout

jQueryの各種プラグイン

　jQueryには、このほかにコミュニティが作成した各種プラグインが1000以上も公開されています。jQuery UIと各種プラグインは、次のサイトで公開されています。

Plugins | jQuery Plugins via kwout

　次ページでは、CDNを利用してWeb経由でjQueryを使う方法についてお話しします。