文档章节

jquery fn extend sample

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

sucanber

粉丝 8
博文 61
码字总数 14978
作品 0
浦东
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
JS框架--Cyer

Cyer是一个轻量、小巧的js框架,精简易懂的API设计,支持链式调用,有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。暂不支持animate功能。版本更新到v1.0.3,增加domRe...

黄昌运
2013/03/06
2.1K
0
jQuery仿亚马逊风格图片滚动插件--amazon_scroller.js

亚马逊是美国甚至是全世界最大的网络电子商务公司,它的网站也相对简单,不花哨。这款图片滚动效果正是模仿自亚马逊网站,自定义参数比较多,可以设置图片滚动间隔、是否显示标题、图片大小、...

dowebok
2013/04/04
2.2K
1
超快的css selector引擎--kquery 2.0

kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6+/chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于...

aaron.xiao
2012/10/23
655
0

没有更多内容

加载失败,请刷新页面

加载更多

用17张 图带你看懂红黑树5大特性

tips:叶子结点,没有子结点的节点。nil等同于java中的null。 根据特点4,得出不能有连续的红色结点,特点5又说从任一结点到每个叶子节点的左右路径都包含相同数目的黑色节点。可以推出最长的路...

小咖呀
今天
0
0
为什么java8还在被大量使用?

  对于很多人来说,新版本的很多功能是很值得期待,并且他是从功能开发到预览一直在关注。而且对于本身来说升级所带来的好处远远大于升级所带来的工作量。   因为java 本身的兼容性问题,...

SXXpenguin
9分钟前
7
0
Yotta企业云盘:企业数据存储的可靠平台

回顾过去的几年,企业云盘市场发生了许多里程碑式的事件。 市场仍在继续进行模式重塑和集成的过程。 行业趋势已经出现,市场在平静中培育了新的机会。 企业在内容管理中的痛点越来越明显,需...

osc_srnunz15
9分钟前
0
0
《剑指 offer》 21. 调整数组顺序使奇数位于偶数前面

点击上方“图解面试算法”,选择“星标”公众号 重磅干货,第一时间送达 大家好,我是程序员吴师兄。 今天分享的题目来源于 LeetCode 上的剑指 Offer 系列 面试题 21.调整数组顺序使奇数位于...

五分钟学算法
今天
0
0
有了这份程序员面试指南,你离大厂Offer还远吗?| 附推荐书籍

本篇文章,我将结合英文版的 Google 面试指南的主线,根据自己的理解对文章进行修改,然后结合自己面试国内大厂的经验给大家阐述。其实我觉得,各大公司针对程序员岗位的面试流程来讲是相对比...

HollisChuang
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部