带展开收缩的fieldset

最新推荐文章于 2024-05-15 20:43:52 发布

weixin_34360651

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量352

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/darkness/blog/361212

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用

示例代码

<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; 
}