jQuery插件编写之三部曲

1、选择一个jQuery框架，如：

/*!
 * jQuery.myPlugin
 *
 * @version  1.0.0
 * @date     2014/07/16
 * @author   Lime
 * @license  
 */
(function (jQuery) {

	//定义你的属性名myPlugin
    jQuery.fn.myPlugin = function (options) { 
		
		//替换默认参数
        var options = jQuery.extend({}, jQuery.fn.myPlugin.defaults, options);
        
		//使用return this.each运用在多个控件上并实现链式操作 
        return this.each(function () {
              //在这里实现你的方法
        });
    };

    //使用暴露方式设置插件默认参数，这对于让插件的使用者更容易用较少的代码覆盖和修改插件默认设置
    jQuery.fn.myPlugin.defaults = {
    };

})(jQuery);

 2、添加引用编写好的插件

 首先给你的插件起个名，推荐命名方法为：jquery.[插件名].js，如上面可以命名为jquery.myPlugin.js

 然后在你的项目里添加引用<script src="jquery.myPlugin.js" type="text/javascript"></script>，当然在这之前你必须要引用jquery库。

 

3、插件的使用

<script type="text/javascript"> 
	$(document).ready(function () { 
		$("#div1").myPlugin(); 
	}); 
</script> 

 有木有发现简直简单到爆啊，是的，就这么简单！

 

附：select下拉绑定jQuery插件

/*!
 * jQuery.selectDataBind
 *
 * @version  1.0.0
 * @date     2014/07/16
 * @author   Lime<[email protected]>
 * @license  
 */
(function (jQuery) {
 
    jQuery.fn.selectDataBind = function (options) {
 
        var options = jQuery.extend({}, jQuery.fn.selectDataBind.defaults, options);
        return this.each(function () {
            var jOption = options.options;
            var jVaule = options.values;
            var bEmpty = options.empty;
            var j = 0;
            if (bEmpty) {
                this.options[0] = new Option("", "");
                j++;
            }
 
            for (var i = 0; i < jOption.length; i++) {
                var objOption = new Option(jOption[i], jVaule[i]);
                this.options[j++] = objOption;
            }
 
        });
    };
 
    jQuery.fn.selectDataBind.defaults = {
        options: [],
        values: [],
        empty: true
    };
 
})(jQuery);

 

 

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—