效果图:
各文件路径(我的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>
相关推荐
easyui-lang-zh_CN.js easyui-lang-zh_CN.js 页面开发,使用easyui,进行汉化使用js文件
easyui插件的支持日期汉化,分页汉化,form表单提示汉化。
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
easyui日期,时间框汉化包,汉化easyui日期控件,时间控件。
EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了丰富的UI组件,如表格、下拉菜单、对话框、表单等,这些组件具有响应式设计,可以在不同的设备上提供一致的用户体验。EasyUI的核心优势在于其简洁的API和...
1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)、下拉选择框(ComboBox)等,这些组件大大简化了网页界面的设计和交互实现。...
EasyUI是由一系列预先定义好的CSS样式和JavaScript组件组成的,这些组件包括布局、表格、表单、窗口、菜单、对话框等,它们都是按照MVC(Model-View-Controller)模式设计的,使得开发者可以专注于业务逻辑,无需...
jQuery EasyUI 是一个基于 jQuery 的轻量级、高效的前端开发框架,它为开发者提供了丰富的UI组件,大大简化了网页应用的开发过程。这个“jquery-easyui-EDT-1.4.5-build1”版本是EasyUI的一个特定构建,被广泛认为是...
2. **EasyUI皮肤组件**:EasyUI的皮肤组件是一系列预设样式和主题,它们可以改变EasyUI组件的外观,使其符合不同项目的需求。这可能包括颜色方案、字体样式、边距和间距等。通过这些皮肤,开发者可以轻松调整后台...
<script type="text/javascript" src="path/to/jquery-easyui-1.4/jquery.easyui.min.js"> ``` 5. **自定义主题** 如果预设的主题无法满足需求,EasyUI 提供了 ThemeBuilder 工具,允许开发者根据自己的设计进行...
### EasyUI指定列-合并相同数据行 #### 易理解释与应用场景 在日常的数据处理过程中,经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库,提供了丰富的功能来帮助开发者高效地...
在【压缩包子文件的文件名称列表】中,“easyUI”可能是整个模板或EasyUI框架的主要文件夹,其中可能包含了CSS样式文件、JavaScript脚本、图片资源、示例代码以及帮助文档等。开发者可以通过解压这个文件夹,查看和...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的组件,如对话框、表单、表格等,帮助开发者快速构建功能丰富的Web页面。"easyui-crud-demo" 是一个使用 jQuery EasyUI 实现的CRUD(创建、读取、更新...
Easyui的扩展datagrid-dnd.js,实现拖动datagrid行到其他数据表格的必要文件
《easyUI与SpringMVC整合实现Tree组件操作详解》 在Web开发中,前端界面的交互性和用户体验至关重要,其中树形结构(Tree)组件是一种常用的数据展示方式,它能够清晰地展示层次关系,便于用户浏览和操作。EasyUI是...
EasyUI修改DateBox和DateTimeBox的默认日期格式,easyui日期出现英文的情况下加载中文的方法
EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展他们。 -------------------------------------------------------------------------------- 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults...
easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...
5. 插件扩展:除了核心组件,EasyUI社区还提供了许多第三方插件,进一步增强其功能。 通过研究这个压缩包中的资源,开发者不仅可以熟悉jQuery EasyUI的基础用法,还可以深入探究其高级特性和应用场景,从而在实际...