EasyShop/sltcolor/js/jquery.bigcolorpicker.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

(function($){
	var bigColorPicker = new function(){
		var currentPicker = null; //当前绑定拾取器的对象
		var allColorArray = [];//整个颜色区域分为前两列，后面所有列分为6个块，计算出各个区域的数组后放入一个总的二维数组里
		var sideLength = 6;//六个区域的每个边长
		this.init = function(){
			$("body").append('<div id="bigpicker" class="bigpicker"><ul class="bigpicker-bgview-text" ><li><div id="bigBgshowDiv"></div></li><li><input id="bigHexColorText" size="7" maxlength="7" value="#000000" /></li></ul><div id="bigSections" class="bigpicker-sections-color"></div><div id="bigLayout" class="biglayout" ></div></div>');
			
			$("#bigLayout").hover(function(){
				$(this).show();
			},function(){
				$(this).hide();
			}).click(function(){
				$("#bigpicker").hide();
			});
			
			//颜色拾取器text输入框注册事件
			$("#bigHexColorText").keypress(function(){
				var text = $.trim($(this).val());
				$(this).val(text.replace(/[^A-Fa-f0-9#]/g,''));
				if(text.length <= 0)return;
				text = text.charAt(0)=='#'?text:"#" + text;
				var countChar = 7 - text.length;
				if(countChar < 0){
					text = text.substring(0,7);
				}else if(countChar > 0){
					for(var i=0;i<countChar;i++){
						text += "0";
					};
				}
				$("#bigBgshowDiv").css("backgroundColor",text);
			}).keyup(function(){
				var text = $.trim($(this).val());
				$(this).val(text.replace(/[^A-Fa-f0-9#]/g,''));	
			}).focus(function(){
				this.select();
			});	
			
			//单击页面选择器以外的地方时选择器隐藏
			$(document).bind('mousedown',function(event){
				if(!($(event.target).parents().andSelf().is('#bigpicker'))){
					$("#bigpicker").hide();
				}
			});			
		};
		
		/*
		 * callback:可以是undefined（不传参数时）、字符串、函数
		 * 		undefined：把选择的颜色设置到绑定bigColorpicker的元素的value上。
		 * 		字符串：把选择的颜色设置到id为"字符串"的元素的value上。
		 * 		函数：执行传入的函数以实现自定义的获取颜色后的动作。
		 * engine:可以是undefined、p(或P)、l(或L)，
		 * 		在bigColorpicker展现颜色选择区域小格时有两种实现方式：
		 *     一、是一张背景图片，采用光标定位的方式获取颜色。p(或P)
		 *     二、每个小格就是一个li，设置li的背景颜色。l(或L)
		 *     实现方式的不同，效率有所差异，可以自己在使用时选择，默认是p(或P)。
		 *     undefined（不传参数时）：使用默认p(或P)
		 * sideLength:设置颜色区域的大小取值范围为2～10，默认为6,只有engine为L时才生效
		 */
		this.showPicker = function(callback,engine,sideLength_){