jQuery插件开发

2019独角兽企业重金招聘Python工程师标准>>>

/*jQuery插件开发*/
;(function($,window,document,underfined){
	/*对象*/
	DivEle = {
		"name" : "divEle",
		"config" : "",
		/*改变颜色的方法*/
		"hangeColor" : function(ele,config){
			this.config = config;
			ele.css({
				"left": this.config.left,
				"top" : this.config.top,
				"zIndex" : this.config.zIndex,
				"color" : this.config.color,
				"font-size" : this.config.fontSize,
				"position" : this.config.position
			});
		}
	};
	
	/*插件名称*/
	$.fn.chanColor = function(config){
		config = $.extend({}, $.fn.chanColor.defaults, config);
		DivEle.hangeColor(this,config);
		//返回this,支持链式操作
		return this;
	};
	/*默认配置*/
	$.fn.chanColor.defaults = {
		"left": "0",
		"top" : "0",
		"zIndex" : 600,
		"color" : "#333",
		"fontSize" : "12px",
		"position" : "fixed"
	};
	
})(jQuery,window,document);

/*插件使用*/
$(function(){
	if($.fn.chanColor){
		$("#aa").chanColor({"left":"100px","top":"100px","fontSize":"20px","color":"red"}).css("font-size","25px");
	}
});

书写方式二:

/* 依赖于jquery */
;(function($,window,document,undefined){
	/**
	 * 提供项目中重复的元素
	 * 1. addBtn 动态生成表头按钮
	 * 2. createSelectOption 动态创建select元素下面的option
	 */
	//工具类构造函数
	var FXUtils =  function(ele, opt){
		this.$element = ele,
		this.defaults = {
		  'color': 'red',
		  'fontSize': '12px',
		  'textDecoration': 'none'
		},
		this.options = $.extend({}, this.defaults, opt)
	}
	//工具类方法扩展
	FXUtils.prototype =  {
		/**
		* @author 柴建锋
		* @param data : 需要传入的数组: 示例:[{text: '增加',class:'', onClick:'addLayer(\"insert\")',iClass:''}]
		*		 text: 按钮的文本
		*		 class: 按钮的样式
		*		 onClick : 按钮点击的动作
		*		 iClass: 按钮上小图标的样式 参考: http://www.bootcss.com/p/font-awesome/
		* @result 多个按钮元素
		* @description 动态生成表头按钮
		*/
		addBtn : function(data){
			//本类对象
			var eThis = this;

			if(data && $.isArray(data) && data.length>0){
				//创建元素节点
				var btnHtml = document.createElement('div');
				$.each(data,function(i,e){
					//调用创建按钮的函数,添加到元素节点
					btnHtml.appendChild(eThis.createBtn(e));
				});
				return $(btnHtml).html();
			}else{
				return '请修改参数格式 : [{text:"增加",class:"btn btn-sm"}]';
			}
			
			return eThis;
		},
		/**
		 * @author 柴建锋
		 * @update
		 * @param JSON json
		 * @return 单个button元素
		 * @version v1.0
		 * @description 生成button元素
		 */
		createBtn : function(json){
			if(json){
				//创建按钮元素
				var btn = document.createElement("button");
				//给元素设置属性
				$(btn).css({'marginRight':'6px'}); //设置默认的style
				$(btn).attr({'class':'btn btn-sm btn-primary'});//设置默认的class
				//设置小图标
				var iEle = document.createElement("i");
				$.each(json,function(k,v){
					if(k == 'text'){
						$(btn).text(' '+v);
					}else if(k == 'iClass'){
						$(btn).prepend($(iEle).attr("class",v));
					}else{
						$(btn).attr(k,v)
					}
				});
				return $(btn).get(0);
			}else{
				return '';
			}
		},
		/**
		 * @author 柴建锋
		 * @create 2017-08-11
		 * @update
		 * @param  string selecteId : 要挂载的selecte元素的id
		 * 		   string data      : 格式: [{name=人事部,value=1,selected=false},{name=客服部,value=2,selected=true},{name=开发部,value=3,selected=false}]
		 * @return
		 * @version v1.0
		 * @description 动态创建select元素下面的option
		 */
		createSelectOption : function(selectId,data){
			//本类对象
			var eThis = this;

			if(selectId && data){
				data = this.changeDataToJson(data);
				if($.isArray(data) && data.length>0){
					var selectEle = $('#'+selectId).get(0);
					var optionEle;
					$.each(data,function(i,e){
						optionEle = document.createElement('option');
						$.each(e,function(k,v){
							if(k.toLowerCase()=='name'){
								$(optionEle).text(v);
							}if(k.toLowerCase()=='id'){
								$(optionEle).attr('value',v);
							}else{
								$(optionEle).attr(k,v);
							}
						});
						selectEle.appendChild(optionEle);
					});
				}
			}
			
			return eThis;
		},
		/**
		 * @author 柴建锋
		 * @create 2017-08-11
		 * @update
		 * @param  string data 格式: [{name=人事部,value=1,selected=false},{name=客服部,value=2,selected=true},{name=开发部,value=3,selected=false}]
		 * @return JSON对象
		 * @version v1.0
		 * @description 转换后台数据为JSON对象
		 */
		changeDataToJson : function (data){
			data = data.replace(/\{/ig,'\{\"');
			data = data.replace(/\}/ig,'\"\}');
			data = data.replace(/=/ig,'\":\"');
			data = data.replace(/\s{0,}\,\s{0,}/ig,'\"\,\"');
			data = data.replace(/\}\"\,\"\{/ig , '\}\,\{');
			return JSON.parse(data);
		},

		addOptionValue : function(id,data){
			var eThis = this;
			if(id && data && $.isArray(data) && data.length>0){
				var optionEle = null;
				$.each(data,function(i,e){
					var description = e.description;
					if(i==0){
						var optionEleDefault = document.createElement('option');
						$(optionEleDefault).text(description.substring(0,description.indexOf('\>')));
						$('#'+id).append(optionEleDefault);
					}
					optionEle = document.createElement('option');
					$(optionEle).attr('value',e.value);
					$(optionEle).text(e.name);
					$(optionEle).attr('selected',e.selected);
					$('#'+id).append(optionEle);
				});
			}
			return eThis;
		}


	};
	
	//在插件中使用FXUtils对象
	$.fn.fXUtils = function(options) {
		//创建Beautifier的实体
		var fXUtils = new FXUtils(this, options);
		//返回实体
		return fXUtils;
	}
	
	//挂到window对象上
	window.FXUtils = FXUtils;

})(jQuery,window,document);

//使用封装的插件
$(function(){
	//插件方法使用
	var fxUtils = $(document).fXUtils();
	
	//window对象使用
	//var fxUtils = new FXUtils();
		
	$.getJSON('data.json',function(d){
		fxUtils.addOptionValue('jiesuan',d);
	});

	$.getJSON('data1.json',function(d){
		fxUtils.addOptionValue('bizhi',d);
	});
});

书写方式三: JSON对象

/* 依赖于jquery */
;(function($,window,document,undefined){
	
	var DivElement = {};
	DivElement.defaults = {
		name : 'admin',
		age : 25
	};
	DivElement.methods = {
		sayHello : function(){
			console.log(111);
		}
	}
	
	window.divElement = DivElement;
	
})(jQuery,window,document);

//使用封装的插件
$(function(){
	divElement.methods.sayHello();
});

 

转载于:https://my.oschina.net/u/1773772/blog/706364