论坛首页 Web前端技术论坛

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

浏览 22707 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-06-14   最后修改:2011-06-17
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
		});


//添加toolBar
		var 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(){
	    	
	    	}
	    });

现在就做了这几个,代码也写的比较乱,等整理整理,会附上源码,请大家指点
  • 大小: 16.9 KB
  • 大小: 4.9 KB
  • 大小: 4.1 KB
   发表时间:2011-06-14  
嗯,这个不错,楼主有心了。
0 请登录后投票
   发表时间:2011-06-14  
junxiang 写道
嗯,这个不错,楼主有心了。

现在就弄了几个简单的功能
0 请登录后投票
   发表时间:2011-06-15  
这几个功能就不错了,属于把地基盖上了
0 请登录后投票
   发表时间:2011-06-15  
基本结构做好,剩下的方便扩展就好
0 请登录后投票
   发表时间:2011-06-15  
renwolang521 写道
基本结构做好,剩下的方便扩展就好

我也在想扩展性的问题,给点意见吧
0 请登录后投票
   发表时间:2011-06-15  
这个那是Jquery丫?彻底无语啊...
0 请登录后投票
   发表时间:2011-06-15  
jilong-liang 写道
这个那是Jquery丫?彻底无语啊...

0 请登录后投票
   发表时间:2011-06-15  
lz真有心呀,继续努力。
0 请登录后投票
   发表时间:2011-06-15  
想问问比ext简单在哪里?!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics