`
流浪鱼
  • 浏览: 1682145 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

panel源码分析

 
阅读更多

我们使用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;
 }

分享到:
评论

相关推荐

    Panel控件源码

    在实际项目开发中,Panel控件的源码分析有助于我们理解Android系统如何处理布局和视图的层次关系,以及事件分发机制。通过对源码的学习,我们可以更深入地了解Android的UI框架,提高自定义组件的能力。 例如,`...

    extjs grid.panel 项目 源码

    10. **最佳实践**:源码分析也能让我们学习到ExtJS开发的最佳实践,例如如何有效地组织代码,如何优化数据加载,以及如何保持组件的可维护性。 通过深入研究这个"extjs grid.panel 项目 源码",我们可以提升对ExtJS...

    C# panel 缓慢伸出效果源码

    8. **源码分析**:提供的压缩包中的`PanelShow.sln`是解决方案文件,包含了整个项目的配置信息;`PanelShow.suo`是Visual Studio的用户选项文件,通常不包含源代码,而是用户的个人设置;`PanelShow`可能是项目的...

    EXTJS源码分析与开发实例宝典-开发的效果图.rar

    从压缩包子文件的文件名称"EXTJS源码分析与开发实例宝典-开发的效果图.pdf"来看,这可能是一个PDF文档,包含了EXTJS的源码分析和开发实例的详细教程,很可能还包含了各种示例应用的截图,以直观地展示EXTJS的组件和...

    (可行)easyui 实现 panel 拖动效果

    在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建用户界面。本文将深入探讨如何使用EasyUI...结合源码分析和不断实践,你将能更好地掌握这一功能并应用于自己的项目中。

    touch panel原理-MTK

    关于MTK平台touch panel驱动源码分析,了解TP驱动的实现流程

    react-ui-layers-panel-源码.rar

    通过对“react-ui-layers-panel”源码的分析,开发者不仅能了解如何构建此类组件,还能学习到React的最佳实践,提升自己的编程技能。在实际项目中,这样的源码阅读和学习对于提升开发效率和代码质量有着极大的帮助。

    extjs tab panel

    源码分析可能是博客文章的重点,它可能涵盖了ExtJS Tab Panel的内部工作原理,例如组件的构造函数、渲染流程、事件处理等。通过源码学习,开发者可以更深入地理解ExtJS的工作机制,以便于进行自定义扩展和性能优化。...

    Control Panel - Network

    在编程领域,使用源码(如上述的VB文件)来创建控制面板的网络部分意味着开发者可能利用了Windows API函数,如`WinAPI`,来访问和操作系统级别的网络设置。这些API函数允许程序读取和修改网络适配器的配置,如IP地址...

    Control Panel - Power Management

    8. **源码分析**:在提供的文件列表中,Form1.frm、Project1.vbp和Project1.vbw可能是VB6(Visual Basic 6)项目文件。这些文件可能包含了用VB6编写的一个控制面板电源管理小程序的源代码,通过它们,开发者可以学习...

    delphi2010 开发的 图片水印工具 透明Panel,用到拖动控件, 窗体保存图片技术 有源代码

    4. **源代码分析** 提供的源代码包含几个关键文件:Unit1和Unit2的DCU编译文件,它们包含了编译后的类定义和方法;DFM文件(如Unit1.dfm和Unit2.dfm)记录了窗体的设计布局和控件状态;Project1.dpr是项目的主程序...

    secondlife源码分析(pdf版)

    ### SecondLife源码分析知识点概览 #### 一、SecondLife概述及背景 - **SecondLife**是一款由美国公司Linden Lab开发的大型在线虚拟世界平台。用户可以在该虚拟世界中创建自己的虚拟形象,与其他玩家互动,进行...

    easyui学习笔记(九)源码

    在 EasyUI 的学习过程中,源码分析是理解其工作原理、优化应用及定制组件的关键步骤。本笔记主要探讨的是 EasyUI 中与 `datagrid` 相关的部分,通过源码我们可以深入了解数据网格的实现细节。 `datagrid` 是 EasyUI...

    Control Panel - Internet Explorer

    6. **源码分析**:分析`Form1.frm`中的控件布局和事件处理代码,展示如何实现与Internet Explorer的集成。 以上内容将涵盖从基础到进阶的多个层次,帮助读者理解如何利用VB来操作和控制Internet Explorer,以及在...

    PHP实例开发源码—Seo Panel php站长工具免费版.zip

    【标题】"PHP实例开发源码—Seo Panel php站长工具免费版.zip"指的是一个包含PHP源代码的压缩包,该源代码用于构建一个名为Seo Panel的网站优化工具。Seo Panel是一款针对站长的免费SEO管理平台,帮助用户监控和优化...

    touchpanel

    通过分析和理解这些源码,开发者可以调整校准过程以适应不同的触控屏硬件,优化响应速度,提高精度,甚至解决特定环境下的触摸漂移问题。此外,了解校准流程还能帮助开发自定义的触控解决方案,以满足特定应用场景的...

    Control Panel - Create New Shortcut

    综合以上分析,这个压缩包提供了一个编程示例,教用户如何通过编写代码在Windows系统中创建控制面板的快捷方式。学习这个项目,开发者可以了解到如何利用编程语言与操作系统进行交互,创建桌面快捷方式,以及如何...

    grafana-button-panel-master_php_

    压缩包子文件的文件名称列表只有一个:“grafana-button-panel-master”,这通常是一个Git仓库的名字,表示它是Grafana按钮面板的主分支或者源码目录。通常,这个目录下会包含以下结构: 1. `README.md`:项目说明...

    Ch8_panel;threshold_

    在本节中,我们将深入探讨面板数据门限回归模型(Panel Threshold Regression)的基本概念和Stata软件中的应用方法。面板数据是一种特殊的统计分析数据类型,它结合了时间序列和横截面数据,允许我们研究个体随时间...

Global site tag (gtag.js) - Google Analytics