首页 » 代码分享

给内容添加折叠的效果,常用于界面布局

功能:给fieldset的标题部分添加折叠的事件,在页面布局中经常用到。
适用平台:IE、谷歌、火狐浏览器
实现依赖:jQuery。
特点:代码简洁,适用性强。

[代码] [JavaScript]代码

$(document).ready(function(){
		//寻找每一个样式为folding的	fieldset并检测有没有tgg的div			   
 		$(".folding").each(function(){
			var t = $(this);
			var count = t.find("div.div").size();
			var height = t.attr("height");
			
			var width = t.attr("width");
			
			if(count==0){
				//判断每一个fieldset下面是否有样式为tgg的div元素,没有就加一个
				var datagriddiv = $("<div class='datagriddiv'></div>");
				if (height != null){
					datagriddiv.height(height);
				}
				if (width != null){
					datagriddiv.width(width);
				}
				t.children().wrap(datagriddiv);
				var div = $("<div></div>").addClass("div");
				div.insertBefore(t.find("div.datagriddiv")); 
				var title = t.attr("title");
				var divTitle = $("<div class='title'></div>");
				
				div.append(divTitle);
				div.append(title);
				
			}
		});
		$(".folding div.div").click(function(){		
		   $(this).children("div.title").toggleClass("titleDown");
		   $(this).parent().children("div.datagriddiv").slideToggle(200);	
		   
		});
		
		$(".folding table tbody tr").toggle(
		  function () {
			$(this).addClass("selected");
		  },
		  function () {
			$(this).removeClass("selected");
		  }
		); 
});

[图片] folding.gif

[文件] folding.rar ~ 50KB    下载