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页面时,怎 ...
随机推荐
- 【甘道夫】使用HIVE SQL实现推荐系统数据补全
需求 在推荐系统场景中,假设基础行为数据太少,或者过于稀疏,通过推荐算法计算得出的推荐结果非常可能达不到要求的数量. 比方,希望针对每一个item或user推荐20个item,可是通过计算仅仅得到8个 ...
- 《C++游戏开发》十八 角色在障碍物中智能行走的实现
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/11621337 作者:七十一雾央 新浪微博:http: ...
- iOS 开发 Message Digest Algorithm 5(MD5加密)
MD5的全称是Message Digest Algorithm 5(消息摘要算法第五版),是计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.在90年代初由MIT Laboratory ...
- jz2440开发板设置备份
___________________uboot______________________________________ OpenJTAG> pribootdelay=2baudrate=1 ...
- 兼容性问题( css)
记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新 提出时间 问题描述 解决方案 2014/7/15 table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字 ...
- Android:WebView(慕课网)
使用webview最重要的三点: 1 WebView加载本地资源(webView.loadUrl("file:///android_asset/example.html");) 2 ...
- 将时间显示为“刚刚”“n分钟/小时前”等
在很多场合为了显示出信息的及时性,一般会将时间显示成“刚刚”,“5分钟前”,“3小时前”等,而不是直接将时间打印出来.比如微博,SNS类应用就最长用到这个功能.而一般存储在数据库中的时间格式为 Uni ...
- Android学习笔记:ListView简单应用--显示文字列表
在activity中的编写如下代码: final List<String> items = new ArrayList<String>(); //设置要显示的数据,这里因为是例 ...
- 微信平台接入Web页面功能接口(C#)
微信平台接入web页面功能接口 今年因工作需要,通过微信平台接入公司的Wap页面,回忆下,记录内容,方面以后使用. 1.成为开发者后,你才可以使用公众平台的开发功能.需要填写URL和ToKen,接口配 ...
- iOS 打印日志的保存 (一)
当我们真机调试app的时候,作为开发人员的我们可以很方便的通过Xcode的debug area查看相关的打印信息.而测试人员在对app进行测试的时候,一旦出现了crash,这时我们就需要把相关的打印信 ...