【easyui】—easyui教你编写一个前台的架子
以前做项目都是在别人搭建好的环境下直接编写单独的页面，也没有处理过怎么搭建一个框架。看到别人的布局都挺好的，自己也想做一个走一下流程。
嘿，刚开始时看着别人写的代码，去找怎么写。
这是我自己的想法，使用easyui-accordion这种分类来做的。做一个二级的菜单，其实菜单里面的各个可以点击的菜单用ul li这种列表来做。大体设计到的元素就这些。
想看一下最后的结果，页面没有添加其他东西，相当的丑陋，不过只是学习这种思想和知道有这么一种写法：
是吧，相当的丑吧，
由于这个东西是使用easyui来做的，所以先看一下都有什么内容组成：
1.要把easyui框架的东西加入工程中：
2.为了方便使用easyui我谢了一个includ.jsp页面，具体内容如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/icon.css"> <!--这个是我们自己定义的菜单导航的样式，这个是直接拿的网上写好的 --> <link rel="stylesheet" type="text/css" href="<%=basePath %>easyuitest/demo/css/default.css"> <script type="text/javascript" src="<%=basePath %>easyui/jquery.min.js"></script> <script type="text/javascript" src="<%=basePath %>easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=basePath %>easyui/locale/easyui-lang-zh_CN.js"></script> <input type="hidden" id="basepath" name="basepath" value="<%=basePath %>" /> <!-- 全局变量basepath --> <script type="text/javascript"> var basepath = $("#basepath").val(); </script>
在首页index.jsp中引入
在上面整体页面显示可以看出使用了easyui-layout这种布局方式：
先看index.jsp中的代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>首页</title>
<meta content="text/html;charset=UTF-8" name="context-type">
<%@include file="../include/header.jsp"%>
<script type="text/javascript" src="script/index.js"></script>
</head>
<body id="el" class="easyui-layout">
<div data-options="region:\'north\',split:false,collapsible:false"
style="height:100px;">
north <span class="icon-clear"> </span>
</div>
<div data-options="region:\'south\',split:false,collapsible:false"
style="height:100px;">south</div>
<div data-options="region:\'west\',split:false,collapsible:true"
style="width:200px;">
<div id="aa" class="easyui-accordion"
data-options="fit:true,animate:false,border:false">
<!-- 左侧菜单 -->
</div>
</div>
<div id="center_layout"
data-options="region:\'center\',collapsible:false,border:false"
style="padding:0px;background:#eee;">
<div id="tt" class="easyui-tabs" data-options="fit:true"
style="padding: 0px; margin: 0px;"></div>
</div>
</body>
</html>
上面主要重要的代码有：accordion中的id=”aa”,tabs中的id=”tt”
你会发现如果直接运行时，会出来一个空的架子，没有什么内容。
下面我认为是最主要的地方：用一句话概括，加载数据对加载的数据美化添加动作。嘿这是我自己总结的。
1.加载数据：一般来讲我们都使用加载json这种数据个格式，所以这里不妨来模拟一个json对象来完成从数据库中读取加工获得的数据。
2.美化加载的数据：把数据经过简单的布局后，添加一些样式来美化一下。
3.添加动作：例如添加店家菜单的动作，在tabs中打开这个页面。
大体这个针对index.jsp的js主要完成的功能就是这些，当然这些功能如果没有特殊的需求的是可以完全满足你的要求的。
嘿，那就接下来看看这个index.js中的内容都是怎么写的吧：
$(function(){ //nav $(\'#aa\').accordion({animate:false}); var data=[{id:\'1\',name:\'111\',menus:[ {id:\'11\',name:\'测试1\',url:\'atest1.jsp\',icon:\'icon-clear\'}, {id:\'12\',name:\'测试2\',url:\'atest1.jsp\',icon:\'icon-clear\'} ]}, {id:\'2\',name:\'222\',menus:[ {id:\'21\',name:\'测试3\',url:\'atest1.jsp\',icon:\'icon-clear\'}, {id:\'22\',name:\'测试4\',url:\'atest1.jsp\',icon:\'icon-users\'} ]} ]; $.each(data,function(index,element){ var id = element.id; var name = element.name; var strList = " "; strList += "<ul>"; $.each(element.menus,function(i,e){ strList += "<li>"; strList +="<div>"; strList +="<a href=\'#\' ref=\'"+e.id+"\' rel=\'"+e.url+"\'>"; strList +="<span class=\'"+e.icon+"\' > </span>"; strList +="<span class=\'nav\'> "+e.name+" </span>"; strList +="</a>"; strList +="</div>"; strList +="</li>"; }); strList += "</ul>"; $(\'#aa\').accordion(\'add\',{ title:name, selected:false, content:strList, iconCls:\'icon-nav\' }); }); InitLeftMenu(); }); //菜单两个事件 function InitLeftMenu(){ //静态样式 $(".easyui-accordion div").hover(function(){ //this -- div $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); //设置点击事件 $(\'#aa li div\').click(function(){ //点击选中样式 $(\'#aa li div\').removeClass("selected"); $(this).addClass("selected"); //a var $a = $(this).children(); var title = $a.attr("ref"); title = $a.children(".nav").text(); var url = $a.attr("rel"); //创建tab,使用方法 if(!$(\'#tt\').tabs("exists",title)){ $(\'#tt\').tabs("add",{ title:title, selected:true, closable:true, content:\'<iframe src="\'+url+\'" title="\'+title+\'" scrolling="auto" frameborder="0" style="width:100%; height:100%; padding:0px;margin:0px" ></iframe>\', }); }else{ $(\'#tt\').tabs("select",title); } }); } function addTab(title,icon,url){ if($(\'#tt\').tabs("exists",title)){ $(\'#tt\').tabs("select",title); }else{ $(\'#tt\').tabs(\'add\',{ title: title, selected: true, closable:true, iconCls:icon, content:"<iframe src=\'"+url+"\' frameborder=\'0\' style=\'width:100%;height:100%;\'></iframe>" }); } }
哈哈，只要你能看懂上面的js代码，你就可以完成编写任务，可能样式比较难看，哈哈，没有美工的命就不要这么多的要求，哈哈，后面我会贴出从网上下载的一个样式代码，看看就可以，这个在实际的工作中是变化的。
好了线上代码：
*{font-size:12px; font-family:Tahoma,Verdana,微软雅黑,新宋体} body{background:#D2E0F2; } a{ color:Black; text-decoration:none;} a:hover{ color:Red; text-decoration:underline;} .textbox03 {border: #878787 1px solid;padding: 4px 3px;font:Verdana, Geneva, sans-serif,宋体;line-height: 14px; background-color: #fff; height: auto; font-size: 14px; font-weight: bold; width: 190px; } .txt01{font:Verdana, Geneva, sans-serif,宋体;padding:3px 2px 2px 2px; border-width:1px; border-color:#ddd; color:#000;} .txt {border: #878787 1px solid;padding: 4px 3px;font:Verdana, Geneva, sans-serif,宋体;line-height: 14px; background-color: #fff; height: auto; font-size: 14px;} .footer{text-align:center;color:#15428B; margin:0px; padding:0px;line-height:23px; font-weight:bold;} .head a{color:White;text-decoration:underline;} .easyui-accordion ul{list-style-type:none;margin:0px; padding:10px;} .easyui-accordion ul li{ padding:0px;} .easyui-accordion ul li a{line-height:24px;} .easyui-accordion ul li div{margin:2px 0px;padding-left:10px;padding-top:2px;} .easyui-accordion ul li div.hover{border:1px dashed #99BBE8; background:#E0ECFF;cursor:pointer;} .easyui-accordion ul li div.hover a{color:#416AA3;} .easyui-accordion ul li div.selected{border:1px solid #99BBE8; background:#E0ECFF;cursor:default;} .easyui-accordion ul li div.selected a{color:#416AA3; font-weight:bold;} .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;} .icon-sys{ background-position:0px -200px;} .icon-set{ background-position:-380px -200px;} .icon-add{background-position: -20px 0px;} .icon-add1{background:url(\'icon/edit_add.png\') no-repeat;} .icon-nav{background-position: -100px -20px; } .icon-users{background-position: -100px -480px;} .icon-role{background-position: -360px -200px;} .icon-set{background-position: -380px -200px;} .icon-log{background-position: -380px -80px;} .icon-delete16{background:url(\'icon/delete.gif\') no-repeat;width:18px; line-height:18px; display:inline-block;} .icon-delete{ background-position:-140px -120px;} .icon-edit{ background-position:-380px -320px;} .icon-magic{ background-position:0px -500px;} .icon-database{ background-position:-20px -140px;} .icon-expand{ background:url(\'/images/coll2.gif\') no-repeat;} .icon-collapse{ background:url(\'/images/coll3.gif\') no-repeat;}
这个就是上面包含页面中的自定义css.
哈，到这里就结束了，写这篇文章也没有什么特殊的目的，只是自己在学习如何去编写，和其他可能也不会的同志一个最简单的参考，也不要拘束如此。
若干年后我可能在看这段代码是我会不由得发笑，但现在我不写，我可能发笑的资格都没有！
代码下载：http://pan.baidu.com/s/1gdxrdV9 密码：p34p
版权声明：本文为haoke原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。