jquery fn extend sample
博客专区 > sucanber 的博客 > 博客详情
jquery fn extend sample
sucanber 发表于4年前
jquery fn extend sample
  • 发表于 4年前
  • 阅读 65
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

(function($){
	
	function createHeaderElements(target) {
		var h = [],
			helpIcon = "",
			switchIcon = "",
			data = $.data(target,"cvmodule");
		
		if(data.options.showIcon == true){
			helpIcon = "<img class='headerIcon' src='/tag/images/Help.png'>";
		}
		if(data.options.showSwitch == true){
			switchIcon = "<label class='switch module-"+((data.options.isClosed == true)?'closed':'opened')+"'></label>";
		}
		
		h.push("<div class='module-header'>");
		h.push("<table>");
		h.push("<tr>");
		h.push("<td class='header-left'></td>");
		h.push("<td class='header-center' valign='middle'>"+helpIcon+"<span class='headerTitle'>"+data.options.title+"</span></td>");
		h.push("<td class='header-right'>"+switchIcon+"</td>");
		h.push("</tr>");
		h.push("</table>");
		h.push("</div>");
		return h.join('');
	};
	
	function toggleContent(target){
		var iconEle = $(target).find("label.switch"),
			contentEle = $(target).find("div.module-body");
		if(iconEle.hasClass("module-opened")){
			hideContent(iconEle,contentEle);
		}else{
			showContent(iconEle,contentEle);
		}
	};
	
	function hideContent(iconEle,contentEle){
		iconEle.removeClass("module-opened").addClass("module-closed");
		contentEle.hide();
	};
	
	function showContent(iconEle,contentEle){
		iconEle.removeClass("module-closed").addClass("module-opened");
		contentEle.show();
	};
	
	function createBodyElements(target){
		var b = [],
			displayCss = "block",
			data = $.data(target,"cvmodule");
		if(data.options.isClosed) {displayCss = "none";}
		b.push("<div style='display:"+displayCss+";'class='module-body'>");
		b.push("<div class='module-body-content'>This is a body</div>");
		b.push("</div>");
		return b.join('');
	};
	
	function createFooterElements(){
		var f = [];
		f.push("<div class='module-footer'>");
		f.push("<table>");
		f.push("<tr>");
		f.push("<td><div class='footer-left'></div></td>");
		f.push("<td><div class='footer-right'></div></td>");
		f.push("</tr>");
		f.push("</table>");
		f.push("</div>");
		return f.join('');
	};
	
	function init(target){
		var $target = $(target),
			id = $target.attr("id"),
			moduleId  = id?id:'cvm_'+Math.random();
		
		$target.attr("moduleid",moduleId).addClass("cv-module");
		
		$target.append(target.headerElement = createHeaderElements(target))
			.append(target.bodyElement = createBodyElements(target))
			.append(target.footerElement = createFooterElements(target));
	};
	
	function bindEvents(target){
		$(target).find("label.switch").unbind("click").on("click",function(){toggleContent(target);});
	};
	
	$.fn.cvmodule = function(options, param){
		if (typeof options == 'string') {
			return $.fn.cvmodule.methods[options](this, param);
		}
		
		options = options || {};
		return this.each(function(){
			var state = $.data(this, 'cvmodule');
			var opts;
			if (state) {
				opts = $.extend(state.options, options);
				state.options = opts;
			} else {
				$.data(this, 'cvmodule', {
					options: $.extend({},$.fn.cvmodule.defaults, options)
				});
				init(this);
			}
			
			bindEvents(this);
			/*addTools(this);
			setProperties(this);
			setSize(this);
			doFirstSelect(this);*/
		});
	};
	
	$.fn.cvmodule.methods = {
		
	};
	
	$.fn.cvmodule.defaults = {
			title:'',
			height:'auto',
			width:'auto',
			showSwitch:true,
			isClosed:false,
			collapsable:true,
			showIcon:true,
			iconText:''
	};
})(jQuery);



共有 人打赏支持
粉丝 7
博文 57
码字总数 13663
×
sucanber
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: