jquery extendメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jqueryメソッドの拡張する

jQueryメソッドを拡張するメソッドです
自作でjQueryメソッドを作った場合などに、オプション設定を追加できます
引数が1つの場合は、thisでbを拡張します(thisはjQueryオブジェクト)
jQuery.extend( b )
引数が2つの場合は、aでbを拡張します(aでbを上書きします)
jQuery.extend( a, b )
jQueryは$で代用できます

jQuery.extend(
	jQueryメソッドを拡張する処理
)

指定したHTML要素をクリックしたときにイベントを実行する

hogeメソッドを作ります
しょぼいですが、return this;};までがプラグインです。
$("button")から下がプラグインを使うためのオプション設定をしています
ボタンをクリックしたときにセレクタで指定したHTML要素が設定した値でアニメーションします
optionはオブジェクト名です。好きな名前に変えられます。設定したオブジェクト名にドットでキーの名前をつないで使います
speedとopacityも勝手につけた名前です(変更できます)。重要なのは、option.speedとoption.opacityが処理の中でそれぞれのメソッドの値に組み込まれているとこです。
あとはつかうときに名前:値を入れるだけでいくつもオプションが設定できます
使う時に設定なしで使うと、デフォルトの値で動きます

jquery

$(function() {
  $.fn.hoge = function(option) {
     option = $.extend( {speed:400,opacity:0.5}, option );
    this.each(function() {
     $(this).animate({left:"300px"},option.speed,"linear")
     .fadeTo(1000,option.opacity);
    });
    return this;
  };
  $("button").click(function(){
	$("#hoge").hoge({
	speed:1000,
	opacity:0.2
	});
	});
});
css
#hoge{
 width: 50px;
 border: 1px solid;
 height:50px; position:relative ;
 background-color: #F90;
  }

html

<button>ボタン</button>
<div id="hoge"></div>

サンプル







(C)2012 ホームページ作成無料