关于multitabs的一些调整 接着说Bootstrap-Multitabs插件,大家知道iframe的3和4的版本,是用到了这个插件,但是为了满足大家的要求,针对这个插件做了一些调整,首先这个插件3和4是不能混用的,再次,4里面该插件修改调整最多。 这里主要提一下主要增加的配置可用的信息。 #### v3版本 插件默认有用sessionStorage保存当前打开的tab,这里改成配置,默认是关闭的,如果需要可用设置为开启。 开启方式,打开 `js/index.min.js`,搜索 "选项卡" 或者直接找第85行左右。增加配置:`cache: true,` ```javascript $('#iframe-content').multitabs({ iframe : true, cache: true, nav: { backgroundColor: '#ffffff', maxTabs : 35, // 选项卡最大值 }, init : [{ type : 'main', title : '首页', url : 'lyear_main.html' }] }); ``` > 因插件存在覆盖已打开的tab项的问题,插件已于2022-01-21日修复该bug,并将 `maxTabs` 参数取消,改为增加 `showTabs: true`, 所以,如果你使用这个日期后的模板,或者你做了更新,那么在 `index.min.js` 中不用再设置 `maxTabs` 项,应将其删除。 v3所有可用的配置信息 ```javascript $.fn.multitabs.defaults = { selector: '.multitabs', // 触发multitabs的selector text,注意需要有".","#"等 iframe: false, // iframe模式的总局设置。当值为false的时候,为智能模式,自动判断(内网用ajax,外网用iframe)。缺省为false。 cache: false, // 新增的配置,插件默认有用sessionStorage,默认关闭 class: '', // 主框架的class type: 'info', // 更改信息内容名称,无需更改。 init: [], // 需要在初始加载的tab refresh: false, // 全局强制更新 nav: { backgroundColor: '#f5f5f5', // 默认nav-bar 背景颜色 class: '', // 为nav添加class draggable: true, // nav tab 可拖动选项 fixed: false, // 固定标签头列表 layout: 'default', // 有两种模式,'default', 'classic'(所有隐藏tab都在下拉菜单里) 和 'simple' showTabs: true, // 是否显示Tab标签栏 maxTitleLength: 25, // tab标题的最大长度 showCloseOnHover: false, // 当值为true,仅在鼠标悬浮时显示关闭按钮。false时一直显示 style: 'nav-tabs' // 可以为nav-tabs 或 nav-pills }, content: { ajax: { class: '', // 为ajax tab-pane 添加class error: function (htmlCallBack) { //modify html and return return htmlCallBack; }, success: function (htmlCallBack) { //modify html and return return htmlCallBack; } }, iframe: { class: '' // 为iframe tab-pane 添加class } }, language: { // 语言配置 nav: { title: 'Tab', // 默认的标签页名称 dropdown: '<i class="mdi mdi-menu"></i>', // 标签栏的下拉菜单名称 showActivedTab: '显示当前选项卡', // 下拉菜单的显示激活页面 closeAllTabs: '关闭所有标签页', // 下拉菜单的关闭所有页面 closeOtherTabs: '关闭其他标签页', // 下拉菜单的关闭其他页面 } } }; ``` #### v4版本 v4的修改调整,除了上面 `cache` 这个配置外,还将原有的 `refresh` 改为 `isNewTab` ,而原有的 `refresh` 改为了刷新的方式,默认重复点击不做刷新,另外增加 `dbclickRefresh` 配置,该配置主要用在右侧 `tab` 双击刷新,需要请自己配置开启。 v4所有可用的配置信息 ```javascript $.fn.multitabs.defaults = { selector: '.multitabs', // 触发multitabs的selector text,注意需要有".","#"等 iframe: false, // iframe模式的总局设置。当值为false的时候,为智能模式,自动判断(内网用ajax,外网用iframe)。缺省为false。 external, use iframe) cache: false, // 是否缓存当前打开的tab class: '', // 主框架的class type: 'info', // 更改信息内容名称,无需更改。 init: [], // 需要在初始加载的tab isNewTab: false, // 是否以新tab标签打开,为true时,每次点击都会打开新的tab refresh: 'no', // iframe中页面是否刷新,'no':'从不刷新','nav':'点击菜单刷新','all':'菜单和tab点击都刷新' dbclickRefresh: false, // 双击刷新开启最好不要和refresh:'all'同时使用 nav: { backgroundColor: '#f5f5f5', // 默认nav-bar 背景颜色 class: '', // 为nav添加class draggable: true, // nav tab 可拖动选项 fixed: false, // 固定标签头列表 layout: 'default', // 有两种模式,'default', 'classic'(所有隐藏tab都在下拉菜单里) 和 'simple' showTabs: true, // 是否显示Tab标签栏 maxTitleLength: 25, // tab标题的最大长度 showCloseOnHover: false, // 当值为true,仅在鼠标悬浮时显示关闭按钮。false时一直显示 style: 'nav-tabs' // 可以为nav-tabs 或 nav-pills }, content: { ajax: { class: '', //Class for ajax tab-pane error: function (htmlCallBack) { //modify html and return return htmlCallBack; }, success: function (htmlCallBack) { //modify html and return return htmlCallBack; } }, iframe: { class: '' // 为iframe tab-pane 添加class } }, language: { // 语言配置 nav: { title: 'Tab', // 默认的标签页名称 dropdown: '<i class="mdi mdi-menu"></i>', // 标签栏的下拉菜单名称 showActivedTab: '显示当前选项卡', // 下拉菜单的显示激活页面 closeAllTabs: '关闭所有标签页', // 下拉菜单的关闭所有页面 closeOtherTabs: '关闭其他标签页', // 下拉菜单的关闭其他页面 } } }; ```