以前做項目都是在別人搭建好的環境下直接編寫單獨的頁面，也沒有處理過怎么搭建一個框架。看到別人的布局都挺好的，自己也想做一個走一下流程。
嘿，剛開始時看着別人寫的代碼，去找怎么寫。
這是我自己的想法，使用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