首页 > 代码库 > QuickUI组件库
QuickUI组件库
学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=http://www.mamicode.com/"./CSS/QuickUI.all.css" type="text/css" /><!-- 第二步 引入库文件--><script type="text/javascript" src=http://www.mamicode.com/"./Script/QuickUI.js" ></script><!--第三步 引入自己的js文件--><script type="text/javascript" src=http://www.mamicode.com/"./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 });
QuickUI组件库
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。