文档章节

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插件开发所需要的方法

1、$.fn是jquery的定义的一个特别名称,可以通过这样来定义一个方法: $.fn.test=function(otherString){ }; $.fn是指jquery的命名空间,加上fn上的方法及属性,会对每一个jquery实例有效。 ...

昙花一现
01/17
0
0
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/javascript细小概念学习

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

alazyer
2015/04/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
2
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
6
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
12
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部