Question

我有一个小问题，希望你能帮助我。我正在使用名为＆＃34; tabs＆＃34; materializecss框架的（制表符），但是我用javascript配置它以允许用户做某些事情，例如： 1.添加新标签。 2.编辑任何选项卡的名称（现有或添加的选项卡）。

我将在下面显示我已经拥有的代码：

＆＃13;

$("#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();
}

＆＃13;

<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>

＆＃13;

之前的代码执行以下操作： 1.单击＆＃34; +＆＃34;添加新选项卡。按钮。 2.双击当前名称时，它允许编辑第一个标签的名称......

嗯，我想要的是，当用户添加新标签时，他也可以编辑新标签的名称，不仅是第一个标签，还有用户添加的所有标签...我试过这样做直到现在我还没有取得好成绩，因为它会与第一个标签产生冲突。我能用这种方式做什么？您可以提供给我的任何脚本？ ...这个想法是，添加的每个新选项卡也可以编辑，只需单击选项卡（例如：第一个选项卡）。如果你能帮助我，我将非常感激，这些日子让我发疯了。

Answer 1

基本上，您需要提取逻辑，以便为新标签应用事件KeyUp和dblCkick。

＆＃13;

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);
    }

＆＃13;

<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>

＆＃13;

希望这有帮助！

实现标签！如何使用Jquery重命名生成的标签？

1 个答案: