简易JQuery弹框选择分类插件

/**
 * JQuery 分类选择器插件
 * FILE: chooser.js
 * USEAGE:
 $('#elementId').addChooser
 (   
   'R_SC', // 渲染器名字
   {
     data: dataNeed, // 分类数据数组，格式如：[{id:"1",name:"/u5bb6",pid:"0"},{id:"2",name:" /u6f14",pid:"0"},...]
     valuesIn: '#valuesIn', // 默认#valuesIn，存放已选值的dom元素的ID
     textsIn: '#textsIn', // 默认#textsIn，显示已选分类的dom元素的ID
     seperator: ',', // 默认“,”，多个值的分隔符
     okCallback: aFunction, // 默认null即不做处理，确定按钮处理
     moveable: true, // 默认true，是否可以移动对话框
     maxChosen: 5 // 默认5，最大选择数
   }
 );
 * @author tshichun 2010.06.06
 */

(function($) {
	$.fn.extend({
		/*入口*/
		addChooser: function(renderName, options) {
			if (typeof options.data == 'undefined' || options.data.constructor != window.Array) return null;
			var chooser = $.data(this[0], 'chooser');
			if (chooser) return chooser;
			chooser = $.fn.createChooserRender(renderName, options);
			if (!chooser) return null;
			$.data(this[0], 'chooser', chooser);
			this.bind('click',
			function() {
				chooser.popup();
			});
			return chooser;
		},
		/*各种样式的渲染器*/
		createChooserRender: function(renderName, options) {
			switch (renderName) {
			case 'R_SC':
				return new $.SChooser(options);
			default:
				return null;
			}
		}
	});
})(jQuery);

/* 选择器*/
(function($) {
	$.Chooser = function(options) {
		this.settings = $.extend({},
		$.Chooser.defaults, options);
		this.init();
	};
	$.extend($.Chooser, {
		// 类（静态）成员
		defaults: {
			data: null,
			valuesIn: '#valuesIn',
			textsIn: '#textsIn',
			htmlIds: {
				title: '#chooser-title',
				// 标题栏
				close: '#chooser-close',
				// 关闭按钮
				ok: '#chooser-ok',
				// 确定按钮
				no: '#chooser-no',
				// 取消按钮
				chosen: '#chooser-chosen',
				// 已选择容器
				body: '#chooser-body',
				// 选择框body
			},
			okCallback: null,
			// 点击“确定”处理函数
			moveable: true,
			// moveable对话框是否可以移动
			maxChosen: 5,
			seperator: ','
		},
		// 实例成员定义在 prototype 内
		prototype: {
			/*初始化*/
			init: function() {
				var val = $(this.settings.valuesIn);
				if (!this.isEmpty(val.val())) {
					// 根据val.val()的值初始化$(this.settings.textsIn)的text值
					var valArray = this.split(val.val());
					var txtArray = new Array();
					for (var i = 0; i < valArray.length; i++) {
						txtArray.push(this.getByValue(valArray[i]).name);
					}
					$(this.settings.textsIn).text(txtArray.join(this.settings.seperator));
				} else {
					val.val('');
				}
			},
			/*取得多个子数据*/
			getSubs: function(pValue) {
				var subs = new Array();
				var length = this.settings.data.length;
				for (var i = 0; i < length; i++) {
					if (this.settings.data[i].pid == pValue) subs.push(this.settings.data[i]);
				}
				return subs;
			},
			/*取得一个父数据*/
			getParent: function(myValue) {
				var length = this.settings.data.length;
				var pValue = 0;
				for (var i = 0; i < length; i++) {
					if (this.settings.data[i].id == myValue) {
						pValue = this.settings.data[i].pid;
						break;
					}
				}
				return this.getByValue(pValue);
			},
			/*取得一个数据*/
			getByValue: function(value) {
				var obj = null;
				var length = this.settings.data.length;
				for (var i = 0; i < length; i++) {
					if (this.settings.data[i].id == value) {
						obj = this.settings.data[i];
						break;
					}
				}
				return obj;
			},
			/*是否为空*/
			isEmpty: function(obj) {
				if (obj.constructor == window.Array) {
					return obj.length == 0;
				} else if (obj.constructor == window.Object) {
					return obj == null;
				} else {
					return obj == 0 || $.trim(obj) == '';
				}
			},
			/*以分隔符把字符串拆分成数组*/
			split: function(str, seperator) {
				if (this.isEmpty(str)) return [];
				if (typeof seperator == 'undefined') seperator = this.settings.seperator;
				return str.split(seperator);
			},
			/*选择*/
			setChosen: function(value, text) {
				var val = $(this.settings.valuesIn);
				var valArray = this.split(val.val());
				if (valArray.length >= this.settings.maxChosen) {
					alert('最多可选' + this.settings.maxChosen + '项');
					return;
				}
				if ($.inArray(value, valArray) == -1) {
					var valStr = this.isEmpty(val.val()) ? value: val.val() + this.settings.seperator + value;
					val.val(valStr);
					var txt = $(this.settings.textsIn);
					var txtStr = this.isEmpty(txt.text()) ? text: txt.text() + this.settings.seperator + text;
					txt.text(txtStr);
					this.appendChosen(value, text);
				}
			},
			/*取消选择*/
			unsetChosen: function(value, text) {
				var val = $(this.settings.valuesIn);
				var txt = $(this.settings.textsIn);
				var valArray = this.split(val.val());
				var txtArray = this.split(txt.text());
				var valIndex = $.inArray(value, valArray);
				var txtIndex = $.inArray(text, txtArray);
				if (valIndex != -1 && txtIndex != -1) {
					valArray.splice(valIndex, 1);
					txtArray.splice(txtIndex, 1);
					val.val(valArray.join(this.settings.seperator));
					txt.text(txtArray.join(this.settings.seperator));
					this.initChosen(valArray, txtArray);
				}
			},
			/*初始化已选择*/
			initChosen: function(valArray, txtArray) {
				$(this.settings.htmlIds.chosen).html('');
				if (typeof valArray == 'undefined' || typeof txtArray == 'undefined') {
					var value = $(this.settings.valuesIn).val();
					var text = $(this.settings.textsIn).text();
					valArray = this.isEmpty(value) ? [] : this.split(value);
					txtArray = this.isEmpty(text) ? [] : this.split(text);
				}
				if (valArray.length > 0 && txtArray.length > 0 && valArray.length == txtArray.length) {
					for (var i = 0; i < valArray.length; i++) {
						this.appendChosen(valArray[i], txtArray[i]);
					}
				}
			},
			/*改变设置*/
			changeSettings: function(settings) {
				this.settings = $.extend({},
				this.settings, settings);
			},
			/*累加已选择项*/
			appendChosen: function(value, text) {
				var chosen = $('<input type="checkbox" checked/>');
				chosen.val(value).attr({
					title: '点击删除',
					text: text
				});
				var self = this;
				chosen.click(function() {
					self.unsetChosen($(this).val(), $(this).attr('text'));
				});
				$(this.settings.htmlIds.chosen).append(chosen).append(text);
			},
			/*弹出选择框：width宽，height高，render渲染器*/
			popup: function(width, height, render) {
				var self = this;
				var cw = document.documentElement.clientWidth;
				var ch = document.documentElement.clientHeight;
				// 模式层
				var mask = $('<div></div>');
				mask.css({
					position: 'absolute',
					left: 0,
					top: 0,
					width: cw + 'px',
					height: Math.max(document.body.clientWidth, ch) + 'px',
					overflow: 'hidden',
					opacity: 0.3,
					backgroundColor: '#000',
					zIndex: 998
				});
				$(document.body).append(mask);
				// 外观容器，即body的容器
				var pBody = $('<div></div>');
				pBody.attr('id', self.settings.htmlIds.body.substr(1)).css({
					display: 'none',
					position: 'absolute',
					left: (cw - width) * 0.5 + 'px',
					top: (ch - height) * 0.5 + $(document).scrollTop() + 'px',
					width: width + 'px',
					height: height + 'px',
					zIndex: 999
				});
				pBody.append(render.render()); // 渲染外观
				$(document.body).append(pBody);
				self.initChosen(); // 初始化已选择项目
				var tBar = $(self.settings.htmlIds.title); // 标题栏
				// 禁止拖选弹框中的文本 IE和FF
				pBody.bind('selectstart',
				function() {
					return false;
				}).css('-moz-user-select', 'none');
				// 是否可以移动（默认可移动）
				if (self.settings.moveable) {
					tBar.css('cursor', 'move');
					tBar.mousedown(function(e) {
						var offset = pBody.offset();
						x0 = e.pageX - offset.left;
						y0 = e.pageY - offset.top;
						var leftBtn = false; // 是否按下鼠标左
						if (document.all && e.button == 1) leftBtn = true; // IE
						else if (e.button == 0) leftBtn = true; // FF
						if (leftBtn) {
							$(document).mousemove(function(e) {
								// 控制在可见区域中拖动，并且自动吸附（minFix）
								var minFix = 15;
								var x = e.pageX - x0,
								y = e.pageY - y0;
								if (x < minFix) x = 0;
								if (y < minFix) y = 0;
								if (x > $(window).width() - pBody.width() - minFix) x = $(window).width() - pBody.width();
								// if (y > $(window).height() - pBody.height() - minFix) y = $(window).height() - pBody.height();
								pBody.css('left', x + 'px');
								pBody.css('top', y + 'px');
							});
						}
					}).mouseup(function(e) {
						$(document).unbind('mousemove');
					});
				} else {
					tBar.css('cursor', 'default');
				}
				var close = $(self.settings.htmlIds.close);
				if (close[0]) {
					// 当存在“关闭”按钮时
					close.click(function() {
						pBody.remove();
						mask.remove();
					});
				}
				var ok = $(self.settings.htmlIds.ok);
				if (ok[0]) {
					// 当存在“确定”按钮时
					ok.click(function() {
						pBody.remove();
						mask.remove();
						if (self.settings.okCallback && $.isFunction(self.settings.okCallback)) self.settings.okCallback();
					});
				}
				var no = $(self.settings.htmlIds.no);
				if (no[0]) {
					// 当存在“取消”按钮时
					no.click(function() {
						pBody.remove();
						mask.remove();
					});
				}
				pBody.slideDown('fast'); // 显示           
			}
		}
	});
})(jQuery);

/*服务项目选择框*/
(function($) {
	$.SChooser = function(options) {
		this.chooser = new $.Chooser(options);
	};
	$.extend($.SChooser, {
		prototype: {
			/* OVERRIDE 1 弹出选择框*/
			popup: function() {
				var settings = {
					htmlIds: {
						title: '#schooser-title',
						close: '#schooser-close',
						ok: '#schooser-ok',
						no: '#schooser-no',
						chosen: '#schooser-chosen',
						body: '#schooser-body'
					}
				};
				this.chooser.changeSettings(settings);
				this.chooser.popup(480, 265, this);
			},
			/* OVERRIDE 2 渲染界面，返回由jQuery封装的dom元素*/
			render: function() {
				var self = this;
				var body = $('<div></div>');
				body.append('<div id="schooser-title">服务项目 <a href="javascript:;" id="schooser-close">关闭</a> <a href="javascript:;" id="schooser-ok">确定</a></div><div id="choiceed">您已选择：<p id="schooser-chosen"></p></div>');
				var bodyInner = $('<div id="unchoice"></div>');
				var parents = self.chooser.getSubs(0); // 一级分类
				for (var i = 0; i < parents.length; i++) {
					bodyInner.append(parents[i].name + '：');
					var subs = this.chooser.getSubs(parents[i].id); // 二级分类
					for (var j = 0; j < subs.length; j++) {
						var sub = $('<a href="javascript:;"></a>').text(subs[j].name).attr('value', subs[j].id);
						sub.click(function(e) {
							self.showSubs(e);
						});
						bodyInner.append(sub);
					}
					bodyInner.append('<hr/>');
				}
				body.append(bodyInner);
				return body;
			},
			/* OVERRIDE 3 显示三级分类选择框*/
			showSubs: function(e) {
				var self = this;
				var subs = this.chooser.getSubs($(e.target).attr('value'));
				var x = e.pageX;
				var y = e.pageY;
				var subsBody = $('<div id="choice_doing"></div>').css({
					display: 'none',
					position: 'absolute',
					zIndex: 9999,
					left: x + 'px',
					top: y + 'px'
				}).bind('mouseleave',
				function() {
					$(this).remove();
				});
				var subWrap = $('<table></table>');
				for (var i = 0; i < subs.length; i++) {
					var tr = $('<tr></tr>');
					for (var j = 0; j < 2; j++) {
						var td = $('<td></td>');
						if (typeof subs[i] != 'undefined') {
							var sub = $('<input type="checkbox" />').attr({
								value: subs[i].id,
								text: subs[i].name
							});
							sub.click(function() {
								if ($(this).attr('checked')) {
									self.chooser.setChosen($(this).val(), $(this).attr('text'));
								} else {
									self.chooser.unsetChosen($(this).val(), $(this).attr('text'));
								}
							});
							td.append(sub).append(subs[i].name);
						}
						tr.append(td);
						i++;
					}
					subWrap.append(tr);
					subsBody.append(subWrap);
				}
				$(document.body).append(subsBody);
				subsBody.slideDown('fast');
			}
		}
	});
})(jQuery);