六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 155|回复: 0

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

[复制链接]

升级  51.33%

33

主题

33

主题

33

主题

秀才

Rank: 2

积分
127
 楼主| 发表于 2013-2-7 23:16:53 | 显示全部楼层 |阅读模式
Extjs的出现为我们这些不会做界面的人带来了不少的便利,但是我感觉学起来挺麻烦的(我感觉),就模仿一下ext的相关界面,一来用的时候也简单,二来提高一下自己对Jquery和Css的掌握程度。
现在就做了几个简单的小功能,TreePanel,accordionPanel,WindowPanel,MsgPanel,ToolBar,和一个简单的layout,使用的时候引入以上的几个js和对应的css即可。
如下图:
1、TreePanel、 GridPanel、toolBar


这个页面有个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});

//添加toolBarvar toolBar = new ToolBar({renderTo : 'toolBar',items : [{text : '新建',pic : 'add',handler : function(){}},'-',{text:'修改',pic:'edit',handler:function(){}}]}).render();});
2、WindowPanel

这是一个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

这是一个弹出框
new Msg({    title : '提示',    content:'恩?,成功啦,成功啦',    handler: function(){        }    });
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表