🔒 修复 tag 输入框问题 与 tab.js 示例
就眠仪式
parent
abf4f9297d
commit
95c9c3ced1
|
|
@ -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": "其他组件",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.input-new-tag input {
|
||||
height: 100%;
|
||||
height: 100%!important;
|
||||
border: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,28 +84,40 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var title = '';
|
||||
|
||||
if (opt.close) {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
|
||||
} else {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
|
||||
}
|
||||
|
||||
element.tabAdd(this.option.elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
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);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layarea</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">
|
||||
Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
基本使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
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
|
||||
}]
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form',
|
||||
'element', 'tab', 'code'
|
||||
], function() {
|
||||
var layer = layui.layer,
|
||||
tab = layui.tab,
|
||||
form = layui.form;
|
||||
|
||||
layui.code();
|
||||
|
||||
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: "../system/space.html",
|
||||
close: false
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layarea</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">
|
||||
Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
常用操作
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
|
||||
<button class="pear-btn pear-btn-danger del">删除当前</button>
|
||||
<button class="pear-btn pear-btn-warming enable">高级操作</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
基本使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
|
||||
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
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form',
|
||||
'element', 'tab', 'code','jquery'
|
||||
], function() {
|
||||
var layer = layui.layer,
|
||||
tab = layui.tab,
|
||||
$ = layui.jquery,
|
||||
form = layui.form;
|
||||
|
||||
layui.code();
|
||||
|
||||
tab.render({
|
||||
elem: 'content',
|
||||
roll: false,
|
||||
tool: false,
|
||||
width: '100%',
|
||||
height: '485px',
|
||||
index: 0,
|
||||
tabMax: 30,
|
||||
closeEvent: function(id) {
|
||||
layer.msg("关闭回调")
|
||||
},
|
||||
data: [{
|
||||
id: "1",
|
||||
title: "百度一下",
|
||||
url: "../system/space.html",
|
||||
close: false
|
||||
}]
|
||||
});
|
||||
|
||||
$(".add").click(function(){
|
||||
|
||||
// ADD 添加方法
|
||||
tab.addTabOnlyByElem('content',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
|
||||
})
|
||||
|
||||
$(".enable").click(function(){
|
||||
|
||||
// ADD 添加方法
|
||||
tab.addTabOnlyByElem('content',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
|
||||
})
|
||||
|
||||
$(".del").click(function(){
|
||||
|
||||
tab.delCurrentTabByElem('content',function(id){
|
||||
layer.msg("已删除 '"+id+"' 标签页")
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
|
||||
<button class="pear-btn pear-btn del">关闭 当前</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['tab','jquery','layer'],function(){
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
tab = layui.tab;
|
||||
|
||||
$(".add").click(function(){
|
||||
|
||||
// ADD 添加方法
|
||||
parent.layui.tab.addTabOnlyByElem('content',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
|
||||
})
|
||||
|
||||
$(".del").click(function(){
|
||||
|
||||
parent.layui.tab.delCurrentTabByElem('content',function(id){
|
||||
layer.msg("已删除 '"+id+"' 标签页")
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue