jQuery Easyui Tabs扩展根据自定义属性打开页签


Posted in Javascript onAugust 15, 2016

easyui是一个轻量级的后台管理系统框架,各种组件均有,使用简单方便,现在已经有免费版的License了。

1.增加扩展

<script type="text/javascript" >
/**
* @author {kexb} easyui-tab扩展根据id切换页面
*/
$.extend($.fn.tabs.methods, {
getTabById: function (jq, id) {
var tabs = $.data(jq[0], 'tabs').tabs;
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tab.panel('options').id == id) {
return tab;
}
}
return null;
},
selectById: function (jq, id) {
var tab;
var tabs = $.data(jq[0], 'tabs').tabs;
for (var i = 0; i < tabs.length; i++) {
tab = tabs[i];
if (tab.panel('options').id == id) {
break;
}
}
if (tab != undefined) {
var curTabIndex = $("#tabs").tabs("getTabIndex", tab);
$('#tabs').tabs('select', curTabIndex);
}
},
existsById: function (jq, id) {
return jq.tabs('getTabById', id) != null;
}
});
</script>

2.点击事件open方法

function Open(text, url, id) {
var tabId = ReplaceAll(url, '/','');
var h = ComputGridHeight();
if (url == "null" || url == "" || url == "") {
return;
}
if ($("#tabs").tabs("existsById", tabId)) {
$("#tabs").tabs("selectById", tabId);
}
else
{
if (url.indexOf("?") < 0) {
url += "?_menuId=" + id;
}
else {
url += "&_menuId=" + id;
}
$('#tabs').tabs('add', {
id:tabId,
title: text,
closable: true,
content: createTabContent(url, h),
url: url
});
}
}

以上所述是小编给大家介绍的jQuery Easyui Tabs扩展根据自定义属性打开页签 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 #Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 #Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 #Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 #Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 #Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 #Javascript
对js eval()函数的一些见解
Aug 15 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python3获取url文件大小示例代码
2019/09/18 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
大学运动会入场词
2014/02/22 职场文书
ktv筹备计划书
2014/05/03 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
团结演讲稿范文
2014/05/23 职场文书
建设工地安全标语
2014/06/07 职场文书
个人工作能力自我评价
2015/03/05 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书