【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
【easyui】—easyui教你编写一个前台的架子的更多相关文章
- 手把手教你编写一个具有基本功能的shell（已开源）
刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...
- 手把手教你编写一个简单的PHP模块形态的后门
看到Freebuf 小编发表的用这个隐藏于PHP模块中的rootkit,就能持久接管服务器文章,很感兴趣,苦无作者没留下PoC,自己研究一番,有了此文 0×00. 引言 PHP是一个非常流行的web ...
- Hexo+NexT（六）：手把手教你编写一个Hexo过滤器插件
Hexo+NexT介绍到这里,我认为已经可以很好地完成任务了.它所提供的一些基础功能及配置,都已经进行了讲解.你已经可以随心所欲地配置一个自己的博客环境,然后享受码字的乐趣. 把博客托管到Github ...
- 【PHP】五分钟教你编写一个实时弹幕网站
由于博主是个忠实的英雄联盟粉丝,所以经常观看一些明星大神的直播.而一谈到直播,肯定会看到满屏幕飘来飘去的弹幕.那么问题来了,这些视频弹幕网站如何做到实时同步的?PHP如何开发一个类似的网站? 首先要搞 ...
- 编写一个make
一.简介 How to make a "make"?在进行实现前,应该先对make有一个最基本的了解.这里稍作简介:当一个程序的源文件较少时,对其进行修改并重新生成可执行文件并不复 ...
- 如何自己编写一个easyui插件续
接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”. 参考了combobox的源码中继承combo,当然我这个简单很多了.都是根据自己的理解来 ...
- 如何自己编写一个easyui插件
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
- easyui datebox定位到某一个日期， easyui datebox直接定位到具体的日期， easyui datebox MoveTo方法使用
easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...
随机推荐
- Asp.net树形递归算法
using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq ...
- Problem 2195 检查站点（普通树构造）（Vector）
Time Limit: 1000 mSec Memory Limit : 32768 KB Problem Description 在山上一共有N个站点需要检查,检查员从山顶出发去各个站点进行检 ...
- 合并 hdfs 文件
待研究,只做保存 将HDFS中不同目录下面的数据合在一起,并存放在指定的目录中,示例如: sqoop merge –new-data /test/p1/person –onto /test/p2 ...
- (转） C# textbox 限制输入问题
原理:e.handled代表这次按键动作是否交由用户自己处理,如果为true代表由用户处理,系统不再过问,这里的应用是拦截,即通知系统我要处理这个数据,但又不处理(丢弃数据),从而实现拦截的效果. 在 ...
- 解决Git报错：The current branch is not configured for pull No value for key branch.master.merge found in configuration
1.在本地工程目录找到config文件(我的是在D:\git\demo\.git):2.修改config文件内容为: [core] repositoryformatversion = 0 filemo ...
- 死锁及oracle死锁--转载
今天看群里在讨论数据库死锁的问题,也一起研究了下,查了些资料在这里总结下. 所谓死锁: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去. ...
- Android开发-API指南-<data>
<data> 英文原文:http://developer.android.com/guide/topics/manifest/data-element.html 采集(更新)日期:2014 ...
- 基于OpenDaylight和Mininet的试验床平台搭建
##########################################平台架构######################################### 一.虚拟机安装和镜像加载 ...
- only one is important
今天早上还是去了图书馆,看了一早上的hello world(intel opencl),清楚了程序编写的基本流程,但是,仍和以前一样,貌似看懂了,其实什么也不会,没有发现什么问题.中午,回来取了我的笔 ...
- rsync 参数断点续传
断点续传是使用大写P参数,-P这个参数是综合了--partial --progress两个参数 rsync -avzP /home/hadoop/jdk1..0_73.tar.gz root@10.2 ...