EasyUI - Tabs 选项卡标签
基本效果:
效果图:

html代码:
<div id="tab">
<div title="tab1" >
<p>tab1</p>
</div>
<div title="tab2">
<p>tab2</p>
</div>
<div title="tab3">
<p>tab3</p>
</div>
</div>
JS代码:
$(function () {
$('#tab').tabs({
width:,//宽
height: ,//高
})
})
左右调换选项卡:
效果:

HTML代码:
<div id="tab">
<div title="tab1" >
<p>tab1</p>
</div>
<div title="tab2">
<p>tab2</p>
</div>
<div title="tab3">
<p>tab3</p>
</div>
</div>
JS代码:
$(function () {
$('#tab').tabs({
width:,//宽
height: ,//高
tabWidth: ,//设置选项卡按钮的款
tabheigth: ,//设置选项卡按钮的高
})
})
右上角图标:
效果:

html代码:
<div id="tab">
<div title="tab1" >
<p>tab1</p>
</div>
<div title="tab2">
<p>tab2</p>
</div>
<div title="tab3">
<p>tab3</p>
</div>
</div>
JS代码:
$(function () {
$('#tab').tabs({
width:,//宽
height: ,//高
selected:,//初始化选择哪个选项卡
tools: [{
iconCls: 'icon-add',
handler: function () {
alert("add");
}
}, {
iconCls: 'icon-search',
handler: function () {
alert("search");
}
}]
})
})
添加新选项卡:
效果:

html代码:
<div id="tab">
<div title="tab1" >
<p>tab1</p>
</div>
<div title="tab2">
<p>tab2</p>
</div>
<div title="tab3">
<p>tab3</p>
</div>
</div>
JS代码:
$(function () {
$('#tab').tabs({
width:,//宽
height: ,//高
selected: ,//初始化选择哪个选项卡
tools: [{
iconCls: 'icon-add',
handler: function () {
$('#tab').tabs('add',{
title: '新添加',
content: '新内容',
closable: true,//是否显示删除按钮
})
}
}]
})
})
取消选项卡时提示是否关闭:
效果:
------------------------------------------------------------

-------------------------------------------------------------

html代码:
- 要有关闭按钮data-options ="closable:true"
<div id="tab">
<div title="tab1" >
<p>tab1</p>
</div>
<div title="tab2" data-options ="closable:true">
<p>tab2</p>
</div>
<div title="tab3">
<p>tab3</p>
</div>
</div>
JS代码:
$(function () {
$('#tab').tabs({
width:,//宽
height: ,//高
selected: ,//初始化选择哪个选项卡
tools: [{
iconCls: 'icon-add',
handler: function () {
$('#tab').tabs('add',{
title: '新添加',
content: '新内容',
closable: true,//是否显示删除按钮
})
}
}],
onBeforeClose: function (title, index) {//判断是否关闭
var target = this;
$.messager.confirm('确认', '你确认想要关闭' + title, function (r) {
if (r) {
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function () { }; // 允许现在关闭
$(target).tabs('close', index);
opts.onBeforeClose = bc; // 还原事件函数
}
});
return false; // 阻止关闭
}
})
})
EasyUI - Tabs 选项卡标签的更多相关文章
- 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件
当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...
- JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案
<script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel
前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo ...
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...
随机推荐
- Eclipse 取消import自动补全具体的类名
有时候,在代码里写了一个JFrame,然后Eclipse就自动添加了import javax.swing.JFrame; 但有时候希望只要import javax.swing.*;就可以了,不希望具体 ...
- 在web page中使鼠标右击失效的几种方法
这里主要介绍两种方法,一种是使用js来处理,还有一种是在html属性中设置. 方法一:js 1: <script language="javascript"> docu ...
- Eclipse开启与关闭代码自动提示功能
Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自 ...
- Oracle的function
写在这里,以便于以后忘记格式后可以查询. CREATE OR REPLACE FUNCTION TEMP_FUNC_WYL(PI_AAA100 VARCHAR2, PI_AAA102 VARCHAR2 ...
- java中传值及引伸深度克隆的思考(说白了Java只能传递对象指针)
java中传值及引伸深度克隆的思考 大家都知道java中没有指针.难道java真的没有指针吗?句柄是什么?变量地址在哪里?没有地址的话简直不可想象! java中内存的分配方式有两种,一种是在堆中分配, ...
- QTableView 添加进度条 添加按钮 TreeWidget 增删改
http://www.cnblogs.com/li-peng/p/3961386.html http://www.cnblogs.com/li-peng/p/3961843.html http://w ...
- Hibernate JPA 中配置Ehcache二级缓存
在Hibernate3 JPA里配置了一下非分布式环境的二级缓存,效果不错.具体过程如下: 1, 需要引入的jar包 http://ehcache.org/downloads/catalog 下载的包 ...
- JAVAC 命令使用方法
结构 javac [ options ] [ sourcefiles ] [ @files ] 參数可按随意次序排列. options 命令行选项. sourcefiles 一个或多个要编译的源文件( ...
- Lucene核心--构建Lucene搜索(下篇,理论篇)
2.1.6 截取索引(Indextruncate) 一些应用程序的所以文档的大小先前是不知道的.作为控制RAM和磁盘存储空间的使用数量的安全机制,你可能想要限制每个字段允许输入索引的输入数量.一个大的 ...
- SQL基础使用
result = executeQuery(“ SELECT FName, FSalary FROM T_Employee ”); for(i=0;i<result.count;i++) { s ...