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

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 : '',
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(){

}
});

你可能感兴趣的:(Js/Css)