bootstrap.panel.js 5.2 KB
/**
 * 显示一个面板
 * 作者:黄平
 * 日期:2016-04-19
 */
(function($) {
	$.fn.panel = function(options, param) {
		var self = this;
		if (typeof (options) == "string") {
			var method = $.fn.panel.methods[options];
			if (method){
				return method.call(this, param);
			}
		}
		return this.each(function() {
			var opt = $.extend({}, $.fn.panel.defaults, options);
			self.data("panel", opt);
			_createPanel.call(self);
		});
	};

	/**
	 * 生成panel
	 */
	function _createPanel() {
		var jq = this;
		var opt = jq.data("panel");
		jq.empty();
		jq.addClass("panel");
		if (opt.className) {
			jq.addClass(opt.className);
		}
		if (opt.style) {
			jq.css(opt.style);
		}
		
		//如果有标题,则生成head
		_createHead(jq);
		
		//body部分
		_createBody(jq);
		
		//foot部分
		if (opt.showFooter === true) {
			_createFoot(jq);
		}
		
	}
	
	/**
	 * 生成head
	 * @param jq
	 * @returns
	 */
	function _createHead(jq) {
		var opt = jq.data("panel");
		if (opt.title) {
			var head = $("<div>").addClass("panel-heading").appendTo(jq);
			if (opt.headClassName) {
				head.addClass(opt.headClassName);
			}
			if (opt.headStyle) {
				head.css(opt.headStyle);
			}
			$("<h"+ opt.headTitleSize +">").addClass("panel-title").append(opt.title).appendTo(head);
		}
	}
	
	/**
	 * 生成body
	 */
	function _createBody(jq) {
		var opt = jq.data("panel");
		var body = $("<div>").addClass("panel-body").appendTo(jq);
		if (opt.bodyClassName) {
			body.addClass(opt.bodyClassName);
		}
		if (opt.bodyStyle) {
			body.css(opt.bodyStyle);
		}
		//优先级selector>content>url
		if (opt.selector) {
			body.append(opt.selector);
		} else if (opt.url) {
			body.load(opt.url, opt.queryParams, function(data) {
				opt.onLoadSuccess(data);
			});
		} else {
			body.html(opt.content);
			if (opt.onLoadSuccess) {
				opt.onLoadSuccess();
			}
		}
		
		
		
	}
	
	/**
	 * 生成foot
	 */
	function _createFoot(jq) {
		var opt = jq.data("panel");
		var foot = $("<div>").addClass("panel-footer").appendTo(jq);
		if (opt.footClassName) {
			foot.addClass(opt.footClassName);
		}
		if (opt.footStyle) {
			foot.css(opt.footStyle);
		}
		//设置底部内容靠右对齐
		foot.css("text-align", "right");
		if (!opt.buttons || opt.buttons.length == 0) {
			return;
		}
		var btn;
		$(opt.buttons).each(function(index, item) {
			btn = $("<button type='button'>").addClass("btn").addClass(item.className).html(item.text).appendTo(foot);
			if (item.disabled === true) {
				btn.prop("disabled", true);
			}
			if (item.id) {
				btn.attr("id", item.id);
			}
			if (item.onclick) {
				btn.click(function() {
					item.onclick.call(btn);
				});
			}
		});
	}
	
	/**
	 * 设置或获取title
	 */
	function _title(jq, title) {
		if (title === undefined) {
			return jq.find(".panel-title").html();
		}
		if ($.type(title) === "object") {
			jq.find(".panel-title").append(title);
		} else {
			jq.find(".panel-title").html(title);
		}
	}
	
	/**
	 * 设置或获取content
	 */
	function _content(jq, content) {
		if (content === undefined) {
			return jq.find(".panel-body").html();
		}
		if ($.type(content) === "object") {
			jq.find(".panel-body").append(content);
		} else {
			jq.find(".panel-body").html(content);
		}
	}
	
	/**
	 * 隐藏
	 */
	function _hide(jq, effect) {
		if (!effect) {
			effect = "show";
		}
		if (effect === "show") {
			$(jq).hide("normal");
		} else if (effect === "slide") {
			$(jq).slideUp("normal");
		} else if (effect === "fade") {
			$(jq).fadeOut("normal");
		}
	}
	
	/**
	 * 显示
	 */
	function _show(jq, effect) {
		if (!effect) {
			effect = "show";
		}
		if (effect === "show") {
			$(jq).show("normal");
		} else if (effect === "slide") {
			$(jq).slideDown("normal");
		} else if (effect === "fade") {
			$(jq).fadeIn("normal");
		}
	}
	
	//方法
	$.fn.panel.methods = {
		hide : function(effect) {
			var jq = this;
			return this.each(function() {
				_hide(jq, effect);
			});
		},
		show : function(effect) {
			var jq = this;
			return this.each(function() {
				_show(jq, effect);
			});
		},
		title : function(title) {
			var jq = this;
			if (title === undefined) {
				//get
				_title(jq);
			}
			return this.each(function() {
				_title(jq, title);
			});
		},
		content : function(content) {
			var jq = this;
			if (content === undefined) {
				//get
				_content(jq);
			}
			return this.each(function() {
				_content(jq, content);
			});
		}
	};
	
	//事件
	$.fn.panel.event = {
		onLoadSuccess : function(data) {}
	};
	
	//属性
	$.fn.panel.defaults = $.extend({}, $.fn.panel.event, {
		className : "panel-default",	//面板的css
		style : {},						//面板的样式
		headClassName : null,			//面板头部css
		headStyle : {},					//面板头部样式
		headTitleSize : 3,				//面板标题的文字大小(就是1,2,3)
		bodyClassName : null,			//面板body  css
		bodyStyle : {},					//面板body样式
		footClassName : null,			//面板底部css
		footStyle : {},					//面板底部样式
		title : "",						//标题
		selector : undefined,			//加载到panel内容的选择器(优先级selector>content>url)
		content : "",					//内容
		url : "",						//从远端加载内容
		queryParams : {},				//从远端加载内容传递的参数
		buttons : [],					//底部的按钮
		showFooter : true				//是否显示底
	});
})(jQuery);