模板简介
模板使用简要说明
主题配色及保存
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
点击侧边栏刷新
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本子页面内新建TAB
iframe中操作当前Tabs
iframe页面内的loading
多标签页(Multitabs)插件说明
关于multitabs的一些调整
调整左侧的宽度
webuploader使用时候的问题
关于模板的默认主题或者配色
关于模板的字体图标问题
关于版权和商业用途
模板中固有的插件
光年模板的loading和消息(v3)
rangeSlider滑块(v3)
bootstrap-datepicker日期(v3)
bootstrap-datepicker日期(v4)
bootstrap-datetimepicker日期时间(v3)
bootstrap-datetimepicker日期时间(v4)
perfect-scrollbar滚动条
Chart.js图表
bootstrap-colorpicker颜色选择
jquery-confirm对话框
jquery.tagsinput标签
bootstrap-notify消息(v4)
chosen.jquery关联选择
jquery.bootstrap.wizard向导
clockpicker时间选择(v4)
bootstrap-maxlength长度验证(v4)
bootstrap-select下拉选择(v4)
fullcalendar日程(v4)
bootstrap-table表格插件
插件项目包含插件
Date Range Picker时间段选择
material风格时间选择器
dropzone上传
uploadify上传
webuploader上传
H5图片上传
cropper图片裁剪
ckeditor富文本编辑器
editor.md编辑器
summernote富文本编辑器
tinymce富文本编辑器
ueditor富文本编辑器
wangeditor富文本编辑器
bootstrap-validate表单验证
jquery-validate表单验证
bootstrap-select下拉选择
bootstrap-selectN联动
bootstrap-lyear-select下拉
select2下拉
bootstrap-multiselect下拉多选
lyear-dropdowntree下拉树状
ZTree树形菜单
treeview树状插件
jstree树状结构
imgVer拼图滑块
sliderVerification滑块验证
bootstrap3-dialog模态框
layer弹窗
jquery.auto.complete自动填充
fixedheadertable固定表头
fontIconPicker图标选择
fullcalendar日程
jQuery Raty评分
lyear.loading加载
Bootstrap MaxLength长度验证
jquery.toolbar弹出式工具栏
jquery.bootstrap-touchspin输入框微调
插件项目包含示例
表单布局示例
聊天页面示例
logo处使用文字
模态框中使用Tab选项卡
模态框最大化
顶部消息示例
搜索布局
搜索布局2
搜索布局3
侧滑边栏区域
选择示例
选择示例2
选择示例3
代码演示切换
留言列表布局
数据统计布局
产品价格布局
搜索框
用户头像篇
动画篇
其他篇
另一种侧边栏菜单
关于multitabs的一些调整 - 光年模板说明文档 - 笔下光年
网站首页
关于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: '关闭其他标签页', // 下拉菜单的关闭其他页面 } } }; ```
上一篇:
多标签页(Multitabs)插件说明
下一篇:
调整左侧的宽度