連載
» 2009年12月08日 00時00分 公開

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);
ALT 図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については、下記記事もご参照ください。

jQueryの各種プラグイン

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

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。