Untitled

<!doctype html>
<html>
<head>
<title>ycsb-jquery-plugin</title>
<meta charset="utf-8">
</head>

<body>


	<div class="box">
		<h1>hello world</h1>
	</div>

	<div class="pox"></div>
	<div class="pox"></div>
	<div class="pox"></div>

	<div class="dragBox" style="position:fixed;top:0;left:0;width:100px;height:100px;background:#999;"></div>


<script src="./jquery-1.9.1.min.js"></script>
<script src="./jquery.ycsbDrag.js"></script>
<script>

	//要编写一个jQuery插件，需要为 jQuery.fn 对象上新增一个新的函数属性，而属性名就是你插件的名字:
	//这是最基础的jQuery插件结构
	jQuery.fn.myPlugin = function(){
		// my plugin code here
	};


	//更进一步：将以上代码，用一个立即调用的匿名函数包裹，并且传递实参jQuery赋值形参$
	(function($){

		$.fn.myPlugin = function(){

		};

	})(jQuery);


	//现在，已经有了插件的外壳，就可以真正的编写插件代码了。
	//不过在此之前，因为插件包裹这么多层，就得弄清楚插件代码的上下文，即this的值是啥
	//关键字 this 指向调用插件的 jQuery DOM对象
	//这是最容易出错的地方，因为很多通常情况下 jQuery 接受一个回调函数，中的 this 就指向原生的 DOM 元素
	//这常常导致开发者在 jQuery 插件代码中对 this 关键字多作一次 $(this) 这种无必要的包装
	(function($){

		$.fn.testPlugin = function(){
			console.log( this.addClass("aaa bbb ccc") );
			//调用addClass()成功，可见this就已经是jQuery DOM元素了，并不是原生的DOM，因此不必再 $(this) 包裹一蛤
			//alert($(this).height()); //虽然多包裹一蛤也没有报错
			//实际上，$(this)多包裹一次，更语义化，不用再过一下脑子this已经是jQuery DOM的思考
		};

	})(jQuery);

	$(".box").testPlugin();


	//现在可以写一个真正有点功能的插件了:
	(function($){

		$.fn.maxHeight = function(){

			var max = 0;
			//this代表调用插件的jQuery DOM元素(由jQuery选择器返回的...有可能是一个集合)，有可能不止一个,因此通常都用each()功能函数做遍历
			this.each(function(){
				max = Math.max(max, $(this).height());  //这里的$(this)是遍历时的当前JQuery DOM元素
			});
			return max;
		};
	})(jQuery);

	//我们已经知道在插件内部this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了
	//但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下

	//alert( $(".box").maxHeight() );
	//


	//让自己的插件也继承JQuery的特色，即连缀调用(链式调用)
	//前面的例子返回了页面上所有class值为box的元素中，height最高的那个值
	//但是，更多时候我们的插件的作用是以某种方式修改(操作)元素集合，完了之后并把他们传递给链式调用的下一个方法
	//这正是 jQuery 设计的漂亮(精髓)之处，因此要保证插件返回 this 关键字(即调用插件的jQuery DOM元素);

	(function($){

		$.fn.setBg = function(color){
			this.each(function(){
				$(this).css({
					"background": color,
				});
			});
			return this;
		};
	})(jQuery);

	$(".box").setBg("green").height(100);

	//因此，若插件无需真正的返回值，应该一直在插件函数的立即作用域中返回 this 关键字


	//插件的默认设置
	//对于那些提供许多设置选项的插件，最佳实践是提供一个默认设置，它可以在插件调用时通过$.extend()方法被扩展
	//这样调用插件时无需大量参数，只需要一个对象参数，内容为你希望不同于默认值得那部分设置
	//写法如下:
	(function($){

		$.fn.setElement = function(options){
			// Create some defaults, extending them with any options that were provided
			//创建一些默认的设置，可以用参数提供的去扩展它
	    	var settings = $.extend({
	      		'width': 100,
	      		'height': 100,
	      		'background' : 'blue'
	    	}, options);

	    	this.each(function(){
	    		$(this).css(settings);
	    	});

			return this;
		};
	})(jQuery);

	$(".pox").eq(0).setElement({
		"height": 200,  //覆盖插件的默认值100
		"margin": "100px auto"  //扩展插件的默认配置
	});

	//这是一个非常好的方式， 可以提供一个高度可配置的插件，又不必强制开发者定义所有选项


	//插件的名称空间(命名空间?)
	//合理的为插件定义名称空间是插件开发中很关键的。正确定义的名称空间可以确保你的插件不会与他人的代码或者插件冲突，反正很重要就是了

	//插件方法
	//一个插件应该至多只暴露一个名称空间在jQuery.fn对象上
	//单个插件永远不要在jQuery.fn对象上声明一个以上的名称空间，比如(错误实例)

	(function($){

		  $.fn.xxx = function(){
		    // 这
		  };
		  $.fn.xxxShow = function(){
		    // 不
		  };
		  $.fn.xxxHide = function(){
		    // 好
		  };
		  $.fn.xxxUpdate = function(){
		    // !!!
		  };

		  //...

	})(jQuery);

	//这非常不好，因为它搞乱了 $.fn 名称空间，试想如果大家都这么开发插件，引入的插件多了那么一个页面中的$.fn对象上属性的很容易冲突了。 //要修正这个问题，应该把插件的所有方法定义到一个对象定义当中，并通过传递方法名称字符串来调用
	(function($){

		//插件方法定义在一个局部变量对象中，而不是直接挂在$.fn上
		var methods = {
			init: function(){},
			show: function(){},
			hide: function(){},
			update: function(){}
			//...
		};

		$.fn.toolTip = function(method){

			//调用时，通过传递函数名称来调用对应方法
    		if( methods[method] ){
    			//如果存在该方法名，则调用
    			//在this上调用该方法，且实常从第二个开始
      			methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    		}
    		else if( typeof method === 'object' || !method ) {
      			methods.init.apply( this, arguments );
    		}
   			else{
      			$.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    		}

    		return this;
		};
	})(jQuery);

	//没有传参
	//$('.a').tooltip();

	//传递一个对象
	//$('.a').tooltip({foo : 'bar'});

	// 传递方法名 hide
	//$('.a').tooltip('hide');


	// 传递方法名 update
	//$('.a').tooltip('update', 'This is the new tooltip content!');

	//这种插件架构使你可以在插件的父闭包中封装所有方法，调用时先传方法名称字符串，接下来再把你需要的其它参数传给该方法。
	//这种封装和架构是 jQuery 插件社区的一个标准，已经被无数插件所使用，包括 jQueryUI 中的插件和小部件。

	$(".dragBox").ycsbDrag();


</script>
</body>
</html>