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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python3.x中自定义比较函数
2015/04/24 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python快排算法详解
2019/03/04 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
就业自我评价
2014/02/04 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS