easyUI之练习
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>练习</title> <!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script> </head>
<body> <!-- Layout布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true"> <!-- 北 -->
<div data-options="region:'north',border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;">
<center><font style="font-size:66px">jQuery-EasyUI组件</font></center>
</div> <!-- 南 -->
<div data-options="region:'south'" style="height:100px;">
<center><font style="font-size:33px">XX公司版权所有</font></center>
</div> <!-- 东 -->
<div data-options="region:'east',iconCls:'icon-reload'" style="width:100px;"></div> <!-- 西 -->
<div data-options="region:'west'" style="width:200px;">
<!-- Accordion分类 -->
<div
id="accordionID"
class="easyui-accordion"
data-options="fit:true,border:false,selected:-1"
style="width:300px;height:400px;">
<div title="部门管理" data-options="iconCls:'icon-save'" style="padding:10px;">
<!-- Linkbutton按钮 -->
<a
id="btn_add"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-add'">增加部门</a><p>
<a
id="btn_find"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-search'">查询部门</a><p>
<a
id="btn_update"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-edit'">修改部门</a><p>
<a
id="btn_delete"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-remove'">删除部门</a><p>
</div>
<div title="人事管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
<!-- tree树 -->
<ul id="treeID" class="easyui-tree" data-options="lines:true">
<li>
<span>增加人事</span>
</li>
<li>
<span>查询人事</span>
<ul>
<li>
<span>分页查询人事</span>
<ul>
<li>
<span>模糊分页查询人事</span>
</li>
<li>
<span>精确分页查询人事</span>
</li>
</ul>
</li>
<li>
<span>查询所有人事</span>
</li>
</ul>
</li>
</ul>
</div>
<div title="客户管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
客户管理
</div>
<div title="权限管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
权限管理
</div>
<div title="报表管理" data-options="iconCls:'icon-print'" style="padding:10px;">
报表管理
</div>
<div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;">
帮助
</div>
</div>
</div> <!-- 中 -->
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<!-- Tabs选项卡 -->
<div
id="tabsID"
class="easyui-tabs"
style="width:500px;height:250px;"
data-options="plain:true,border:false,selected:-1,fit:true">
</div>
</div> </div> <script type="text/javascript">
//定位4个按钮
$("a").click(function(){
//获取你所单击的按钮的标题
var title = $(this).text();
//去空格
title = $.trim(title);
//如果title变量是"增加部门"
if("增加部门" == title){
//查看该选项卡是否已经打开
var flag = $("#tabsID").tabs("exists",title);
//如果未打开
if(!flag){
//打开选项卡
$("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"content" : "文本",
"iconCls" : "icon-add"
});
}
}else if("查询部门" == title){
var flag = $("#tabsID").tabs("exists",title);
if(!flag){
//打开选项卡
$("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"content" : "文本",
"iconCls" : "icon-search"
});
}
}
});
</script>
<script type="text/javascript">
$(function(){
//收起所有的选项
$("#treeID").tree("collapseAll");
});
</script>
<script type="text/javascript">
$("#treeID").tree({
onClick : function(node){
//获取点击树节点的文本
var title = node.text;
//去空格
title = $.trim(title);
//产生tab选项卡
var flag = $("#tabsID").tabs("exists",title);
//如果没有打开的话
if(!flag){
//打开选项卡
$("#tabsID").tabs("add",{
"title" : title,
"closable" : true,
"href" : "${pageContext.request.contextPath}/empList.jsp",
"iconCls" : "icon-search"
});
}
}
});
</script> </body>
</html>
easyUI之练习的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- 前端框架 EasyUI （1）熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）
系列目录 前言 听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样 他 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面
系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
随机推荐
- 四、DML语言
目录 简介 主要操作 插入语句 语法 修改语句 修改单表 删除语句 DELETE TRUNCATE 两种删除总结 简介 DML语言就是数据操作语言 主要操作 插入:insert 修改:update 删 ...
- PHP面试题--基础
1.PHP语言的一大优势是跨平台,什么是跨平台?一.PHP基础: PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows.Linux等)上配置,不 ...
- linux入门常用指令2.安装nginx
下载nginx包 nginx-1.10.3.tar.gz 解压 [root@localhost src]# tar -zxvf nginx-1.10.3.tar.gz [root@localhost ...
- Vim技巧----选取一个单词
viw 它的作用是选取一个单词(word),无论光标在这个单词的哪个位置都能选中整个单词. 每日一Vim(18)Text-Object 前两节讲了Visual mode相关内容,这里提一个小问题,“如 ...
- 按照教程自动安装RFNoC时.在使用pip安装pybombs时出现报错,解决办法
$ sudo apt-get install git $ sudo apt-get install python-setuptools python-dev python-pip build-esse ...
- P5650 基础字符串练习题
设定'0'权值为1,设定'1'权值为-1 然后就是最大子段和 #include <cstdio> #include <algorithm> #include <cstri ...
- [唐胡璐]Selenium技巧- 抓图并保存到TestNG报告中
这里不讲解怎么在Eclipse安装配置TestNG，网上一搜一大把，大家自己去实践一下。 在这里主要说一下用Java来实现Selenium Webdriver的截图功能和把截图写到TestNG的报告中 ...
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- 如何实现swipe、tap、longTap等自定义事件
前言 移动端原生支持touchstart.touchmove.touchend等事件,但是在平常业务中我们经常需要使用swipe.tap.doubleTap.longTap等事件去实现想要的效果,对于 ...
- bzoj3993: [SDOI2015]星际战争（二分+最大流）
题目描述 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战. 在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型机器人的装甲值 ...