Tweet

jQuery、プラグイン、jQuery UI、Web経由のCDNとは

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

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

□ 関数形式のプラグイン

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

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

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

$.log(message);

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

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

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

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

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

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

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

$(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を使う方法についてお話しします。

2/3

INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（1）　 jQuery、プラグイン、jQuery UI、Web経由のCDNとは
	Page1 CSSの書き方も分かる、jQueryプラグイン紹介連載 これぐらい知ってますよね？ 「jQuery」基礎講座
	Page2 jQueryプラグインとは、jQuery UIとは
	Page3 CDNを利用してWeb経由でjQueryを使うには 次回以降は、jQueryプラグインをイロイロ紹介

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード