直接上代码:
1.导入必要的css和js
<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js"></script>
2.写入四个标签和一个按钮来触发事件
<body>
<button id='addTabs' onclick='checkNum();'>check</button>
<div id='tt' class="easyui-tabs" style="height: 250px;width: 500px">
<div title='tab0' style="padding: 20px;display: none" name='tab0'>
tab0
</div>
<div title='tab1' style="padding: 20px;display: none" name='tab1'>
tab1
</div>
<div title='tab2' style="overflow: auto;display: none;padding: 20px" closable='true' name="tab2">
tab2
</div>
<div title='tab3' icon="icon-reload" closable='true' style="padding: 20px;display: none" name="tab3">
tab3
</div>
</div>
</body>
3.js的代码
<script type="text/javascript">
function checkNum(){
var tabCount = $('#tt').tabs('tabs').length;
alert("当前打开了"+tabCount+"个标签");
var isCheck = $('#tt').tabs('exists', 'tab3');
alert("打开了tab3"+isCheck);
}
</script>
4.我是通过eclipse建立的动态项目,打开服务器 输入地址,结果如下:
获取当前选中的tabs的title,因为有时候一个界面多个标签,要找到是哪个标签的查询,在做相关操作
document.onkeydown = function(event){
e = event ? event
window.event ? window.event : null);
if(e.keyCode ==13){
var pp = $('#tt_airport').tabs('getSelected');
var tabt = pp.panel('options').title;
if(tabt=='上传失败列表'){
airPort_query_error();
}else if(tabt=='已上传列表'){
airPort_query_success();
}
else{
airPort_query_over();
}
}
}
- 大小: 28.6 KB
- 大小: 92.9 KB
- 大小: 62.9 KB
分享到:
相关推荐
jQuery-ui-tabs 分页相关 jQuery-ui-tabs 分页相关
ui.tabs 选项卡
jquery-ui-tabs-paging 从 code.google.com/p/jquery-ui-tabs-paging 自动导出 当标签不适合包含 UL 的宽度时,将显示“上一个”和“下一个”按钮以滚动标签。 特征 : 当窗口大小改变时自动调整大小。 下一个和...
simple-chrome-custom-tabs Navigating to external websites from your app?...simple-chrome-custom-tabs provides easy integration of Chrome Custom Tabs into your project. Just connect it to you
d-semantic-ui-tabs 语义 UI组件。安装 npm install d-semantic-ui-tabs --save
项目使用 angularJS ui-router-tabs angular-ui-router 实现tab页切换, 1、亮点 1)tab页间切换缓存tab页数据 2)刷新页面,保留已经打开的tab页,当前活动tab为上次活动的tab 3)使用嵌套路由,实现单页面应用
前端开源库-markdown-it-expand-tabsmarkdown it expand tabs,一个markdown it插件,用于用代码块中的空格替换前导制表符。
官方离线安装包,亲测可用
bower install --save angular-ui-bootstrap-tabs-include 将脚本文件加载到您的应用程序中。 < script src =" bower_components/angular/angular.js " > </ script > < script src =" bower_...
前端项目-across-tabs,跨源站浏览器选项卡之间的轻松通信
jQuery UI是一套jQuery的页面UI插件,包含很多种常用的页面空间,例如Tabs(如本站首页右上角部分)、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片按钮,对 tab 进行滚动。 使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs ...
JavaScript应用实例-ui示例下方tabs(1.0.0-1 修复宽度不适配问题).js
EasyTabs Easy implementation of custom tabs, when TabLayout do not fit your needs. With Textviews : Or Drawables : Installation Add the jitpack source in your root build.gradle at the end of ...
所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) ...(sliders)、表格排序(table sorters)、页签(tabs) 放大镜效果(magnifier)、阴影效果(shadow)
JavaScript应用实例-ui示例app下方tabs.js
qiankun-multiple-tabs-demo.rar
AutoJs源码-ui示例app下方tabs。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己...
, 标签页(Tabs) , 工具提示框(Tooltip)等,新版本的UI将包含更多的微件。 效果库(Effects) 用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。包括特效(Effect) , 显示(Show) , 隐藏...
易于响应的 Tabs-to-Accordion 易于响应的标签 - 是一个轻量级的 jQuery 插件,它优化普通的水平或垂直标签以在多种设备上折叠,如:网络、平板电脑、手机(IPad 和 iPhone)。 此插件会调整屏幕大小并相应地更改其...