Tabs 标签页/选项卡

$.fn.tabs.defaults重写defaults

【WEB前端开发】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

微信
  • 分享
  • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery
  • 相关标签:Tabs 标签页 选项卡
  • 本文原创发布ki4网,转载请注明出处,感谢您的尊重!
    • 上一篇:jQuery EasyUI API 中文文档 - Pagination分页_jquery
    • 下一篇:jQuery EasyUI API 中文文档 可调整尺寸_jquery

    相关文章

    相关视频

    • 原生javascript实现分享到朋友圈功能 支持...
    • jQuery链式调用与show知识浅析_jquer...
    • JS实现登录页面记住密码和enter键登录方法推荐...
    • BootstrapTable与KnockoutJS...
    • jQuery EasyUI API 中文文档 - ...
    • jEasyUI创建标签页
    • jEasyUI动态添加标签页
    • jEasyUI 添加自动播放标签页
    • 标签页
    • tab标签页

    网友评论

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

    我要评论
  • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery
  • 立即提交

    专题推荐

    • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery独孤九贱-php全栈开发教程

      全栈 100W+

      主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门

    • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery玉女心经-web前端开发教程

      入门 50W+

      主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门

    • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery天龙八部-实战开发教程

      实战 80W+

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    作者信息 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery

    ki4网

    认证0级讲师

    最近文章
    发布技术文章
    • 最新文章
    • 热门排行

      【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery

    • NPM 使用介绍
    • Node.js 安装配置
    • Webpack 入门教程
    • 关于JS中闭包概念的详细讲解(附实例)
    • JS正则表达式精通实例讲解
    • 一篇文章让你详细了解何为JSON
    • Ajax完整详细教程(三)
    • Ajax完整详细教程(二)

      【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery

    • RN布局的实例详解
    • jQ选择器汇总
    • vue.js中created方法的使用详解
    • 怎样实现Vue项目中使用Vux
    • json格式是什么?json格式文件怎么打开?
    • vuex里mapState,mapGetters使用详解
    • jquery实现点击查看更多内容控制段落文字展开折叠效果_jquery
    • 如何用JavaScript将字符串进行大小写转换(图文详解)
    推荐视频教程
  • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jqueryjavascript初级视频教程
  • 【WEB前端开发】jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jqueryjquery 基础视频教程
  • 视频教程分类
    • php视频教程
    • html视频教程
    • css视频教程
    • JS视频教程
    • jQuery视频教程
    • mysql视频教程
    • Linux视频教程
    • Python视频教程