easyui-tab标签
一. 加载方式
//class 加载方式
<div id="box" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1">
tab1
</div>
<div title="Tab2" data-options="closable:true">
tab2
</div>
<div title="Tab3"
data-options="iconCls:'icon-reload',closable:true">
tab3
</div>
</div>
//JS 加载调用
$('#box').tabs({
//...
});
二.属性列表
//属性设置
$('#box').tabs({
width : 500,
height : 300,
plain : true,
fit : true,
border : true,
scrollIncrement : 1,
scrollDuration : 1000,
tools : [{
iconCls : 'icon-add',
handler : function () {
alert('添加!');
},
},{}],
tools : '#tab-tools',
toolPosition : 'left',
tabPosition : 'left',
headerWidth : 300,
tabWidth : 100,
tabHeight : 50,
selected : 1,
showHeader : false,
});
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
<a class="icon-help" onclick="javascript:alert('help')"></a>
</div>
三.事件列表
$('#box').tabs({
onLoad : function (panel) {
alert(panel);
},
onSelect : function (title,index) {
alert(title + '|' + index);
},
onUnselect : function (title, index) {
alert(title + '|' + index);
},
onBeforeClose : function (title, index) {
alert(title + '|' + index);
return false;
},
onClose : function (title, index) {
alert(title + '|' + index);
},
onAdd : function (title, index) {
alert(title + '|' + index);
},
onUpdate : function (title, index) {
alert(title + '|' + index);
},
onContextMenu : function (e, title, index) {
alert(e + '|' + title + '|' + index);
}
});
三.方法列表
//返回属性对象
console.log($('#box').tabs('options'));
//返回所有选项卡面板
console.log($('#box').tabs('tabs'));
//新增一个选项卡
$('#box').tabs('add', {
title : '新面板',
selected : false,
});
//选择指定下标的选项卡
$('#box').tabs('select', 1);
//取消选择指定下标的选项卡
$('#box').tabs('select', 0);
//关闭指定下标的选项卡
$('#box').tabs('close', 1);
//重新调整面板布局和大小
$('#box').tabs('resize');
//指定下标的选项卡是否存在
console.log($('#box').tabs('exists', 4));
//获取指定下标的选项卡
console.log($('#box').tabs('getTab', 1));
//获取指定面板的索引
console.log($('#box').tabs('getTabIndex','#tab2'));
//获取被选定的选项卡
console.log($('#box').tabs('getSelected'));
//显示选项卡标题
$('#box').tabs('showHeader');
//隐藏选项卡标题
$('#box').tabs('hideHeader');
//更新一个选项卡
$('#box').tabs('update', {
tab : $('#tab2'),
options : {
Title : '新标题',
}
});
//禁用指定下标或标题的选项卡
$('#box').tabs('disableTab', 1);
$('#box').tabs('disableTab', 'Tab2');
//启用指定下标或标题的选项卡
$('#box').tabs('enableTab', 1);
$('#box').tabs('enableTab', 'Tab2');
//滚动选项卡标题,正值向左,负值向右
$('#box').tabs('scrollBy', 100);
PS:我们可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;
五.选项卡面板
选项卡面板继承了 panel 一些属性,以下是公共属性。
此文出处来子网络---在此只为自己收藏没事看看方便自己查阅。。。。。。
easyui-tab标签的更多相关文章
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
- 通过easyui tab添加的子页面JS脚本必须放在body才生效
通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码
- jquery easyui tab加载内容的几种方法
转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...
- jquery easyui Tab 引入页面的问题
jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href ...
- JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题
前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NE ...
- 【转】 jquery easyui Tab 引入页面的问题
原地址:http://blog.csdn.net/superdog007/article/details/8225518 jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel
前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 支持自动切换的tab标签代码札记
html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...
随机推荐
- 语音识别(LSTM+CTC)
完整版请微信关注“大数据技术宅” 序言:语音识别作为人工智能领域重要研究方向,近几年发展迅猛,其中RNN的贡献尤为突出.RNN设计的目的就是让神经网络可以处理序列化的数据.本文笔者将陪同小伙伴们一块儿 ...
- IEnumerable<T>和IQueryable<T>区分
LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...
- redis常见错误处理
--1]当内存不足引起 redis出错 先尝试下列语句,指定redis使用内存 redis-server.exe redis.windows.conf --maxheap 200mredis-ser ...
- WPF 语言格式化文本控件
前言 本章讲述正确添加语言资源的方式,以及一段语言资源的多种样式显示. 例如:“@Winter,你好!感谢已使用软件 800 天!” 在添加如上多语言资源项时,“XX,你好!感谢已使用软件 X 天!” ...
- 使用 Lombok 优雅编码
一.介绍和使用 Lombok 是一个 java 库,能以简单的注解形式来简化 java 代码,提高开发人员的开发效率. 常见使用在开发过程中需要写的 javabean,往往开发需要花时间去添加相应的 ...
- Form提交表单后页面刷新不跳转的实现
<form action="" id="" method="post" target="nm_iframe"> ...
- sublime 使用快捷键
Goto Anything 快捷键 Ctrl+P (支持模糊匹配) 1,查找文件 在查找框中输入文件目录(知道目录直接输入目录,不知道目录直接输入页面名称即可.支持模糊匹配) index.ht ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- Vue:如何在地图上添加自定义覆盖物(点)
目录 如何在地图上添加自定义覆盖物(点) 首发日期:2019-1-25 如何在地图上添加自定义覆盖物(点) 此文重点是在地图上标点,所以就省去引入百度地图的步骤了. 先给一下最终的效果. 这个效果主要 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...