JQuery仿的Extjs控件和界面(有图)

利用ExtJS简化界面开发并提升JQuery和CSS技能

最新推荐文章于 2016-11-19 19:09:33 发布

最新推荐文章于 2016-11-19 19:09:33 发布 · 375 阅读

文章标签：

#jQuery #ITeye #CSS #EXT #IDEA #ViewUI

Js/Css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何通过模仿ExtJS的相关界面来简化界面开发过程，并在此过程中提高对JQuery和CSS的理解。具体展示了如何创建TreePanel、AccordionPanel、WindowPanel、MsgPanel、ToolBar和一个简单的布局，只需引入相应的JS和CSS即可实现基本功能。

Extjs的出现为我们这些不会做界面的人带来了不少的便利，但是我感觉学起来挺麻烦的(我感觉)，就模仿一下ext的相关界面，一来用的时候也简单，二来提高一下自己对Jquery和Css的掌握程度。
现在就做了几个简单的小功能，TreePanel,accordionPanel,WindowPanel,MsgPanel,ToolBar,和一个简单的layout，使用的时候引入以上的几个js和对应的css即可。
如下图：
1、TreePanel、 GridPanel、toolBar

[img]http://dl.iteye.com/upload/attachment/497969/3bd2c3ea-8511-3870-8da0-c3ea8d61c3f3.png[/img]
这个页面有个TreePanel 和一个 GridPanel以及一个ToolBar

//创建树控件
new TreePanel({
				renderTo : 'tree',
				treeNodes:nodes,
				click:function(node){

				}
			});

//创建表格控件
		new GridPanel({
		title : '部门管理',
		titleTable : 'titleTable',
		dataTable : 'dataTable',
		width:[25,200,200,180,180,],
		toolBar : true
		});

//添加toolBar
		var toolBar = new ToolBar({
			renderTo : 'toolBar',
			items : [{
				text : '新建',
				pic : 'add',
				handler : function(){

				}		
			},'-',{
				text:'修改',
				pic:'edit',
				handler:function(){

				}
			}]

		}).render();
		});

2、WindowPanel
[img]http://dl.iteye.com/upload/attachment/497975/813dc5f8-5239-3d42-8993-e214c5aa1ebd.png[/img]
这是一个WindowPanel

new WindowPanel({
			id : 'saveDepartment',
			title:'添加部门',
			width:420,
			height:200,
			html : '<iframe name="saveDepartment" id="saveDepartment"  frameborder="0"></iframe>',
			toolBar : new ToolBar({
				items:[{
					text : '保存',
					pic : 'add',
					userable:'true',
					handler : function(){

					}	
			}]
			})
		});

3、MsgPanel
[img]http://dl.iteye.com/upload/attachment/497977/1630b119-5338-3e69-974d-f3d4726f58d3.png[/img]
这是一个弹出框

new Msg({
	    	title : '提示',
	    	content:'恩？，成功啦，成功啦',
	    	handler: function(){

	    	}
	    });