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

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

这是我自己的想法，使用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. PL/SQL常用设置 可看引用位置更清晰直观 引自：http://blog.csdn.net/xiaoqforever/article/details/27695569

    引自:http://blog.csdn.net/xiaoqforever/article/details/27695569 1,登录后默认自动选中My Objects 默认情况下,PLSQL Deve ...

  2. history.back(-1)和history.go(-1)的区别

    history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在 返回到指定连接:document.l ...

  3. NSSet、NSMutableSet基本用法

    NSSet.NSMutableSet基本用法 在Foundation框架中,提供了NSSet类,它是一组单值对象的集合,且NSSet实例中元素是无序,同一个对象只能保存一个. 一.不可变集合NSSet ...

  4. Java - Nested Classes

    (本文参考:http://docs.oracle.com/javase/tutorial/java/javaOO/nested.html) Nested Classes class OuterClas ...

  5. fw: firefox plugin

    http://blog.csdn.net/fancycow/article/details/7261191 firefox的插件分两种类型,一种extension,叫扩展,一种是plugin,我们叫插 ...

  6. FileZilla - Windows XP经典软件系列

    官网: https://filezilla-project.org/ 下载: http://sourceforge.net/projects/filezilla/ 版本:V3.9.0.1 (支持XP最 ...

  7. 删除sqlserver2008日记文件

    use master go alter database dbname set recovery simple with no_wait go alter database dbname set re ...

  8. linux中如何查看进程占用了哪些端口？

    使用netstat –apn | grep <进程名>便可以查看指定进程所占用的端口.

  9. java语言实现的短信接入实例，各公司大同小异

    和几家短信平台接触过,都进行了接入测试.总体来说短信发送又快,覆盖率又全的,价格相对贵些.简易选两家分开使用,短信验证码的用一家贵的快的,普通的推广群发短信就用一个便宜的. 下面显示下测试代码 pub ...

  10. WEB前端研发工程师编程能力成长之路（1）（转）

    WEB前端研发工程师编程能力成长之路(1)   [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: ...