我有一个小问题,希望你能帮助我。我正在使用materializecss框架中名为“tabs”(tabs)的元素,但我使用javascript配置它以允许用户执行某些操作,例如:1。添加新选项卡。 2.编辑任何选项卡的名称(现有或添加的选项卡)。
我将在下面显示我已有的代码:
$("#Tab1").dblclick(function () {
var texto = $("#Tab1").text();
$("#Tab1").remove();
$("#inputTab1").attr("type", "text");
$("#inputTab1").val(texto);
$("#inputTab1").focus();
});
$('#inputTab1').on('keyup', function(e) {
if(e.keyCode === 13) {
var input1 = $(this).val();
$("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 + '</a>');
$("#inputTab1").val("");
$("#inputTab1").attr("type", "hidden");
$("#Tab1").dblclick(function () {
var texto = $("#Tab1").text();
$("#Tab1").remove();
$("#inputTab1").attr("type", "text");
$("#inputTab1").val(texto);
$("#inputTab1").focus();
});
}
});
function addNew(){
$(".pestanas").each(function(){
$(this).removeClass('active');
});
$(".contenidos").each(function(){
$(this).removeClass('active').css('display','none');
})
var id = Math.floor((Math.random() * 10000) + 1);
var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab'+id+'" href="#test'+id+'">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>';
var conte = '<div id="test'+id+'" class="col s12 contenidos active">Text New Tab '+id+'</div>';
$("#tabControl").before(pesta);
$("#tabs").after(conte);
$('ul.tabs').tabs();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
<div class="col s12" id="tabs">
<ul class="tabs">
<li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li>
<li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
<li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li>
</ul>
</div>
<div id="test1" class="col s12">
text first tab</div>
<div id="test2" class="col s12">text second tab</div>
</div>
上面的代码执行以下操作:1。单击“+”按钮添加新选项卡。 2.双击当前名称时,可以编辑第一个标签的名称...
好吧,我想要的是,当用户添加新选项卡时,他也可以编辑新选项卡的名称,不仅是第一个选项卡,还有用户添加的所有选项卡...我已经尝试过这样做,直到现在我没有取得好成绩,因为它与第一个标签产生冲突。我能用这种方式做什么?您可以提供给我的任何脚本? ...这个想法是,添加的每个新选项卡也可以编辑,只需单击选项卡(例如:第一个选项卡)。如果你可以帮助我,我将非常感激,这些日子让我发疯了。
基本上,您需要提取逻辑以将事件KeyUp和dblCkick应用于新选项卡。
var applyDblEvent = function (identifier) {
$("#Tab" + identifier).dblclick(function () {
var $Tab = $("#Tab" + identifier);
var texto = $Tab.text();
$Tab.remove();
var $inputTab = $("#inputTab" + identifier);
$inputTab.attr("type", "text");
$inputTab.val(texto);
$inputTab.focus();
});
};
var applyKeyUpEvent = function (identifier) {
$('#inputTab' + identifier).on('keyup', function (e) {
if (e.keyCode === 13) {
var input = $(this).val();
var $inputTab = $("#inputTab" + identifier);
$inputTab.before('<a class="active" id="Tab' + identifier + '" href="#test' + identifier + '">' + input + '</a>');
$inputTab.val("");
$inputTab.attr("type", "hidden");
applyDblEvent(identifier);
}
});
};
$(document).ready(function () {
applyDblEvent(1);
applyKeyUpEvent(1);
});
function addNew() {
$(".pestanas").each(function () {
$(this).removeClass('active');
});
$(".contenidos").each(function () {
$(this).removeClass('active').css('display', 'none');
});
var id = Math.floor((Math.random() * 10000) + 1);
var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab' + id + '" href="#test' + id + '">New Tab</a><input style="text-align: center; color: pink;" type="hidden" name="tab' + id + '" id="inputTab' + id + '" value="New Tab" /></li>';
var conte = '<div id="test' + id + '" class="col s12 contenidos active">Text New Tab ' + id + '</div>';
$("#tabControl").before(pesta);
$("#tabs").after(conte);
$('ul.tabs').tabs();
setTimeout(function() {
$('ul.tabs').tabs('select_tab', 'test' + id);
}, 100);
applyDblEvent(id);
applyKeyUpEvent(id);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
<div class="col s12" id="tabs">
<ul class="tabs">
<li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li>
<li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
<li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li>
</ul>
</div>
<div id="test1" class="col s12">
text first tab</div>
<div id="test2" class="col s12">text second tab</div>
</div>
希望这可以帮助!