天天看點
傳回

【easyui】—easyui教你編寫一個前台的架子

以前做項目都是在别人搭建好的環境下直接編寫單獨的頁面，也沒有處理過怎麼搭建一個架構。看到别人的布局都挺好的，自己也想做一個走一下流程。

嘿，剛開始時看着别人寫的代碼，去找怎麼寫。

這是我自己的想法，使用easyui-accordion這種分類來做的。做一個二級的菜單，其實菜單裡面的各個可以點選的菜單用ul li這種清單來做。大體設計到的元素就這些。

想看一下最後的結果，頁面沒有添加其他東西，相當的醜陋，不過隻是學習這種思想和知道有這麼一種寫法：

【easyui】—easyui教你編寫一個前台的架子

是吧，相當的醜吧，

由于這個東西是使用easyui來做的，是以先看一下都有什麼内容組成：

1.要把easyui架構的東西加入工程中：

【easyui】—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中引入

<%@include file="../include/header.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"> &nbsp;&nbsp;&nbsp;&nbsp; </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+"\' >&nbsp;&nbsp;&nbsp;&nbsp;</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

上一篇: 近階段學習總結（EasyUI的使用）
下一篇: input與textarea樣式修飾，easyui-button的按鈕樣式，table的樣式 - 悲淚滿衣襟deliberate lies - interactive DHTML