- 浏览: 1684602 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1323)
- easyui学习 (21)
- jquery (51)
- css (21)
- js (103)
- html (19)
- java (95)
- 测试工具 (7)
- oracle (45)
- eclipse (9)
- spring (8)
- 开源框架 (111)
- struts (12)
- hsqlbd (2)
- h2database (2)
- maven (8)
- activiti (2)
- sql语句 (7)
- fmpp (1)
- apache (2)
- tomcat (6)
- jbpm (2)
- ant (20)
- mysql (10)
- 业务需求 (54)
- ralasafe (3)
- Quartz (4)
- mybatis (8)
- flex (6)
- html5 (16)
- apache工具 (4)
- hibernate (5)
- linux (109)
- powerdesigner (3)
- 报表 (1)
- log4j (2)
- junit (1)
- shiro (4)
- wap (3)
- php (28)
- mantis (1)
- poi (3)
- extjs (1)
- 安防 (34)
- 网络 (113)
- UltraEdit (1)
- 手机 (9)
- freemarker (19)
- jquery mobile (28)
- css3 (1)
- 微信 (9)
- nodejs (7)
- 项目管理 (14)
- 文档 (13)
- ibatis (22)
- ftp (3)
- spring MVC (9)
- groovy (2)
- AngularJS (19)
- nginx (15)
- 会计 (5)
- hive (1)
- 分布式 (8)
- 设计模式 (4)
- velocity (2)
- 爬虫 (2)
- git (1)
- thymeleaf (4)
- activemq (5)
- bootstrap (1)
- Spring Batch (1)
- memcache (20)
- ttserver (1)
- Jenkins (1)
- cxf (1)
- axure (2)
- 银行金融 (11)
- c语言 (2)
- 大数据 (4)
- drools (4)
- python (2)
- 交易所 (1)
- haproxy (1)
- dubbo (3)
- dos (3)
- 人力资源 (4)
- 支付 (1)
- Intellij IDEA (1)
- IPO (1)
- springboot (1)
- 质量管理 (7)
- svn (1)
- 其他 (8)
- 阿里云 (2)
- 多媒体设计 (2)
- 数据库 (4)
- wps (0)
最新评论
-
masuweng:
en
Native.js -
rmnjava:
我按照你的方法写的,不起作用啊
easyui验证的删除和恢复 -
rmnjava:
原地址打不开了呀
easyui验证的删除和恢复 -
sunteng:
sunteng 写道这是json 吗[{url:'aaa'}, ...
freemarker解析json数组 -
sunteng:
这是json 吗
freemarker解析json数组
我们使用easyui的panel时,只需要指定一个div和相关的属性就可以生成带操作按钮的panel。
原始div的代码为:
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" iconCls="icon-save" collapsible="true" minimizable="true" maximizable=true closable="true"> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div>
而经过easyui转换后的代码为:
<div class="panel" style="display: block; width: 500px;"> <!--头--> <div class="panel-header" style="width: 488px;"> <!--标题并且带有图标--> <div class="panel-title panel-with-icon">My Panel</div> <!--图标--> <div class="panel-icon icon-save"></div> <!--操作小按钮--> <div class="panel-tool"> <div class="panel-tool-close"></div> <div class="panel-tool-max"></div> <!--还原按钮 <div class="panel-tool-max panel-tool-restore"></div> --> <div class="panel-tool-min"></div> <div class="panel-tool-collapse"></div> <!--展开按钮 <div class="panel-tool-collapse panel-tool-expand"></div> --> </div> </div> <!--主体--> <div closable="true" maximizable="true" minimizable="true" collapsible="true" iconcls="icon-save" title="" style="width: 478px; height: 152px; padding: 10px;" class="easyui-panel panel-body" id="p"> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div>
通过对比可以发现,通过easyui转换后的<!--主体-->div和是原始div代码一样只是添加了一些类如panel-body,并改变div宽度和高度。
根据源码可以分析出easyui的panel生成步骤如下:
1.根据传入的参数来决定是执行相应的方法还是进行初始化
2.初始化时对原始的div进行了包装,包装函数为wrapPanel(this)
//封装panel function wrapPanel(target){ var panel = $(target).addClass('panel-body').wrap('<div class="panel"></div>').parent(); panel.bind('_resize', function(){ var opts = $.data(target, 'panel').options; //如果fit=true就自动适应 if (opts.fit == true){ setSize(target); } //取消默认的事件 return false; }); return panel; }
此函数主要是在原始div增加了panel-body类,并外部包装了一个<div class="panel"></div>
生成后的html代码为
<div class="panel"> <!--主体--> <div closable="true" maximizable="true" minimizable="true" collapsible="true" iconcls="icon-save" title="" style="width: 478px; height: 152px; padding: 10px;" class="easyui-panel panel-body" id="p"> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div>
3.添加panel头和标题,调用的函数addHeader(this);
具体代码如下:
//添加表头函数 function addHeader(target){ var opts = $.data(target, 'panel').options; var panel = $.data(target, 'panel').panel; //删除原来的表头 removeNode(panel.find('>div.panel-header')); //如果有标题且包含表头 if (opts.title && !opts.noheader){ //把<div class="panel-header"><div class="panel-title">标题</div></div>前置到panel中 var header = $('<div class="panel-header"><div class="panel-title">'+opts.title+'</div></div>').prependTo(panel); /*如果有iconCls属性,即: <div class="panel-header"> <div class="panel-title panel-with-icon">标题</div> <div class="panel-icon icon-save"></div> </div> */ if (opts.iconCls){ //在<div class="panel-title">中加panel-with-icon类 header.find('.panel-title').addClass('panel-with-icon'); //在<div class="panel-header">尾部加<div class="panel-icon"></div> $('<div class="panel-icon"></div>').addClass(opts.iconCls).appendTo(header); } //在<div class="panel-header">尾部加<div class="panel-tool"></div> var tool = $('<div class="panel-tool"></div>').appendTo(header); /*如果有closable属性,即: <div class="panel-tool"> <div class="panel-tool-close"></div> </div> */ if (opts.closable){ //在<div class="panel-tool"></div>尾部加<div class="panel-tool-close"></div>,并添加click监听 $('<div class="panel-tool-close"></div>').appendTo(tool).bind('click', onClose); } //最大化 if (opts.maximizable){ $('<div class="panel-tool-max"></div>').appendTo(tool).bind('click', onMax); } //最小化 if (opts.minimizable){ $('<div class="panel-tool-min"></div>').appendTo(tool).bind('click', onMin); } //折叠 if (opts.collapsible){ $('<div class="panel-tool-collapse"></div>').appendTo(tool).bind('click', onToggle); } //如果定义了tools属性 if (opts.tools){ for(var i=opts.tools.length-1; i>=0; i--){ var t = $('<div></div>').addClass(opts.tools[i].iconCls).appendTo(tool); if (opts.tools[i].handler){ t.bind('click', eval(opts.tools[i].handler)); } } } /*对按钮图标hover进行监听,即对 <div class="panel-tool-close"></div> <div class="panel-tool-max"></div> <div class="panel-tool-min"></div>,进行监听 */ tool.find('div').hover( function(){$(this).addClass('panel-tool-over');}, function(){$(this).removeClass('panel-tool-over');} ); //删除body中没有panel-body-noheader的样式 panel.find('>div.panel-body').removeClass('panel-body-noheader'); } else { //否则就在div.panel-body加panel-body-noheader样式 panel.find('>div.panel-body').addClass('panel-body-noheader'); } //折叠 function onToggle(){ if ($(this).hasClass('panel-tool-expand')){ expandPanel(target, true); } else { collapsePanel(target, true); } return false; } //最小化 function onMin(){ minimizePanel(target); return false; } //最大化 function onMax(){ if ($(this).hasClass('panel-tool-restore')){ restorePanel(target); } else { maximizePanel(target); } return false; } //关闭 function onClose(){ closePanel(target); return false; } }
其本质就是生成按钮div,并绑定相应的操作函数,具体的我在函数里边都已经添加注释。
4.根据状态打开和关闭panel,至此panel渲染完毕
源代码中发现东东:
1.在panel中所有的事件,不是通过bind和trigger来触发的,而是直接通过函数调用来触发的,触发的方式为
opts.onMaximize.call(target);和opts.onResize.apply(target, [opts.width, opts.height]);
2.panel-body的样式可以看出技巧,先设置所有border的样式,完了让顶部的宽度为0px
.panel-body{
overflow:auto;
border:1px solid #99BBE8;
border-top-width:0px;
}
发表评论
-
easyui datagird 拖拽
2017-09-28 08:18 406http://www.jeasyui.net/extens ... -
火狐下easyui1.3.1弹出window框定位不到中间
2012-11-15 13:02 2553今天在测试easyui升级的时候,出现了一个问题就是弹出win ... -
easyui验证的删除和恢复
2012-11-15 11:51 10817昨天群里讨论easyui验证动态的添加和删除时,群主给出了一个 ... -
easyui验证扩展
2012-11-15 10:45 1418我们都知道easyui的验证就提供了几个简单的,远远是不够我们 ... -
easyui的按钮点击时layout布局west隐藏
2012-10-26 17:30 520当我们在用easyui的laoyout布局时,如果显示主页面采 ... -
取到easyui的tab下iframe方法
2012-09-05 17:53 18149我们在使用easyui的tab时,有时候需要每次点击tab头, ... -
combotree的setValue指定值后不能展开
2012-07-31 11:01 516$.extend($.fn.combotree.methods ... -
easyui的combotree反写的方式
2012-06-27 15:30 637我们在使用easyui的combotree的时候肯定在修改的时 ... -
easyui验证扩展包括半角.
2012-06-25 14:01 455easyui验证扩展包括半角. $.extend($. ... -
判断页面是否有window、messager显示
2012-03-26 17:23 1576判断页面是否有window、message显示 ... -
修改Messager中的alert方法info默认图片
2012-03-14 12:51 1358在项目中有个同事说alert中info的那个图片太丑了,能不能 ... -
datagird分页查询问题
2012-02-15 15:28 535在使用datagrid查询时,如果把当前页不在第一页的话,查 ... -
easyui中datagrid查询时使用对象名
2012-02-15 10:17 757easui中查询的时候如果使用的是对象,在查询中 ... -
datagrid的扩展
2011-11-23 22:50 1312finder: function(jq, condition ... -
datagrid扩展editor
2011-11-17 14:50 2894easyui1.2.4支持了数据编辑功能,但提供的东西有限,所 ... -
eayui的validatebox分析
2011-10-11 15:12 3854在分析eayui的validatebox的源代码中发现, ... -
tabs源码分析
2011-10-10 11:37 1923easyui的tabs源码分析 使用原始的html di ... -
panel中没有title整个头不显示
2011-09-27 17:33 3254在使用easyui-panel中,如果div中没有指定tit ... -
css a:hover属性使用发现问题
2011-09-27 11:09 1997在看easyui的linkbutton的源码样式时,发现了一个 ... -
easyui使用的两种引用方式
2011-09-22 16:03 7354easyui使用的两种引用方式: 1.easyui全部引用 ...
相关推荐
在实际项目开发中,Panel控件的源码分析有助于我们理解Android系统如何处理布局和视图的层次关系,以及事件分发机制。通过对源码的学习,我们可以更深入地了解Android的UI框架,提高自定义组件的能力。 例如,`...
10. **最佳实践**:源码分析也能让我们学习到ExtJS开发的最佳实践,例如如何有效地组织代码,如何优化数据加载,以及如何保持组件的可维护性。 通过深入研究这个"extjs grid.panel 项目 源码",我们可以提升对ExtJS...
8. **源码分析**:提供的压缩包中的`PanelShow.sln`是解决方案文件,包含了整个项目的配置信息;`PanelShow.suo`是Visual Studio的用户选项文件,通常不包含源代码,而是用户的个人设置;`PanelShow`可能是项目的...
从压缩包子文件的文件名称"EXTJS源码分析与开发实例宝典-开发的效果图.pdf"来看,这可能是一个PDF文档,包含了EXTJS的源码分析和开发实例的详细教程,很可能还包含了各种示例应用的截图,以直观地展示EXTJS的组件和...
在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建用户界面。本文将深入探讨如何使用EasyUI...结合源码分析和不断实践,你将能更好地掌握这一功能并应用于自己的项目中。
关于MTK平台touch panel驱动源码分析,了解TP驱动的实现流程
通过对“react-ui-layers-panel”源码的分析,开发者不仅能了解如何构建此类组件,还能学习到React的最佳实践,提升自己的编程技能。在实际项目中,这样的源码阅读和学习对于提升开发效率和代码质量有着极大的帮助。
源码分析可能是博客文章的重点,它可能涵盖了ExtJS Tab Panel的内部工作原理,例如组件的构造函数、渲染流程、事件处理等。通过源码学习,开发者可以更深入地理解ExtJS的工作机制,以便于进行自定义扩展和性能优化。...
在编程领域,使用源码(如上述的VB文件)来创建控制面板的网络部分意味着开发者可能利用了Windows API函数,如`WinAPI`,来访问和操作系统级别的网络设置。这些API函数允许程序读取和修改网络适配器的配置,如IP地址...
8. **源码分析**:在提供的文件列表中,Form1.frm、Project1.vbp和Project1.vbw可能是VB6(Visual Basic 6)项目文件。这些文件可能包含了用VB6编写的一个控制面板电源管理小程序的源代码,通过它们,开发者可以学习...
4. **源代码分析** 提供的源代码包含几个关键文件:Unit1和Unit2的DCU编译文件,它们包含了编译后的类定义和方法;DFM文件(如Unit1.dfm和Unit2.dfm)记录了窗体的设计布局和控件状态;Project1.dpr是项目的主程序...
### SecondLife源码分析知识点概览 #### 一、SecondLife概述及背景 - **SecondLife**是一款由美国公司Linden Lab开发的大型在线虚拟世界平台。用户可以在该虚拟世界中创建自己的虚拟形象,与其他玩家互动,进行...
在 EasyUI 的学习过程中,源码分析是理解其工作原理、优化应用及定制组件的关键步骤。本笔记主要探讨的是 EasyUI 中与 `datagrid` 相关的部分,通过源码我们可以深入了解数据网格的实现细节。 `datagrid` 是 EasyUI...
6. **源码分析**:分析`Form1.frm`中的控件布局和事件处理代码,展示如何实现与Internet Explorer的集成。 以上内容将涵盖从基础到进阶的多个层次,帮助读者理解如何利用VB来操作和控制Internet Explorer,以及在...
【标题】"PHP实例开发源码—Seo Panel php站长工具免费版.zip"指的是一个包含PHP源代码的压缩包,该源代码用于构建一个名为Seo Panel的网站优化工具。Seo Panel是一款针对站长的免费SEO管理平台,帮助用户监控和优化...
通过分析和理解这些源码,开发者可以调整校准过程以适应不同的触控屏硬件,优化响应速度,提高精度,甚至解决特定环境下的触摸漂移问题。此外,了解校准流程还能帮助开发自定义的触控解决方案,以满足特定应用场景的...
综合以上分析,这个压缩包提供了一个编程示例,教用户如何通过编写代码在Windows系统中创建控制面板的快捷方式。学习这个项目,开发者可以了解到如何利用编程语言与操作系统进行交互,创建桌面快捷方式,以及如何...
压缩包子文件的文件名称列表只有一个:“grafana-button-panel-master”,这通常是一个Git仓库的名字,表示它是Grafana按钮面板的主分支或者源码目录。通常,这个目录下会包含以下结构: 1. `README.md`:项目说明...
在本节中,我们将深入探讨面板数据门限回归模型(Panel Threshold Regression)的基本概念和Stata软件中的应用方法。面板数据是一种特殊的统计分析数据类型,它结合了时间序列和横截面数据,允许我们研究个体随时间...