H+框架新增选项卡功能扩展
H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题。前段时间本人做项目时刚好遇到新的需求,需要通过页面按钮创建新的选项卡展示页面,很遗憾,原框架没有提供此功能,只能自己去探索源码方法,找到js/contabs.js文件进行扩展,见于网友问我, 现整理出来方便大家学习共享。
- 将以下方法拷贝到js/contabs.js文件中:
/**
* 添加选项卡(扩展)
* @param dataUrl 请求路径
* @param menuName tab名称
* @param dataIndex tab标识
* @returns
*/
function addMenuTab(dataUrl,menuName,dataIndex) {
// 获取标识数据
var flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;
// 选项卡菜单已存在
$('.J_menuTab').each(function () {
if ($(this).data('id') == dataUrl) {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.J_menuTab').removeClass('active');
scrollToTab(this);
// 显示tab对应的内容区
$('.J_mainContent .J_iframe').each(function () {
if ($(this).data('id') == dataUrl) {
$(this).show().siblings('.J_iframe').hide();
return false;
}
});
}
flag = false;
return false;
}
});
// 选项卡菜单不存在
if (flag) {
var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
$('.J_menuTab').removeClass('active');
// 添加选项卡对应的iframe
var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
// 添加选项卡
$('.J_menuTabs .page-tabs-content').append(str);
scrollToTab($('.J_menuTab.active'));
}
return false;
}
- 在其它页面js引用方法:
parent.addMenuTab(dataUrl,menuName,dataIndex)
备注说明:为防止出现方法找不到问题,我们需要对contabs.js的方法做下位置调整:请将addMenuTab(新增方法)、 calSumWidth(计算元素集合的总宽度) 、scrollToTab(滚动到指定选项卡) 等方法移到 $(function () {} 方法体外保存即可!
大家也可以直接下载我改好的contabs.js文件替换即可。