欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-01-07 18:10:52
...
Tabs 标签页/选项卡

$.fn.tabs.defaults重写defaults

jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery
依赖
panel
linkbutton
用法示例
创建tabs
1、 经由标记创建Tabs
从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到标记,每个tab panel 经由子标记被创建,其用法与Panel一样。

复制代码 代码如下:



tab1


tab2


tab3



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

微信
  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery
  • 专题推荐

    作者信息
    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery

    认证0级讲师

    推荐视频教程
  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jqueryjavascript初级视频教程
  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jqueryjquery 基础视频教程
  • 视频教程分类

    上一篇:

    下一篇: