[jQuery] プラグイン 作り (2) 基本値 設定

プラグインを 万たち 時 パラメーターを マップ 形態(あるいは 客体 形態)路 受ければ 制御すること 楽だ.

一応 パラメーターが それぞれ 何を 意味するのか 判断がつかないでしょう なくても なる. マップ 形態は key値段が あること だからだ.(あるいは ラベルとも 言っていたよ.) また, パラメーター 手順 だから 頭痛い 一刀 ない.

定木, たいてい 番(回) 日 見よう.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	jQuery.fn.customFn = function(opt){
	  return this.each(function(){
	    $(this).css({
	      position : opt.position,
	      zIndex: opt.zIndex,
	      opacity: opt.opacity
	    });
	  });
	}

	var option = {
		position : 'relative',
		zIndex : 0,
		opacity: 0.5
	};

	$('.test').click(function(){
		$('#log').customFn(option);
	});
});
</script>
<style>
#log{
	background: black;
	color: white;
	position: absolute;
	left: 20px;
	top: 100px;
	padding: 20px;
}
</style>
<div id="log">
	wow!!!
</div>
<input type="button" class="test" value="test"/>

今度は 基本値を 作って 見よう. 基本値 やっぱり 客体 形態で function 中に 入れる. もし 基本値を 変更すること 易しく 割 つもりなら function 外で 抜いても 構わない のだ.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	jQuery.fn.customFn = function(opt){
	  return this.each(function(){
	    $(this).css({
	      position : opt.position,
	      zIndex: opt.zIndex,
	      opacity: opt.opacity
	    });
	  });
	}

	var default = {
		postion : 'relative',
		zIndex: 2,
		opacity: 0.1
	};

	var option = {
		position : 'relative',
		zIndex : 0,
		opacity: 0.5
	};

	var opt = $.extend(default, option);

	$('.test').click(function(){
		$('#log').customFn(option);
	});
});
</script>
<style>
#log{
	background: black;
	color: white;
	position: absolute;
	left: 20px;
	top: 100px;
	padding: 20px;
}
</style>
<div id="log">
	wow!!!
</div>
<input type="button" class="test" value="test"/>

以上だ.

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。