文档章节

带展开收缩的fieldset

暗之幻影
 暗之幻影
发布于 2014/12/27 15:54
字数 202
阅读 58
收藏 0

使用

示例代码

<fieldset id="myFieldset">
	<legend>基本信息</legend>
	<div>
		fieldset 内容
	</div>
</fieldset>

$(function(){
    new BeautifulFieldset('myFieldset', false, function(isShow){
    	// 展开/隐藏回调
    	displayCameraWindowConsole(isShow);
    });
});

效果图

实现

BeautifulFieldset

BeautifulFieldset = function(id, isShow, onToggle) {
	var fieldset = document.getElementById(id);
	this.el = fieldset;
	this.contentDiv = this.el.children[1];
	if(isShow === false) {
		this.isShow = false;
	} else {
		this.isShow = true;
	}
	
	this.init();
	
	this.isShow = !this.isShow;
	
	this.onToggle = onToggle;
	this.toggle(true);
};
BeautifulFieldset.prototype = {
	init: function() {
		$(this.el).addClass('beautiful-fieldset');
		this.buildLegend();
	},
	buildLegend: function() {
		var me = this;
		var legend = this.el.children[0];
		this.legend = legend;
		$(legend).html('<div style="width:100%;height:20px;cursor: pointer;">\
			<div style="float:left;">\
				<img class="fieldsetImg" src="beautiful-down.png">\
			</div>\
			<div style="float:left;padding: 1px 0;color: #15428b;font-size:14;">'+legend.innerText+'</div>\
		</div>');
		$(legend).click(function() {
			me.toggle();
		});
	},
	toggle: function(isFirst) {
		if(this.isShow) {
			$(this.legend).find('img')[0].src = 'beautiful-up.png';
			$(this.contentDiv).hide();
			$(this.el).addClass('beautiful-fieldset-collapsed');
		} else {
			$(this.legend).find('img')[0].src = 'beautiful-down.png';
			$(this.contentDiv).show();
			$(this.el).removeClass('beautiful-fieldset-collapsed');
		}
		this.isShow = !this.isShow;
		
		if(!isFirst) {
			this.onToggle && this.onToggle(this.isShow);
		}
	}
};

css

.beautiful-fieldset {
	border: 1px solid #b5b8c8;
	padding: 0 10px;
	margin: 0 0 10px;
}

.beautiful-fieldset-collapsed {
	padding-bottom: 0!important; 
	border-width: 1px 1px 0 1px!important; 
	border-left-color: transparent!important; 
	border-right-color: transparent!important; 
}

图片

beautiful-down.png:

beautiful-up.png:


© 著作权归作者所有

暗之幻影
粉丝 20
博文 377
码字总数 71245
作品 0
南京
高级程序员
私信 提问
Endeavour 1.18.47 发布

Endeavour(中文:奋进号项目周期管理系统)是一个功能丰富基于Web的软件项目管理工具。 Endeavour适合用来管理大规模的迭代和增量企业系统软件项目,主要功能包括:用例管理、迭代开发、项目计...

马登军
2010/09/01
265
0
Liger UI 中,tree如何获取当前节点是否已经展开以及如何展开.

ligerTree 参数列表中有 onClick 事件, 我想绑定当我点击节点时候.判断节点是否已经展开, 如果展开就收缩,否则就展开. 可惜手册上写的有点简单,也没有找到相关例子. 也没有找到对某节点的展开...

泡不烂的凉粉
2013/12/07
1K
1
animate CC 是否能够实现鼠标点击展开/收缩的交互?

如题所示,请问各位大神ANCC能够实现鼠标点击展开/收缩的交互吗?是否需要识别现在状态是展开或者收缩?应该怎么写代码呢?

MEChi
2018/08/01
1K
0
HTML CSS之FORM

form 表单 常用于收集不同类用户的输入,允许用户收集:文本域(text)、下拉列表(select)、单选框(radio)、复选框(checkbox) 以及动按纽(Action) 表单标签 大多数表单标签都是input标签,...

zhangtainren
2015/12/04
0
0
jquery mobile展开和收缩

关于jquery mobile展开和收缩,怎么可以自定义展开和收缩的图片,不用加减号,而用自己的图片?

开源中国首席攻城师
2011/11/16
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

记一次项目启动报java.lang.StackOverflowError

项目是spring boot,之前没有问题,突然有一次debug方式启动的时候报这个错误。 因为其他同事没有问题,线上也没有问题,所以先排除了是代码问题。 开始以为电脑开的软件太多,然后给jvm的内存...

chro008
9分钟前
5
0
idea 2019.2免费激活码

亲测有效到2020.6 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb......

Iverson58
17分钟前
3
0
移动APP开发中的重要注意事项

您的移动app在变化吗?如果没有,请确保遵循这些提示进行移动app开发。大多数行业的IT领导者都优先考虑劳动力和消费者的移动性。实现成功的移动app开发具有挑战性,涉及在app功能开发的基础上...

a429011717
24分钟前
5
0
Qt编写自定义控件69-代码行数统计

一、前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行、注释行、代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计。写完这...

飞扬青云
42分钟前
10
0
驰骋工作流引擎-ccflow关于 “ 是否自动计算未来的处理人”的功能变更

关键字:流程未来节点处理人 工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 业务背景:一个流程在启动起来后,是可以对一些节点计算出来处理人是谁,流程的走向。对于另...

孟娟
58分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部