文档章节

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

jquery插件开发所需要的方法 摘要:插件是一个好东西,它是一个完全独立的模块。不会受到其它模块的影响,可以随时引用,不会冲突。维护起来方便简单,一些比较通用的独立模块,我们都倾向于...

昙花一现
2018/01/17
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
1K
1
理解jquery的$.extend

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

胡洋
2017/02/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部