jQuery EasyUI API 中文文档 - Tabs标签页/选项卡


Posted in Javascript onOctober 01, 2011

Tabs 标签页/选项卡

$.fn.tabs.defaults重写defaults

<?XML:NAMESPACE PREFIX = O />

jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
依赖
panel
linkbutton
用法示例
创建tabs
1、 经由标记创建Tabs
从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<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" closable="true" style="overflow:auto;padding:20px;display:none;"> 
tab2 
</div> 
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;"> 
tab3 
</div> 
</div>

2. 编程创建Tabs
现在我们编程创建 Tabs,我们同时捕捉 'onSelect' 事件。
$('#tt').tabs({ 
border:false, 
onSelect:function(title){ 
alert(title+' is selected'); 
} 
});

增加新的 tab panel
// 增加一个新的 tab panel 
$('#tt').tabs('add',{ 
title:'New Tab', 
content:'Tab Body', 
closable:true 
});

获取选中的 Tab
// 获取选中的 tab panel 和它的 tab 对象 
var pp = $('#tt').tabs('getSelected'); 
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:被更新的 tab panel。options:panel 的 options。

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
Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
JavaScript设计模式初探
Jan 07 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 #Javascript
JQuery获取文本框中字符长度的代码
Sep 29 #Javascript
Jquery Change与bind事件代码
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 #Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 #Javascript
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
家长对孩子评语
2014/01/30 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android