基本效果:

效果图:

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 选项卡标签的更多相关文章

  1. 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件

    当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...

  2. JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案

    <script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...

  3. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  4. 第二百节,jQuery EasyUI,Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  5. JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  6. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  7. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  8. 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo ...

  9. EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

    在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...

随机推荐

  1. 【甘道夫】使用HIVE SQL实现推荐系统数据补全

    需求 在推荐系统场景中,假设基础行为数据太少,或者过于稀疏,通过推荐算法计算得出的推荐结果非常可能达不到要求的数量. 比方,希望针对每一个item或user推荐20个item,可是通过计算仅仅得到8个 ...

  2. 《C++游戏开发》十八 角色在障碍物中智能行走的实现

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/11621337 作者:七十一雾央 新浪微博:http: ...

  3. iOS 开发 Message Digest Algorithm 5(MD5加密)

    MD5的全称是Message Digest Algorithm 5(消息摘要算法第五版),是计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.在90年代初由MIT Laboratory ...

  4. jz2440开发板设置备份

    ___________________uboot______________________________________ OpenJTAG> pribootdelay=2baudrate=1 ...

  5. 兼容性问题( css)

    记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新 提出时间 问题描述 解决方案 2014/7/15 table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字 ...

  6. Android:WebView(慕课网)

    使用webview最重要的三点: 1 WebView加载本地资源(webView.loadUrl("file:///android_asset/example.html");) 2 ...

  7. 将时间显示为“刚刚”“n分钟/小时前”等

    在很多场合为了显示出信息的及时性,一般会将时间显示成“刚刚”,“5分钟前”,“3小时前”等,而不是直接将时间打印出来.比如微博,SNS类应用就最长用到这个功能.而一般存储在数据库中的时间格式为 Uni ...

  8. Android学习笔记:ListView简单应用--显示文字列表

    在activity中的编写如下代码: final List<String> items = new ArrayList<String>(); //设置要显示的数据,这里因为是例 ...

  9. 微信平台接入Web页面功能接口(C#)

    微信平台接入web页面功能接口 今年因工作需要,通过微信平台接入公司的Wap页面,回忆下,记录内容,方面以后使用. 1.成为开发者后,你才可以使用公众平台的开发功能.需要填写URL和ToKen,接口配 ...

  10. iOS 打印日志的保存 (一)

    当我们真机调试app的时候,作为开发人员的我们可以很方便的通过Xcode的debug area查看相关的打印信息.而测试人员在对app进行测试的时候,一旦出现了crash,这时我们就需要把相关的打印信 ...