文档章节

jquery fn extend sample

sucanber
 sucanber
发布于 2014/06/17 17:47
字数 303
阅读 66
收藏 4
(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);



© 著作权归作者所有

共有 人打赏支持
sucanber
粉丝 8
博文 61
码字总数 14349
作品 0
浦东
jQuery中 $.fn的用法

jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个...

-wangming-
2015/02/05
0
0
无中生有,如何编写一个最简单的jQuery插件.

首先是最基础的,大多数乃至99%的jQuery插件都会用到的代码介绍一下,一共就2条. 1. extend()函数,参数是一个Object,为一个对象做扩展,添加一些方法或者属性.比如: jQuery.extend({hello:func...

顽Shi
2014/01/08
0
2
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
0
1
理解jquery的$.extend

理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下: $....

胡洋
2017/02/28
0
0
jQuery/javascript细小概念学习

这里罗列一些jQuery的细小知识点,如javascript面向对象编程理解,$.extend, $.data等 0. javascript面向对象编程理解 关于javascript面向对象编程理解,阮一峰在其4篇博客针对“封装”,“...

alazyer
2015/04/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
4
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
158
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部