EasyUI-标签(Tabs)用法
用法示例
创建tabs
1. 经由标记创建Tabs
从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样。
1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
2. <div title="Tab1" style="padding:20px;display:none;">
3. tab1
4. </div>
5. <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
6. tab2
7. </div>
8. <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
9. tab3
10. </div>
11. </div>
2. 编程创建Tabs
现在我们编程创建 Tabs,我们同时捕捉 'onSelect' 事件。
1. $('#tt').tabs({
2. border:false,
3. onSelect:function(title){
4. alert(title+' is selected');
5. }
6. });
增加新的 tab panel
1. // 增加一个新的 tab panel
2. $('#tt').tabs('add',{
3. title:'New Tab',
4. content:'Tab Body',
5. closable:true
6. });
获取选中的 Tab
1. // 获取选中的 tab panel 和它的 tab 对象
2. var pp = $('#tt').tabs('getSelected');
3. var tab = pp.panel('options').tab; // 相应的 tab 对象
特性
名称 |
类型 |
说明 |
默认值 |
width |
number |
Tabs 容器的宽度。 |
auto |
height |
number |
Tabs 容器的高度。 |
auto |
plain |
boolean |
True 就不用背景容器图片来呈现 tab 条。 |
false |
fit |
boolean |
True 就设置 Tabs 容器的尺寸以适应它的父容器。 |
false |
border |
boolean |
True 就显示 Tabs 容器边框。 |
true |
scrollIncrement |
number |
每按一次tab 滚动按钮,滚动的像素数。 |
100 |
scrollDuration |
number |
每一个滚动动画应该持续的毫秒数。 |
400 |
tools |
array |
右侧工具栏,每个工具选项都和 Linkbutton 一样。 |
null |
事件
名称 |
参数 |
说明 |
onLoad |
panel |
当一个 ajax tab panel 完成加载远程数据时触发。 |
onSelect |
title |
当用户选择一个 tab panel 时触发。 |
onBeforeClose |
title |
当一个 tab panel 被关闭前触发,返回 false 就取消关闭动作。 |
onClose |
title |
当用户关闭一个 tab panel 时触发。 |
onAdd |
title |
当一个新的 tab panel 被添加时触发。 |
onUpdate |
title |
当一个 tab panel 被更新时触发。 |
onContextMenu |
e, title |
当一个 tab panel 被右键点击时触发。 |
方法
名称 |
参数 |
说明 |
options |
none |
返回 tabs options。 |
tabs |
none |
返回全部 tab panel。 |
resize |
none |
调整 tabs 容器的尺寸并做布局。 |
add |
options |
增加一个新的 tab panel,options 参数是一个配置对象,更多详细信息请参见 tab panel 特性。 |
close |
title |
关闭一个 tab panel,title 参数是指被关闭的 panel。 |
getTab |
title |
获取指定的 tab panel。 |
getSelected |
none |
获取选中的 tab panel。 |
select |
title |
选择一个 tab panel。 |
exists |
title |
是指是否存在特定的 panel。 |
update |
param |
更新指定的 tab panel,param 包含两个特性: |
Tab Panel
Tab panel 特性被定义在 panel 组件里,下面是一些常用的特性。
名称 |
类型 |
说明 |
默认值 |
title |
string |
Tab panel 的标题文字。 |
|
content |
string |
Tab panel 的内容。 |
|
href |
string |
加载远程内容来填充 tab panel 的 URL。 |
null |
cache |
boolean |
True 就在设定了有效的 href 特性时缓存这个 tab panel。 |
true |
iconCls |
string |
显示在tab panel 标题上的图标的 CSS 类。 |
null |
width |
number |
Tab panel 的宽度。 |
auto |
height |
number |
Tab panel 的高度。 |
auto |
一些附加的特性
名称 |
类型 |
说明 |
默认值 |
closable |
boolean |
当设置为 true 时,tab panel 将显示一个关闭按钮,点击它就能关闭这个tab panel。 |
false |
selected |
boolean |
当设置为 true 时,tab panel 将被选中。 |
false |
jQuery
EasyUI 标签(Tabs)用法
[ad#content]这里介绍一下标签(Tabs)用法以及参数,首先我们可以先看一下面板功能可以做什么,下图就是一个面板的实例。
同样我们来通过一个小例子来学习一下这些参数,HTML代码如下:
1
<div
id="tt" style="width:500px;height:250px;">
2
<div title="Tab1"
style="padding:20px;display:none;">
3
tab1
4
</div>
5
<div title="Tab2" closable="true"
style="overflow:auto;padding:20px;display:none;">
6
tab2
7
</div>
8
<div title="Tab3"
icon="icon-reload" closable="true"
style="padding:20px;display:none;">
9
tab3
10
</div>
11
</div>
然后按照《jQuery EasyUI框架使用文档》包含必要文件后,只要在$(function(){ }); 里添加一行代码来生成面板:
12
$('#tt').tabs(options);
也可以给面板函数添加一些参数:
13
$('#tt').tabs('add',{
14
title:'New Tab',
15
content:'Tab Body',
16
closable:true
17
});
参数
参数名 |
参数 |
描述 |
默认值 |
width |
数字 |
标签容器的宽度 |
auto |
height |
数字 |
标签容器的高度 |
auto |
idSeed |
数字 |
The |
0 |
plain |
布尔 |
如果为ture标签没有背景图片 |
false |
fit |
布尔 |
如果为ture则设置标签的大小以适应它的容器的父容器 |
false |
border |
布尔 |
如果为true则显示标签容器的边框 |
true |
scrollIncrement |
数字 |
滚动按钮每次被按下时滚动的像素值 |
100 |
scrollDuration |
数字 |
每次滚动持续的毫秒数 |
400 |
事件
事件名 |
参数 |
描述 |
onLoad |
arguments |
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同 |
onSelect |
title |
当用户选择一个标签面板时被触发 |
onClose |
title |
当用户关闭一个标签面板时被触发 |
方法
方法名 |
参数 |
描述 |
resize |
none |
调整标签容器的大小和布局 |
add |
options |
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性 |
close |
title |
关闭一个标签面板,标题参数表明被关闭的面板 |
select |
title |
选择一个标签面板 |
exists |
title |
指示特定的标签是否存在 |
标签面板属性
属性名 |
类型 |
描述 |
默认值 |
id |
字符串 |
标签面板的ID属性 |
null |
title |
字符串 |
标签面板的文本标题 |
|
content |
字符串 |
标签面板的主体内容 |
|
href |
字符串 |
填充标签内容的远程URL地址 |
null |
cache |
布尔 |
如果为true,当设置href时,对标签面板进行缓存 |
true |
icon |
字符串 |
标签面板上标题的图标CSS类 |
null |
closable |
布尔 |
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。 |
false |
selected |
布尔 |
如果为true,标签标签面板将被选中 |
false |
width |
数字 |
标签面板的宽度 |
auto |
height |
数字 |
标签面板的高度 |
auto |
总结发布jQuery
EasyUI 中文API—Layout(Tabs)
Tabs【标签】
创建一个tab标签
使用说明
使用到的头文件:easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
HTML代码
1
<div id="tt" style="width:500px;height:250px;">
2
<div title="Tab1" style="padding:20px;display:none;">
3
tab1
4
</div>
5
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
6
tab2
7
</div>
8
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
9
tab3
10 </div>
11 </div>
JQuery代码
12 //创建一个标签容器
13 $('#tt').tabs(options);
14
15 //增加一个tab面板
16 $('#tt').tabs('add',{
17 title:'New Tab',
18 content:'Tab Body',
19 closable:true
20 });
Tabs Container特性说明
|
Tabs Container事件说明
名称 |
参数 |
描述 |
onLoad |
arguments |
ajax面板加载完毕后触发,参数调用跟jQuery.ajax调功能一样 |
onSelect |
title |
选中标签面板触发 |
onClose |
title |
关闭标签面板触发 |
Tabs Container方法说明
名称 |
参数 |
描述 |
resize |
none |
调整容器的布局 |
add |
options |
添加一个新的标签面板,选择一个配置对象参数,看标签面板的特性说明 |
close |
title |
关闭一个标签面板,标题参数显示的面板被关闭。 |
select |
title |
选中一个标签面板 |
exists |
title |
指明特殊面板显示存在。 |
Tab Panel特性说明
名称 |
类型 |
描述 |
默认值 |
id |
string |
标签面板id |
null |
title |
string |
标签面板的title |
|
content |
string |
标签面板的content. |
|
href |
string |
面板远程加载进来数据的地址. |
null |
cache |
boolean |
设置true,缓存标签面板 |
true |
icon |
string |
标签面板标题上图标css。 |
null |
closable |
boolean |
设置true,标题上显示一个关闭按钮 |
false |
selected |
boolean |
设置true,标签面板被选中【默认那个显示在前】 |
false |
width |
number |
标签面板宽度 |
auto |
height |
number |
标签面板高度 |
auto |
有些觉得翻译的牵强,肯定也有错的地方,谢谢指出来。
EasyUI-标签(Tabs)用法的更多相关文章
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- 第五节:表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- HTML ---滚动条样式代码及<marquee>标签的用法;
html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overfl ...
- html部分---a标签的用法、放置图片与表格;
a标签的用法: 1.加链接 herf <a href="http://www.baidu.com">百度一下</a> 2.加载本地文件 <a hre ...
- label 和 legend标签的用法
label 和 legend标签的用法 label标准用法: 一般浏览器都支持 一般而言,label标签位于表单元素的前面或者后面,为控件提供说明文字 <label for="user ...
- 9.mybatis动态SQL标签的用法
mybatis动态SQL标签的用法 动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么 ...
- J2EE进阶(三)struts2 <s:action>标签的用法
J2EE进阶(三)struts2 <s:action>标签的用法 前言 使用action标签,可以允许在jsp页面中直接调用Action,(类似AJAX页面调用)在调用Action时候,可 ...
- JSTL之C标签的用法
转自:https://my.oschina.net/zimingforever/blog/78980 最近开始整理以前的onenote,居然有200多篇,大致翻了下,很多内容都是在大学的时候学习的时候 ...
随机推荐
- ofbiz进击 第五节。 --OFBiz配置之[general.properties] 共有属性的分析(含email)
文件内容如下 unique.instanceId=ofbiz1 #--为JobManger方法提供实例的ID(必须小于20个字符) currency.uom.id.default=USD ...
- android复习第二天------布局
1,在4,0版本前一共有五种布局,且都是ViewGroup的子类分别是 RelativeLayout(相对),AbsoluteLayout(绝对),LinearLayout(线性),FrameLayo ...
- paper 25 :SVM支持向量机是什么意思?
转载来源:https://www.zhihu.com/question/21094489 作者:余洋链接:https://www.zhihu.com/question/21094489/answer/ ...
- Java IO总结之缓冲读入文件
package com.io; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException ...
- 算法第四版 在Eclipse中调用Algs4库
首先下载Eclipse,我选择的是Eclipse IDE for Java Developers64位版本,下载下来之后解压缩到喜欢的位置然后双击Eclipse.exe启动 然后开始新建项目,File ...
- android模拟器启动没有拨号功能
网上查询了很多资料, 其中一位网友给出的结论是android 4.3模拟器的bug, 如果在通讯录中添加好友,也是可以进行拨号的. 总结: 自认为是SDK安装程序不完整或设置AVD模拟器的时候设置项出 ...
- CentOS7.1搭建服务器篇(1)
服务器搭建篇 1.镜像选择,CentOS 7.1 minmal.iso 2.yum install net-tools[提供ifconfig工具,我不习惯IP命令] 3.配置静态IP地址58.154. ...
- where 子句和having子句中的区别
1.where 不能放在GROUP BY 后面 2.HAVING 是跟GROUP BY 连在一起用的,放在GROUP BY 后面,此时的作用相当于WHERE 3.WHERE 后面的条件中不能有聚集函数 ...
- selenium定位失败记录
selenium webdriver定位不到元素的五种原因及解决办法 1.动态id定位不到元素 for example: //WebElement xiexin_element = driver.fi ...
- PHPExcel读取excel文件示例
PHPExcel读取excel文件示例PHPExcel最新版官方下载网址:http://phpexcel.codeplex.com/PHPExcel是一个非常方便生成Excel格式文件的类,官方下载包 ...