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 ...
随机推荐
- Redis数据类型使用场景及有序集合SortedSet底层实现详解
Redis常用数据类型有字符串String.字典dict.列表List.集合Set.有序集合SortedSet,本文将简单介绍各数据类型及其使用场景,并重点剖析有序集合SortedSet的实现. Li ...
- Odd-e CSD Course Day 4
今天有一部分是透過 Code Review 來引發我們對於下面幾個方向的想法 Good Unit Tests 在今天的 Code Review 裡,Stanly 翻出了一個我們寫的 Unit Test ...
- 设计模式之代理模式(Proxy)(2)
代理模式是为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用,其特征是代理类与委托类有同样的接口. ...
- 程序员50题(JS版本)(一)
程序1:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? for(var i=1,sum=0;i<=4;i++){ for(var j=1;j<=4;j++){ ...
- C#网络请求与JSON解析
最新学校的海康摄像头集控平台(网页端)不能在win10里登录,我寻思着拿海康的c# demo直接改. 首先得解决权限问题,每个教师任教不同年级,只能看到自己所在年级的设备,涉及到登录,在此记录一下C# ...
- 基于element-tree-table树型表格点击节点请求数据展开树型表格
效果: 引用CSS.JS: Vue.element-ui.Axios treeTable: https://github.com/ProsperLee/element-tree-grid 模拟根据父i ...
- Python开发爬虫之理论篇
爬虫简介 爬虫:一段自动抓取互联网信息的程序. 什么意思呢? 互联网是由各种各样的网页组成.每一个网页对应一个URL,而URL的页面上又有很多指向其他页面的URL.这种URL之间相互的指向关系就形成了 ...
- iOS----------UITextField实现过滤选中状态拼音
2018年上班的第二天,就这样背了一个大锅.我们项目中有一个搜索功能,在这一期的版本中,为了增强优化,去除了过滤空格的请求,这样或许能增加很好的用户体验,恰恰相反,偷鸡不成蚀把米.没想到苹果系统的输入 ...
- EditText超出字数限制,给用户提示
当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...
- Android细笔记--DataStorage
Shared Preferences 即使应用被杀了,shared preference也还是存在的 Internal Storage 创建于internal的文件只对本应用开放权限,即使手机用户本身 ...