diff --git a/admin/data/menu.json b/admin/data/menu.json index 9b883dc..eb5fb72 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -156,6 +156,19 @@ "openType": "_iframe", "href": "view/document/popup.html" }] + },{ + "id": 601, + "title": "高级组件", + "icon": "layui-icon layui-icon-console", + "type": 0, + "children": [{ + "id": 6011, + "title": "多选项卡", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/document/tab.html" + }] }, { "id": 204, "title": "其他组件", diff --git a/component/pear/css/pear-module/tag.css b/component/pear/css/pear-module/tag.css index ac06256..0a8fac2 100644 --- a/component/pear/css/pear-module/tag.css +++ b/component/pear/css/pear-module/tag.css @@ -3,7 +3,7 @@ } .input-new-tag input { - height: 100%; + height: 100%!important; border: none; padding-left: 0px; } diff --git a/component/pear/modules/tab.js b/component/pear/modules/tab.js index ecac6ba..e527c44 100644 --- a/component/pear/modules/tab.js +++ b/component/pear/modules/tab.js @@ -84,28 +84,40 @@ layui.define(['jquery', 'element'], function(exports) { var title = ''; if (opt.close) { - title += '' + opt.title + - 'ဆ' - + 'ဆ'; } else { - title += '' + opt.title + - 'ဆ' + 'ဆ'; } - element.tabAdd(this.option.elem, { title: title, content: '', id: opt.id }); - element.tabChange(this.option.elem, opt.id); } - var index = 0; + // 根据过滤 filter 标识, 删除执行选项卡 + pearTab.prototype.delTabByElem = function(elem, id, callback){ + var currentTab = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title [lay-id='"+id+"']"); + if (currentTab.find("span").is(".able-close")) { + tabDelete(elem, id, callback); + } + } + + // 根据过滤 filter 标识, 删除当前选项卡 + pearTab.prototype.delCurrentTabByElem = function(elem,callback){ + var currentTab = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this"); + if (currentTab.find("span").is(".able-close")) { + var currentId = currentTab.attr("lay-id"); + tabDelete(elem, currentId, callback); + } + } + + // 通过过滤 filter 标识, 新增标签页 pearTab.prototype.addTabOnlyByElem = function(elem, opt, time) { var title = ''; if (opt.close) { @@ -462,7 +474,6 @@ layui.define(['jquery', 'element'], function(exports) { function closeEvent(option) { $(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() { - var layid = $(this).parent().attr("lay-id"); tabDelete(option.elem, layid, option.closeEvent); }) diff --git a/view/document/menu.html b/view/document/menu.html new file mode 100644 index 0000000..f796a77 --- /dev/null +++ b/view/document/menu.html @@ -0,0 +1,114 @@ + + + + + layarea + + + +
+
+
+
开发环境
+
+ Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换 +
+
+
+
+
+
+

显示代码

+
+ 
+							    
+							    并
+							    
+							    并
+							    
+
+
+
+
+
+
+
+
+ 基本使用 +
+
+ +
+
+
+
+
+
+
+

显示代码

+
+ 
+								tab.render({
+								    elem: 'content',
+								    roll: false,
+								    tool: false,
+								    width: '100%',
+								    height: '500px',
+								    index: 0,
+								    tabMax: 30,
+								    closeEvent: function(id) {
+								        layer.msg("关闭回调")
+								    },
+								    data: [{
+								        id: "1",
+								        title: "首页",
+								        url: "http://www.baidu.com",
+								        close: false
+								    },{
+								        id: "2",
+								        title: "百度一下",
+								        url: "http://www.baidu.com",
+								        close: false
+								    }]
+								});
+
+
+
+
+
+
+ + + + + + diff --git a/view/document/tab.html b/view/document/tab.html new file mode 100644 index 0000000..ed1126f --- /dev/null +++ b/view/document/tab.html @@ -0,0 +1,151 @@ + + + + + layarea + + + +
+
+
+
开发环境
+
+ Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换 +
+
+
+
+
+
+

显示代码

+
+ 
+							    
+							    并
+							    
+							    并
+							    
+
+
+
+
+
+
+
+
+ 常用操作 +
+
+ + + +
+
+
+
+
+
+ 基本使用 +
+
+ +
+
+
+
+
+
+
+

显示代码

+
+ 
+								
+								tab.render({
+								    elem: 'content',
+								    roll: false,
+								    tool: false,
+								    width: '100%',
+								    height: '480px',
+								    index: 0,
+								    tabMax: 30,
+								    closeEvent: function(id) {
+										
+								        // do something
+								    },
+								    data: [{
+								        id: "1",
+								        title: "首页",
+								        url: "http://www.baidu.com",
+								        close: false
+								    },{
+								        id: "2",
+								        title: "百度一下",
+								        url: "http://www.baidu.com",
+								        close: false
+								    }]
+								});
+								
+								
+
+
+
+
+
+
+ + + + + + diff --git a/view/document/tabContent.html b/view/document/tabContent.html new file mode 100644 index 0000000..6b9ec0e --- /dev/null +++ b/view/document/tabContent.html @@ -0,0 +1,41 @@ + + + + + + + + +
+
+
+ + +
+
+ + + + +