以前做项目都是在别人搭建好的环境下直接编写单独的页面，也没有处理过怎么搭建一个框架。看到别人的布局都挺好的，自己也想做一个走一下流程。

嘿，刚开始时看着别人写的代码，去找怎么写。

这是我自己的想法，使用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"> &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】—easyui教你编写一个前台的架子的更多相关文章

  1. 手把手教你编写一个具有基本功能的shell（已开源）

    刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...

  2. 手把手教你编写一个简单的PHP模块形态的后门

    看到Freebuf 小编发表的用这个隐藏于PHP模块中的rootkit,就能持久接管服务器文章,很感兴趣,苦无作者没留下PoC,自己研究一番,有了此文 0×00. 引言 PHP是一个非常流行的web ...

  3. Hexo+NexT（六）：手把手教你编写一个Hexo过滤器插件

    Hexo+NexT介绍到这里,我认为已经可以很好地完成任务了.它所提供的一些基础功能及配置,都已经进行了讲解.你已经可以随心所欲地配置一个自己的博客环境,然后享受码字的乐趣. 把博客托管到Github ...

  4. 【PHP】五分钟教你编写一个实时弹幕网站

    由于博主是个忠实的英雄联盟粉丝,所以经常观看一些明星大神的直播.而一谈到直播,肯定会看到满屏幕飘来飘去的弹幕.那么问题来了,这些视频弹幕网站如何做到实时同步的?PHP如何开发一个类似的网站? 首先要搞 ...

  5. 编写一个make

    一.简介 How to make a "make"?在进行实现前,应该先对make有一个最基本的了解.这里稍作简介:当一个程序的源文件较少时,对其进行修改并重新生成可执行文件并不复 ...

  6. 如何自己编写一个easyui插件续

    接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...

  7. 如何自己编写一个easyui插件

    本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  9. easyui datebox定位到某一个日期， easyui datebox直接定位到具体的日期， easyui datebox MoveTo方法使用

    easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...

随机推荐

  1. nyoj 90 整数划分

    点击打开链接 整数划分 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 将正整数n表示成一系列正整数之和:n=n1+n2+-+nk,  其中n1≥n2≥-≥nk≥1,k≥ ...

  2. [Android疑难杂症]动态改变Background后Padding无效的问题

    前言 在Layout中指定好background和padding以后,程序里面动态修改background之后padding就失效了,貌似是一个BUG,这里找到了一篇英文文章,简单翻译分享一下. 声明 ...

  3. Chapter Configuration

    Chapter Configuration 在Web.config 或App.config的configuration节,插入如下配置: <configuration> …… <co ...

  4. 安装Ubuntu下的开发工具

    刚安装好的Ubuntu,还缺乏很多开发工具.这些工具都可以通过网络进行安装. 1. 更新软件源$ sudo apt-get update 2.安装.配置.启动ftp服务.执行以下命令安装,安装后即会自 ...

  5. Sqoop2环境搭建

    正在准备做Spark SQL external data source与关系型数据库交互的部分,参考下Sqoop2是如何操作关系型数据库的. 下载地址:http://archive.cloudera. ...

  6. HttpWebRequest访问时，错误：(401)未经授权。

    HttpWebRequest访问时,错误:(401)未经授权. 某网页,我不想做登录界面,直接使用域的帐号密码来访问.如果网站设置成Window身份验证,单独的页面都没问题,而是通过使用HttpWeb ...

  7. 网站图片优化-解码JPEG

    首先,老大拿了两个网站工具的分析跟我说,让我分析一下我们网站的图片有没有什么方法优化. [网站分析工具]webpage test: http://www.webpagetest.org/谷歌pages ...

  8. iOS 面试题 总结

    #include <iostream> using namespace std; int main () { char p[]={'a','b','c'}, q[]="abc&q ...

  9. 简单JS实现对表的行的增删

    这段代码非常的简单,仅仅作为自己的一个小小的记录! ok,先上一个简单的图例,效果如下(注意:这只是一个简单的例子,不过可以根据这个简单的例子,变化出更为复杂的效果)! 代码也非常的简单,如下所示(注 ...

  10. 操作笔记：linux下安装mysql

    1,检查linux下是否安装了mysql shell指令如下: [root@iZ945sgm0ugZ ~]# rpm -qa|grep -i mysql 如果有的话:做出挨个删除(eg:rpm -ev ...