jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Tabs 标签页/选项卡
用$.fn.tabs.defaults重写defaults。
依赖
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
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true
});
// 获取选中的 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 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使用时的问题
大家也可以在jquery easyui来下载,或者去官网下载和查看文档帮助. 我最近也使用了一下jquery easyui里tabs,但是发现一个问题:如果你把tabs的div开始设置为display:none,然后写个function change(){$("#tabs").css("display","block")}来让tabs显示,当执行change()时,结果tabs显示不正常. 本来应该显示为: 结果显示为: 后来我不断尝试,发现如果
-
jQuery EasyUI 中文API Layout(Tabs)
Tabs[标签] 创建一个tab标签 使用说明 使用到的头文件:easyui.css.icon.css.jquery-1.4.2.min.js.jquery.easyui.min.js html 复制代码 代码如下: <div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;&qu
-
基于Jquery easyui 选中特定的tab
获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs'
-
jquery easyui 结合jsp简单展现table数据示例
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu
-
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
复制代码 代码如下: $(document).ready(function(){ $('#tabs').tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件 $('#newtabs').click(addTab); }) var tabCounter = 1; function addTab(){ if(tabCounter > 6){ alert('tabs can not more than 6!'); return; } $('<
-
jquery-easyui关闭tab自动切换到前一个tab
复制代码 代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于 退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证 最新的在最上面 lastTabs.push(tt); //更
-
jQuery EasyUI Tab 选项卡问题小结
需要解决的问题: 比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col
-
jQuery EasyUI 布局之动态添加tabs标签页
在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用
-
jqueryUI tab标签页代码分享
本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo
-
jQuery easyui刷新当前tabs的方法
更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame_tabs').tabs('update',{ tab:current_tab, options : { content : '<iframe scrolling="auto"