目录
一、全局path定义
注意: 在使用jQuery UI的时候需要进行必须要下载导入 导入详情:下载导入插件
形式:<base href=""> base:引入路径 作用:标准化路径格式为全路径
base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面
<base href = "${pageContext.request.servletContext.contextPath}/static/">
var globalPath = "${pageContext.request.servletContext.contextPath}";
二、postman使用
接口测试工具;postman发送请求给服务器,然后从服务器接受响应,最后在postman中展示出来。
三、tree组件实现JSON数据绑定
每个节点都具备以下属性:
-
id:节点ID,对加载远程数据很重要。
-
text:显示节点文本。
-
state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
-
checked:表示该节点是否被选中。
-
attributes: 被添加到节点的自定义属性。
-
children: 一个节点数组声明了若干节点。
一些案例:
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
标签实现——不推荐
JSON实现
$('#tt').tree({
url:'tree_data.json'
});
四、动态添加选项卡
$(function(){
//绑定属性菜单绑定数据
$("#menuTree").tree({
//实际开发中这里应该获取的是后台的数据(从servlet中获取)
url:'tree_data.json',
//在用户点击一个节点的时候触发。
onClick: function(node){
//alert(node.text); // 在用户点击的时候提示
console.log(node.id,node.text,node.children);
if(node.id === "-1"){
return;
}
//判断选项卡是否存在选中
var flag = $("#tabs_index").tabs('exists',node.text);
//alert(flag);
if(flag){
$("#tabs_index").tabs('select',node.text);
return;
}
// 添加一个未选中状态的选项卡面板
$('#tabs_index').tabs('add',{
title: node.text,
content:node.text,
closable:true,
});
}
});
});
五、选项卡
Tabs(选项卡)
使用$.fn.tabs.defaults重写默认值对象。
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。
依赖关系
-
panel
-
linkbutton
使用案例
创建面板
1. 通过标签创建选项卡
通过标签可以更容易的创建选项卡,我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建,用法和panel(面板)相同。
- <div id="tt" class="easyui-tabs" 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>
2. 通过Javascript创建选项卡
下面的代码演示如何使用Javascript创建选项卡,当该选项卡被选择时将会触发'onSelect'事件。
- $('#tt').tabs({
- border:false,
- onSelect:function(title){
- alert(title+' is selected');
- }
- });
添加新的选项卡面板
添加一个新的包含小工具菜单的选项卡面板,小工具菜单图标(8x8)被放置在关闭按钮之前。
// add a new tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
获取选择的选项卡
// get the selected tab panel and its tab object
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // the corresponding tab object
选项卡面板
选项卡面板属性与panel组件属性的定义类似,下面是2个组件的一些公共属性。
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
id | string | 选项卡面板的ID属性。 | null |
title | string | 选项卡面板的标题文本。 | |
content | string | 选项卡面板的内容。 | |
href | string | 从URL加载远程数据内容填充到选项卡面板。 | null |
cache | boolean | 如果为true,在'href'属性设置了有效值的时候缓存选项卡面板。 | true |
iconCls | string | 定义了一个图标的CSS类ID显示到选项卡面板标题。 | null |
width | number | 选项卡面板宽度。 | auto |
height | number | 选项卡面板高度。 | auto |
collapsible | boolean | 如果为true,则允许选项卡摺叠。 | false |
下面的是选项卡面板新增且独有的属性。
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
closable | boolean | 在设置为true的时候,选项卡面板将显示一个关闭按钮,在点击的时候会关闭选项卡面板。 | false |
selected | boolean | 在设置为true的时候,选项卡面板会被选中。 | false |
disabled | boolean | 在设置为true的时候,选项卡面板会被禁用。(该属性自1.4.4版开始可用) | false |
六、常见事件、属性和方法
属性:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 选项卡容器宽度。 | auto |
height | number | 选项卡容器高度。 | auto |
plain | boolean | 设置为true时,将不显示控制面板背景。 | false |
fit | boolean | 设置为true时,选项卡的大小将铺满它所在的容器。 | false |
border | boolean | 设置为true时,显示选项卡容器边框。 | true |
scrollIncrement | number | 选项卡滚动条每次滚动的像素值。 | 100 |
scrollDuration | number | 每次滚动动画持续的时间,单位:毫秒。 | 400 |
tools | array,selector | 工具栏添加在选项卡面板头的左侧或右侧。可用的值有: 1. 一个工具菜单数组,每个工具选项都和linkbutton相同。 2. 一个指向<div/>容器工具菜单的选择器。 代码示例: 通过数组定义工具菜单。 $('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }] }); 通过存在的DOM容器定义工具菜单。 $('#tt').tabs({ tools:'#tab-tools' }); <div id="tab-tools"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> </div> | null |
toolPosition | string | 工具栏位置。可用值:'left','right'。(该属性自1.3.2版开始可用) | right |
tabPosition | string | 选项卡位置。可用值:'top','bottom','left','right'。(该属性自1.3.2版开始可用) | top |
headerWidth | number | 选项卡标题宽度,在tabPosition属性设置为'left'或'right'的时候才有效。(该属性自1.3.2版开始可用) | 150 |
tabWidth | number | 标签条的宽度。(该属性自1.3.4版开始可用) | auto |
tabHeight | number | 标签条的高度。(该属性自1.3.4版开始可用) | 27 |
selected | number | 初始化选中一个标签页。(该属性自1.3.5版开始可用) | 0 |
showHeader | boolean | 设置为true时,显示标签页标题。(该属性自1.3.5版开始可用) | true |
事件:
事件名 | 事件参数 | 描述 |
---|---|---|
onLoad | panel | 在ajax选项卡面板加载完远程数据的时候触发。 |
onSelect | title,index | 用户在选择一个选项卡面板的时候触发。 |
onUnselect | title,index | 用户在取消选择一个选项卡面板的时候触发。(该属性自1.3.5版开始可用) |
onBeforeClose | title,index | 在选项卡面板关闭的时候触发,返回false取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。 $('#tt').tabs({ onBeforeClose: function(title){ return confirm('您确认想要关闭 ' + title); } }); // 使用异步确认对话框 $('#tt').tabs({ onBeforeClose: function(title,index){ var target = this; $.messager.confirm('确认','你确认想要关闭'+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // 允许现在关闭 $(target).tabs('close',index); opts.onBeforeClose = bc; // 还原事件函数 } }); return false; // 阻止关闭 } }); |
onClose | title,index | 在用户关闭一个选项卡面板的时候触发。 |
onAdd | title,index | 在添加一个新选项卡面板的时候触发。 |
onUpdate | title,index | 在更新一个选项卡面板的时候触发。 |
onContextMenu | e, title,index | 在右键点击一个选项卡面板的时候触发。 |
方法:
方法名 | 方法参数 | 描述 |
---|---|---|
options | none | 返回选项卡属性。 |
tabs | none | 返回所有选项卡面板。 |
resize | none | 调整选项卡容器大小和布局。 |
add | options | 添加一个新选项卡面板,选项参数是一个配置对象,查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。 添加一个非选中状态的选项卡面板时,记得设置'selected'属性为false。 // 添加一个未选中状态的选项卡面板 $('#tt').tabs('add',{ title: '新选项卡面板', selected: false //... }); (该功能自1.4.2版开始可用)
// 在索引为2的位置上插入一个选项卡面板
$('#tt').tabs('add',{
title: '插入的选项卡面板',
index: 2
}); |
close | which | 关闭一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引,以指定要关闭的面板。 |
getTab | which | 获取指定选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 |
getTabIndex | tab | 获取指定选项卡面板的索引。 |
getSelected | none | 获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index); |
select | which | 选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 |
unselect | which | 取消选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。(该方法自1.3.5版开始可用) |
showHeader | none | 显示选项卡的标签头。(该方法自1.3.5版开始可用) |
hideHeader | none | 隐藏选项卡的标签头。(该方法自1.3.5版开始可用) |
showTool | none | 显示工具栏。(该方法自1.4.3版开始可用) |
hideTool | none | 隐藏工具栏。(该方法自1.4.3版开始可用) |
exists | which | 表明指定的面板是否存在,'which'参数可以是选项卡面板的标题或索引。 |
update | param | 更新指定的选项卡面板,'param'参数包含2个属性: tab:要更新的选项卡面板。 type:更新类型,可用值有:'header', 'body', 'all'。(该参数自1.4.1版开始可用) options:面板的属性。 代码示例: // 更新选择的面板的新标题和内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 $('#tt').tabs('update', { tab: tab, options: { title: '新标题', href: 'get_content.php' // 新内容的URL } }); // 调用 'refresh' 方法更新选项卡面板的内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 tab.panel('refresh', 'get_content.php'); |
enableTab | which | 启用指定的选项卡面板,'which'参数可以是选项卡面板的标题或索引。(该方法自1.3版开始可用) 代码示例: $('#tt').tabs('enableTab', 1); // 启用第二个选项卡面板 $('#tt').tabs('enableTab', 'Tab2'); // 启用标题为Tab2的选项卡面板 |
disableTab | which | 禁用指定的选项卡面板,'which'参数可以是选项卡面板的标题或索引。(该方法自1.3版开始可用) 代码示例: $('#tt').tabs('disableTab', 1); // 禁用第二个选项卡面板 |
scrollBy | deltaX | 滚动选项卡标题指定的像素数量,负值则向右滚动,正值则向左滚动。(该方法自1.3版开始可用) 代码示例: // 滚动选项卡标题到左边 $('#tt').tabs('scroll', 10); |
七、整体代码部分
easyui 可参考官方文档 ------ 进行使用
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 通过指令进行引入 -->
<%-- <%@ include file="static/common/NewFile1.jsp" %> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<! -- 通过头部引入界面能作用base的内容 -->
<!-- 通过指令进行引入 -->
<%@ include file="static/common/NewFile1.jsp" %>
<!-- 通过base引入绝对路径,因为绝对路径为标准格式 -->
<base href="${pageContext.request.servletContext.contextPath }/static">
<script type="text/javascript">
$(function(){
console.log(xPath);
});
</script>
</head>
<body>
<body class="easyui-layout">
<div data-options="region:'north',title:'标题',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'权限',split:true" style="height:100px;">
</div>
<div data-options="region:'west',title:'列表',split:true" style="width:150px;">
<!-- 树形列表 -->
<!--
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul> -->
<ul id = "menuTree">
</ul>
</div>
<div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
<!-- 内容——选项卡 -->
<div id="myTabs" class="easyui-tabs" fit="true">
</div>
</div>
<script type="text/javascript">
//加载函数
$(function(){
$('#menuTree').tree({
url: xPath+"/promissionServelt.do",
//设置点击事件
onClick:function(node){//node指的是节点对象(JSON文件中的对象)
//console.log(node);
addMyTabs(node);
}
});
});
//封住新增选项卡的方法
function addMyTabs(node){
//当单击一级菜单无选项卡出现(通过id)
//console.log(node.id);
if(node.id === '1'){
return;
}
//解决问题:重复的选项卡
//通过exists判断选项是否存在
let flag = $("#myTabs").tabs('exists',node.text);
//console.log(flag);
if(flag){
//当存在第二次点击的情况的就直接进行选中
$("#myTabs").tabs('select',node.text);
return;
}
$('#myTabs').tabs('add',{
title:node.text, //选项卡标题
content:"<iframe src='aa.jsp' width=100% height=100%>", //选项卡内容
closable:true //选项卡能否关闭
});
}
</script>
</body>
<!-- <h3>普通超链接</h3>
<a>超链接</a>
<button>普通按钮</button>
通过jQuery EasyUI 实现把超链接转换 按钮
<a class="easyui-link button" id="abtn">超链接按钮</a>
<script type="text/javascript">
/* 该区域为设置相对应的一些来自 jQuery EasyUI 中的样式设置 */
$("#abtn").linkbutton({
width:'100px',
height:'200px',
//图标添加
iconCls:'icon-search',
//按钮的大小
size:'large',
//设置jQuery EasyUI中点击事件
onClick:function(){
alert(123);
//方法调用
$(this).linkbutton('disable');
}
});
</script>
-->
</body>
</html>