学JavaScript两年有余了，发现自己还是挺菜鸟的。于是拿一套简单的UI组件库来练练手。姑且叫他QuickUI吧，因为我希望这套UI快速灵活。
目前只做了两个UI控件——一个窗口控件和树控件。希望接下来会有时间继续完善这套QuickUI。这里贴出它的使用方法以及DEMO演示地址。如果能有园里的
高手指点一二那真是不胜荣幸。
项目演示地址：http://quickui.oschina.mopaas.com/WebContent/
首先下载QuickUI项目：http://git.oschina.net/xmlonely/QuickUI
QuickUI项目初创还未加入与后台数据库的交互功能，因此部署比较简单，可用浏览器直接打开WebContent文件夹下的index.html文件
QuickUI使用方法：
HTML代码 (这段HTML代码最好位于WebContent文件夹下以方便代码的引入）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>QuickUIStart</title> <!--第一步 引入CSS--> <link rel="stylesheet" href="./CSS/QuickUI.all.css" type="text/css" /> <!-- 第二步 引入库文件--> <script type="text/javascript" src="./Script/QuickUI.js" ></script> <!--第三步 引入自己的js文件--> <script type="text/javascript" src="./Script/QuickUIStart.js"></script> </head> <body> </body> </html>
QuickUIStart.js文件：
QuickUI.domReady(function(){
//新建一个window控件
var a = new QuickUI.Window("win1",{
title:"这是标题", //标题 可省略
width:400, //宽度 可省略
height:300, //高度 可省略
top:10, //离顶点位置 可省略
left:100, //离左边位置 可省略
dragable:true, //是否可拖拽移动 可省略
resizeable:true, //是否可缩放 可省略
mixSize:true, //最大化 可省略
minSize:true, //最小化 可省略
tools:[ //工具栏 可省略
{
id:"maxSize" //最大化
},
{
id:"minSize" //最小化
},
{
id:"reflash", //刷新
//刷新按钮点击函数 可省略
handler:function(){alert("reflash");}
},
{
id:"print", //打印
//可省略
handler:function(){window.print();}
},
{
id:"save", //保存
handler:function(){alert("save");}
},
{
id:"help", //帮助
handler:function(){alert("help");}
}
]
});
/*省略的写法
var b = new QuickUI.Window("win2",{
title:"设置",
dragable:true,
resizeable:true,
top:30,
left:30
});*/
a.open(); //将a渲染到body
//b.open();
//新建一个树
var tree = new QuickUI.Tree({
width:200,
height:400,
top:100,
left:100,
root:{ //根节点，必须有
text:"管理", //根节点的文字，必须有
children:[ //根节点的子节点，可以没有
{
text:"日常办公",
children:[
{text:"材料管理",children:[
{text:"第五层"},
{text:"第五层"}
]},
{text:"工资管理"}
]
},//子节点1
{//handler是最后一个子节点的配置函数，
//通常用它来设置子节点的链接URL和target，如果没有那么那么子节点
//的链接默认为"javascript:void(0)"。
text:"工资管理",
children:[
{text:"人事管
理",handler:function(){
//alert(this);
this.href = "javascript:void(0)";
//this.target="_frameName";
}},
{text:"财务管理",handler:function(){
this.href = "javascript:void(0)";
//this.target="_frameName";
}},
{text:"就业部",handler:function(){
this.href = "javascript:void(0)";
//this.target="_frameName";
}}
]
}
]
}
});
tree.show(); //将tree渲染到body
});
时间： 2024-10-11 03:54:40