论坛首页 AJAX版 JavaScript

mui-layout 0.2 based mootools worked out.

浏览 413 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
最后更新时间:2008-05-19
mui-layout 是几个基于mootools的layout管理Class. 模仿Extjs layout.
目前,仅仅支持border layout.

blog

go to demo

download



code example:

window.addEvent('domready', function(){
	var innerContainer=new Mui.Container({
		el:'inner-container',
		position:'center',
		items:[
			new Mui.Panel({
				el:'inner-top',
				headerEl:'inner-top-header',
				mainEl:'inner-top-main',
				gap:'0 0 5px 0',
				position:'top',
				height:200,
				resizable:true,
				collapsedIconClass:'top-icon'
			}),
			new Mui.Panel({
				el:'inner-center',
				headerEl:'inner-center-header',
				mainEl:'inner-center-main',
				position:'center'
			})
		]
	});
	var container=new Mui.Container({
		el:'outer1',
		items:[
			new Mui.Box({
				el:'header',
				height:50,
				position:'top',
				gap:'10px 5px 0 5px'
			}),
			new Mui.Panel({
				el:'left',
				position:'left',
				headerEl:'lheader',
				mainEl:'lmain',
				width:200,
				collapsed:true,
				gap:'0 5px',
				resizable:true,
				collapsedIconClass:'left-icon'
			}),
			innerContainer,
			new Mui.Panel({
				el:'right',
				position:'right',
				headerEl:'rheader',
				footerEl:'rfooter',
				mainEl:'rmain',
				width:180,
				gap:'0 5px',
				resizable:true,
				collapsedIconClass:'right-icon'
			}),
			new Mui.Box({
				el:'footer',
				position:'bottom',
				height:30,
				gap:'5px'
			})
		]
	});
	container.render();
});

  • B05389e8-7128-3f68-a347-0dc69e1aa4fc-thumb
  • 描述: mui-layout 例子图片
  • 大小: 168.8 KB
   
最后更新时间:2008-05-19
这个插件很实用的,楼主自己写的?
下载一个学习一下
   
0 请登录后投票
最后更新时间:2008-05-19
是啊,欢迎各种意见。
不过,看来je用mootools的少的可怜。都被ext拐跑了,赫赫。
   
0 请登录后投票
最后更新时间:2008-05-19
有没有基于jquery的
   
0 请登录后投票
最后更新时间:2008-05-20
没有。对jquery不熟悉。
   
0 请登录后投票
论坛首页 AJAX版 JavaScript

跳转论坛:
JavaEye推荐