ui后将下载的文件夹复制到static文件夹下,就可以
分类:美高梅网上注册平台

【SpringBoot2.0文章汇总目录,java多线程教程文章汇总 长期更新系列】请多多支持

EasyUI 简介

jQuery Easyui实现左右布局,jqueryeasyui布局

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。

1.在页面中引入easyui所需的文件

<%-- 加载easyui的样式文件,bootstrap风格 --%>
<link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${ctx }/css/themes/icon.css" rel="stylesheet">
<%-- 加载jquery和easyui的脚本文件 --%>
<script src="${ctx }/js/jquery-easyui-../jquery.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script> 

2.在页面body部分构建必要的html结构

<body>
<div id="home-layout">
<!-- 页面北部,页面标题 -->
<div data-options="region:'north'" style="height:50px;">
<!-- add your code -->
</div>
<!-- 页面西部,菜单 -->
<div data-options="region:'west',title:'菜单栏'" style="width:200px;">
<div class="home-west">
<ul id="home-west-tree"></ul>
</div>
</div>
<!-- 页面中部,主要内容 -->
<div data-options="region:'center'">
<div id="home-tabs">
<div title="首页">
<h2 style="text-align: center">欢迎登录</h2>
</div>
</div>
</div>
</div>
</body> 

这里需要注意一点:easyui在使用layout布局的时候,north、south需要指定高度,west、east需要指定宽度,而center会自动适应高和宽。

3.使用js初始化easyui组件

我个人比较推荐使用js代码去初始化easyui组件,而不使用easyui标签中的data-options属性去初始化。因为对于后台开发人员来说,写js代码可能比写html标签更加熟悉,而且这样使得html代码更加简洁。

<script>
$(function(){
/*
* 初始化layout
*/
$("#home-layout").layout({
//使layout自适应容器
fit: true
});
/*
* 获取左侧菜单树,并为其节点指定单击事件
*/
$("#home-west-tree").tree({
    //加载菜单的数据,必需
url: "${ctx }/pages/home-west-tree.json",
method: "get",
    //是否有层次线
lines: true,
    //菜单打开与关闭是否有动画效果
animate: true,
    //菜单点击事件
onClick: function(node){
if(node.attributes && node.attributes.url){
         //打开内容区的tab,代码在其后
addTab({
url: "${ctx }/" + node.attributes.url,
title: node.text
});
}
}
});
  /*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,
    //tab页是否有边框
border : false
});})
</script>
<script>
/*
* 在内容区添加一个tab
*/
function addTab(params){
var t = $("#home-tabs");
var url = params.url;
var opts = {
title: params.title,
closable: true,
href: url,
fit: true,
border: false
};
//如果被选中的节点对应的tab已经存在,则选中该tab并刷新内容
//否则打开一个新的tab
if(t.tabs("exists", opts.title)){
var tab = t.tabs("select", opts.title).tabs("getSelected");
t.tabs("update", {
tab: tab,
options: opts
});
}else{
t.tabs("add", opts);
}
}
</script> 

4.easyui-tree组件所需的json格式

easyui使用的传输格式为json,它对json内容的格式有比较严格的限制,所以请注意查看api

[{
"text":"区域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"预约信息管理",
"children":[{
"text":"商户预约信息查询",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"准入申请管理",
"children":[{
"text":"商户准入申请",
"state":"closed",
"children":[{
"text":"商户待处理申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"
}
},{
"text":"商户审批中申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"
}
},{
"text":"商户审批通过申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"
}
},{
"text":"商户被拒绝申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"
}
}]
}]
},{
"text":"准入审批管理",
"children":[{
"text":"商户审批管理",
"state":"closed",
"children":[{
"text":"当前任务",
"children":[{
"text":"商户当前初审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商户当前复审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商户已完成任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商户不通过任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]

就这样,我们使用easyui完成了简单的左右布局。

以上所述是小编给大家分享的jQuery Easyui实现上左右布局的相关内容,希望对大家有所帮助。

前面一节我们已经成功搭建ssm项目的环境,接下来我们需要做的就是搭建我们后台管理界面的框架。这搭建完之后的效果图

easyui是一种基于jQuery的用户界面插件集合。

您可能感兴趣的文章:

  • ASP.NET MVC使用EasyUI的datagrid多选提交保存教程
  • JQueryEasyUI Layout布局框架的使用
  • jQuery EasyUI 布局之动态添加tabs标签页
  • jQuery EasyUi实战教程之布局篇

Easyui实现左右布局,jqueryeasyui布局 EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序...

图片 1这里写图片描述

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。(EasyUI下载地址)

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

首先我们在项目的webapp目录下新建一个static文件夹,这个文件夹主要存在我们的一个静态资源文件,然后我们在官网下载好easy ui后将下载的文件夹复制到static文件夹下。结果如图

easyui是个完美支持HTML5网页的完整框架。

图片 2这里写图片描述

easyui节省您网页开发的时间和规模。

2.1、抽取公共模块

1、在webapp界面下面新建admin文件夹,这个文件夹主要存放我们后台管理的jsp文件,然后在admin界面下面新建common文件,此文件夹主要存放后台管理jsp文件中的一些公共模块,比如现在的easyUI的环境2、在common文件夹中新建head.jspf文件。

<%@ page language="java" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><c:set value="${pageContext.request.contextPath }" var="blog" /><!-- 下面是easyui的环境 --><link rel="stylesheet" href="${blog }/static/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link><link rel="stylesheet" href="${blog }/static/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link><script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/jquery.min.js"></script><script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script><script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>

其中我们使用了jstl核心标记库 中的set指令使用简化代码 然后引入了easyUI所需的js css文件

easyui很简单但功能强大的。

2.2搭建后台框架

从效果图我们可以看出来整个界面分为四个部分分别是 上下左右四个部分 现在我们通过easyui实现这个效果1、打开easyui API搜索 layout

图片 3easyUI布局

其中region代表位置 除去不要部分就得到了

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>个人博客后台管理</title> <%@include file="../common/head.jspf" %> <style type="text/css"> body { font-family: microsoft yahei; } </style></head><body ><div region="north" style="height: 78px; background-color: #E0ECFF"> </div><div region="west" style="width: 200px" title="导航菜单" split="true"> </div><div data-options="region:'center'" style="background:#eee;"> </div><div region="south" style="height: 25px;padding: 5px" align="center"> </div></body></html>

结果如图

图片 4整体布局

2、打开easyUI API搜索Accordion

图片 5这里写图片描述我们分类选项实在west中的 所以在west中添加图中代码

<div style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> 

3、打开easyUI API搜索tabs

图片 6easyUI tabs

由效果看出 我们的tabs是放在center中的所以在center中添加如图代码

<div style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>

图片 7这里写图片描述

1、这样整个框架已经出来了 接下面我们就完成west中的分类选项卡

图片 8这里写图片描述

我们在west插入如下代码

 <div data-options="fit:true,border:false"> <div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px"> <a href="#" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">写博客</a> <a href="#" data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a> </div> <div title="博客管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;"> <a href="#" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a> <a href="#" data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">博客信息管理</a> </div> <div title="博客类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px"> <a href="#" data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a> </div> <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px"> <a href="#" data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a> <a href="#" data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a> </div> <div title="个人信息管理" data-options="iconCls:'icon-grxx'" style="padding:10px"> <a href="#" data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a> </div> <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px"> <a href="#" data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a> <a href="#" data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a> <a href="#" data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a> <a href="#" data-options="plain:true,iconCls:'icon-exit'" style="width: 150px;">安全退出</a> </div> </div>

其中icoCls中的icon我们自定义的icon所以大家可能会出现没有图标的现象,大家不要着急easyUI怎么设置自定义icon请看我另一篇博客easyUI自定义icon2、center欢迎界面

<div fit="true" border="false" > <div title="首页" data-options="iconCls:'icon-home'"> <div align="center" style="padding-top: 100px"><font color="red" size="10">欢迎使用</font></div> </div> </div>

3、north south处理north

<table style="padding: 5px" width="100%"> <tr> <td width="50%"> <h2>博客后台系统</h2> </td> <td valign="bottom" align="right" width="50%"> <font size="3"> <strong>欢迎:</strong>admin</font> </td> </tr>

south

div region="south" style="height: 25px;padding: 5px" align="center"> Copyright © 2012-2017 熊平的SSM博客系统 版权所有</div>

现在重新发布一下项目运行一下就可以得到效果图那样了

图片 9这里写图片描述

最后特别感谢倪升武大神

最后大家关注一下我的个人公众号把。关注我公众号即可获取源码

图片 10公众号

在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。

本文由美高梅网上注册平台发布于美高梅网上注册平台,转载请注明出处:ui后将下载的文件夹复制到static文件夹下,就可以

上一篇:我在网上看了很多整合教程,java多线程教程文章 下一篇:没有了
猜你喜欢
热门排行
精彩图文