Vietnam项目又需要添加一个管理后台,前段时间一直在想如何实现界面,因为公司没有美工和设计师,项目的前台、业务逻辑、数据库一直都是自己一个人在做,以往做的都是以功能为主,对页面要求的能简单就简单,因为实在是抽不出时间来对页面进行设计和制作,这次想尝试一下“用心”的界面制作 嘿嘿~~~ 在了解过extjs和EasyUI之后,选择了EasyUI这个框架,除了简单、轻量之外,更重要的是这个框架基于jquery,对我来说更容易上手,节省开发时间。下面是的首页是由布局组件、tree组件和tabs组件实现的,暂定的基本框架是就酱~~~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> </head> <body class="easyui-layout"> <!-- 头部 --> <div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px">Vietnam</div> <!-- 左侧栏 --> <div data-options="region:‘west‘,split:true,title:‘西‘" style="width:150px;padding:10px;"> <ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li><span>File 11</span></li> <li><span>File 12</span></li> <li><span>File 13</span></li> </ul> </li> <li><span>File 2</span></li> <li><span>File 3</span></li> </ul> </li> <li><span>File21</span></li> </ul> </div> <!-- 中部主体 --> <div data-options="region:‘center‘,title:‘中‘"> <div id="tb" class="easyui-tabs" data-options="fit:true,border:false,plain:true"> <div title="首页" style="padding:10px"> <p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p> <ul> <li>easyui是一套基于JQuery的用户界面插件集合.</li> <li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li> <li>使用easyui你不需要写很多javascript代码,你通常只需要写一些html标签来定义用户界面.</li> <li>完美支持HTML5.</li> <li>easyui能够有效地节省你的开发时间.</li> <li>easyui很简单但是很强大.</li> </ul> </div> </div> </div> <script type="text/javascript"> $(‘#tt‘).tree({ onClick: function(node){ //alert(node.text); addPanel(node.text); } }); function addPanel(titleName){ $(‘#tb‘).tabs(‘add‘,{ title: titleName, content: ‘<div style="padding:10px">内容‘+titleName+‘</div>‘, closable: true }); } </script> </body> </html>
时间: 2024-08-24 22:50:31