[js]Easyui组件扩展--fieldset

最新推荐文章于 2021-06-03 03:07:48 发布
最新推荐文章于 2021-06-03 03:07:48 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： js 文章标签： js easyui ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010398336/article/details/84747716
版权
本文介绍了如何扩展Easyui的fieldset组件，展示了扩展后的效果，并提供了相关文件的路径，包括lq.fieldset.js、extrafieldsetlq.fieldset.css以及示例页面lq.fieldset.html。
摘要由CSDN通过智能技术生成

效果图：


 

各文件路径（我的extra文件夹与easyui文件夹在同一等级）：

extra\fieldset\lq.fieldset.js主要js文件
extra\fieldset\lq.fieldset.css主要样式文件
extra\fieldset\lq.fieldset.html测试页面
extra\fieldset\images\panel_tools.png按钮图标（拷贝于easyui，可根据主题不同进行修改）

 

lq.fieldset.js

/*
	Easyui1.4.2
	Create time:2015-11-02  Author:duolaaqian
	
	$("#fs").lqfieldset({
		title:'个人信息',				//标题显示文字
		collapsible:true,				//是否可伸缩
		collapsed:false,				//初始化状态 是否为收起状态
		checkboxToggle:false,			//伸缩按钮是否为checkbox
		onBeforeCollapse:function(){	//收起之前调用该方法，返回false则取消收起
		},
		onCollapse:function(){			//收起之后调用该方法
		},
		onBeforeExpand:function(){		//展开之前调用该方法，返回false则取消展开
		},
		onExpand:function(){			//展开之后调用该方法
		}
	});
	
	$("#fs").lqfieldset('collapse');	//收起组件
	$("#fs").lqfieldset('expand');		//展开组件
*/
;(function ($) {
	//添加自定义方法
	function initFieldSet(thisObj){
		initDom(thisObj);
		refreshFront(thisObj);
	};
	function initDom(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var innerDom = $(thisObj).wrap("<fieldset class='lq-fieldset'></fieldset>");
		innerDom.wrap('<div class="lq-fieldset-wrapmain" ></div>');
		innerDom = innerDom.parent('div.lq-fieldset-wrapmain');
		if(thisOptions.title||thisOptions.collapsible){
			var fieldSetDom = innerDom.parent('fieldset');
			thisOptions.fieldSetDom = fieldSetDom;
			var checkboxToggle = thisOptions.checkboxToggle;
			if(checkboxToggle){
				innerDom = innerDom.before("<legend class='lq-fieldset-legend'>"
						+'<input type="checkbox" />'
						+'<span>'+thisOptions.title+"</span></legend>");
				var dd = fieldSetDom.find('input[type=checkbox]');
				dd.unbind('.lqfieldset').bind('change.lqfieldset',function(){
					var checked = $(this).prop("checked");
					if(checked){
						doExpand(thisObj);
					}else{
						doCollapse(thisObj);
					}
				});
			}else{
				innerDom = innerDom.before("<legend class='lq-fieldset-legend'>"
						+'<a href="javascript:void(0)" class="lq-fieldset-legend-icon"></a>'
						+'<span>'+thisOptions.title+"</span></legend>");
				var dd = fieldSetDom.find('a.lq-fieldset-legend-icon');
				dd.unbind('.lqfieldset').bind('click.lqfieldset',function(){
					var collapsed = thisOptions.collapsed;
					if(collapsed){
						doExpand(thisObj);
					}else{
						doCollapse(thisObj);
					}
				}).bind('mouseover',function(){
					dd.removeClass("mouseout").addClass("mouseover");
				}).bind('mouseout',function(){
					dd.removeClass("mouseover").addClass("mouseout");
				});
			}
			if(!thisOptions.collapsible){
				fieldSetDom.find('.lq-fieldset-legend a').remove();
				fieldSetDom.find('.lq-fieldset-legend input[type=checkbox]').remove();
			}
		}
		diLimitSize(thisObj,innerDom);
	};
	function refreshFront(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var collapsed = thisOptions.collapsed;
		if(collapsed){
			doCollapse(thisObj);
		}else{
			doExpand(thisObj);
		}
	};
	//收缩
	function doCollapse(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		if(thisOptions.onBeforeCollapse.call(thisObj) == false){
			return;
		}
		var fieldSetDom = thisOptions.fieldSetDom;
		thisOptions.collapsed = true;
		fieldSetDom.removeClass('expand').addClass('collapse');
		fieldSetDom.find('input[type=checkbox]').prop('checked',false);
		thisOptions.onCollapse.call(thisObj);
	};
	//展开
	function doExpand(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		if(thisOptions.onBeforeExpand.call(thisObj) == false){
			return;
		}
		var fieldSetDom = thisOptions.fieldSetDom;
		thisOptions.collapsed = false;
		fieldSetDom.removeClass('collapse').addClass('expand');
		fieldSetDom.find('input[type=checkbox]').prop('checked',true);
		thisOptions.onExpand.call(thisObj);
	};
	function diLimitSize(thisObj,innerDom){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var innerHeight = innerDom.height();
		var maxHeight = thisOptions.maxHeight;
		var minHeight = thisOptions.minHeight;
		if( maxHeight && $.isNumeric(maxHeight) ){
			if(innerHeight>maxHeight){
				innerDom.height(maxHeight);
			}
		}
		if( minHeight && $.isNumeric(minHeight) ){
			if(innerHeight<minHeight){
				innerDom.height(minHeight);
			}
		}
		var innerWidth = innerDom.width();
		var maxWidth = thisOptions.maxWidth;
		var minWidth = thisOptions.minWidth;
		if(maxWidth&&$.isNumeric(maxWidth)){
			if(innerWidth>maxWidth){
				innerDom.width(maxWidth);
			}
		}
		if(minWidth&&$.isNumeric(minWidth)){
			if(innerWidth<minWidth){
				innerDom.width(minWidth);
			}
		}
	};

	//初始化组件的时候调用此方法
    $.fn.lqfieldset = function(param1,param2){
		if (typeof param1 == "string") {
			return $.fn.lqfieldset.methods[param1](this, param2);
		}
		param1 = param1 || {};
		return this.each(function() {
			var thisData = $.data(this, "lqfieldset");
			if (thisData) {
				$.extend(thisData.options, param1);
			} else {
				thisData = $.data(this, "lqfieldset", {
					options : $.extend( {}, $.fn.lqfieldset.defaults, param1)
				});
				initFieldSet(this);//自定义方法
			}
		});
    };
	//定义默认属性，初始化的时候可调用
	$.fn.lqfieldset.defaults = {
		title:"",
		maxHeight:null,
		collapsible: true,//是否可缩放
		collapsed: true,//初始状态是否缩放
		checkboxToggle: false,//缩放按钮是否显示为checkbox
		onBeforeCollapse:function(){
		},
		onCollapse:function(){
		},
		onBeforeExpand:function(){
		},
		onExpand:function(){
		}
	}
	//支持的方法
	$.fn.lqfieldset.methods = {
		lqfieldset:function(){
			alert("lqfieldset!");
		},
		options: function(thisObj) {
			var thisOptions = $.data(thisObj[0], "lqfieldset").options;
			return thisOptions;
		},
		collapse:function(thisObj){
			thisObj.each(function(){
				doCollapse(this);
			});
		},
		expand :function(thisObj){
			thisObj.each(function(){
				doExpand(this);
			});
		}
	}
})(jQuery);

 

extra\fieldset\lq.fieldset.css

.lq-fieldset{border:1px solid;padding:10px;/*margin-bottom:10px;*/display:block;}
.lq-fieldset.collapse{padding-bottom:0 !important;border-width:1px 1px 0 1px !important;border-left-color:transparent;border-right-color:transparent;}
.lq-fieldset.expand{}

.lq-fieldset .lq-fieldset-wrapmain{overflow:auto;}
.lq-fieldset.expand .lq-fieldset-wrapmain{display:block;}
.lq-fieldset.collapse .lq-fieldset-wrapmain{display:none;}

.lq-fieldset-legend{}
.lq-fieldset-legend a{width:16px;height:16px;opacity:0.6;display:inline-block;margin:0 2px 0 2px;vertical-align:top}
.lq-fieldset-legend a.mouseout{opacity:0.6;}
.lq-fieldset-legend a.mouseover{opacity:1;}

.lq-fieldset-legend>span{font:bold 12px verdana,helvetica,arial,sans-serif;}

/*yuan jiao*/
.lq-fieldset{border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}

/*icon*/
.collapse .lq-fieldset-legend-icon{background: url('images/panel_tools.png') no-repeat -32px -16px;}
.expand .lq-fieldset-legend-icon{background: url('images/panel_tools.png') no-repeat -32px 0;}

/***color***/
.lq-fieldset{border-color: #95B8E7;}/*边框颜色*/
.lq-fieldset-legend>span{color:#15428b;}/*标题颜色*/

 

lq.fieldset.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>fieldset</title>
<script type="text/javascript" src="../../jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../../jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="lq.fieldset.css"/>
<script type="text/javascript" src="lq.fieldset.js"></script>
<style type="text/css">
.text-align-right{
	text-align:right
}
</style>
<script type="text/javascript">
$(function(){
	$("#fs").lqfieldset({
		title:'个人信息',
		collapsible:true,
		collapsed:false,
		checkboxToggle:false
	});
});
</script>
</head>
<body>
	<div style="width:300px;">
		<div id="fs">
			<table>
				<tr>
					<td class="text-align-right">姓名：</td>
					<td><input type="text" class="easyui-textbox" /></td>
				</tr>
				<tr>
					<td class="text-align-right">性别：</td>
					<td><input type="text" class="easyui-textbox" /></td>
				</tr>
				<tr>
					<td class="text-align-right">出生日期：</td>
					<td><input type="text" class="easyui-textbox" /></td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

 

哆啦A芊
关注
专栏目录
JQuery专栏之二————EasyUI表单及其控件的jQuery语句设计。
AndyYuan317的博客
04-09 602
2. EasyUI表单及其控件的jQuery语句设计。 本例利用HTML语句定义一个EasyUI表单控件myForm1，在这个表单中添加多种EasyUI类型控件，其中包括textbox、numberbox、datebox、combobox等。jQuery程序代码在<scipt>…</scipt>之间定义，从$(document).ready(function(){});语...
easyui-lang-zh_CN.js，easyui汉化包
08-09
easyui插件的支持日期汉化，分页汉化，form表单提示汉化。
＜fieldset＞ 标签
YNanzhi的博客
03-16 1654
<fieldset> 标签可以将表单内的相关元素分组。 <fieldset> 标签会在相关表单元素周围绘制边框。 <legend> 标签为 <fieldset> 元素定义标题。 属性： disabled 值：disabled 描述：规定该组中的相关表单元素应该被禁用。 2.form 值：form_id 描述：规定 fieldset 所属的一个或多个表单。 3.name 值：text 描述：规定 fieldset 的名称。 ...
EasyUI问题
前端
08-13 216
fieldset边框颜色问题 设置边框： style="width: 800px;height:45%;margin-bottom:2px;border: thin groove rgb(190, 210, 255);" 实际效果： 期望效果： 分析： 主要是边框样式导致的颜色设置失效，设置的border-style:groove ;style:groove定义 3D 凹槽边框。将样式修改为...
easyui问题小结
weixin_30341745的博客
09-02 112
问题一：如何将easyui的west面板上的收缩箭头隐藏？ 如图效果: 做法： <div data-options="region:'west'" style="width:200px;"> <div class="easyui-panel" data-options="title:'功能导航',border:false,fit:...
将数据处理成easyui控件需要的格式
weixin_30587025的博客
05-24 89
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; using Newtonsoft.Json; using Newtonsoft.Json.Converters; namespace Original.Common...
easyui-lang-zh_CN(汉化包).js
07-16
easyui日期，时间框汉化包，汉化easyui日期控件，时间控件。
jquery-easyui-EDT-1.5.2-build1
05-08
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
后台模板HTML+整套Easyui皮肤组件-后台管理系统模板
03-18
EasyUI是一个基于JavaScript和jQuery的前端框架，它提供了丰富的UI组件，如表格、下拉菜单、对话框、表单等，这些组件具有响应式设计，可以在不同的设备上提供一致的用户体验。EasyUI的核心优势在于其简洁的API和...
2套后台模板HTML+整套Easyui皮肤组件-后台管理系统模板
07-22
2. **EasyUI皮肤组件**：EasyUI的皮肤组件是一系列预设样式和主题，它们可以改变EasyUI组件的外观，使其符合不同项目的需求。这可能包括颜色方案、字体样式、边距和间距等。通过这些皮肤，开发者可以轻松调整后台...
EasyUI学习之Combobox级联下拉列表(2)
11-27
本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码，供大家参考，具体内容如下 1. html代码 信息查询 学校： <input class="easyui-combobox" type="text" id="School" />      院系： <input class="easyui-combobox" t
html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上
weixin_29915703的博客
06-03 763
HTML里面有一个标签fieldset，可以实现文字写在边框上，今天项目想实现一个类似效果，并要求自定义边框上文字距离一侧的距离。下面青岛星网跟大家分享下纯CSS的实现方法。先看下效果HTML部分代码文字标题占位文字占位文字文字标题占位文字占位文字CSS部分代码*{margin:0;padding:0;}.wrap{margin: 100px auto;width: 500px;}/* 方法一 s...
fieldset效果
weixin_30576859的博客
02-27 127
<form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> <fieldset> <legen...
快速 fieldset 属性详解
qq_44158936的博客
03-27 3742
fieldset 元素通常用来对表单中的控制元素进行分组(也包括 label 元素) 1、属性 fieldset 中包含 所有全局属性 disabled 如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外, 例如, 禁止编辑. 该元素和它的子元素不会接受任何浏览器事件, 比如点击或者 focus 事件, 一般来说浏览器会将这...
EasyUI扩展方法 + jutil.js
weixin_30343157的博客
03-30 183
​ EasyUI扩展方法 + jutil.js 博客分类： jQueryEasyUi EasyUI扩展方法： 1、我想指定textarea的行，但editor:{type:'textarea', options: {rows:'4'}}这样写不行。请问大家...
fieldset和legend
softwareZhou的博客
12-23 697
个人信息             身高：             体重：       注解： 1、标签将表单内容的一部分打包，生成一组相关表单的字段。       当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，甚至可以创建一个子表单来处理这些元素。 2、标签没有必需的或唯一的属性。 3、标签的显示效果：周围的边框即是。
fieldset的边框颜色
weixin_33772645的博客
05-09 1621
基本设置： 名称： 描述： <fieldset style="border:1px solid #EBEBEB;"> <legend>基本设置：</legend> <label...
"使用jQuery-EasyUI组件构建Web页面培训总结
在js-day06培训中，要求使用jQuery-EasyUI组件构建自己的Web页面，并使用Jsp/Js/Ajax/Json/Jquery/Easyui、Servlet、JDBC、Lucene/Mysql/Oracle完成数据库分页。此外，还要求学员查阅文档，使用jQuery-EasyUI构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值