双击选项卡名称文本以重命名

例如：在双击“首页1 ”标签时，可编辑文本字段应该可见，标签内显示（此标签名称）“首页1 ”，可以更改为其他名称，即“自定义标签”。只要我按 Enter 按钮，此标签名称就应更改为“自定义标签”....

FIDDLE

HTML

<div id="my-tabs">
    <ul>
        <li><a href="#Home-1">Home 1</a></li>
        <li><a href="#Home-2">Home 2</a></li>
        <li><a href="#Home-3">Home 3</a></li>
    </ul>
    <div id="Home-1">
        <p>Home Content 1</p>
    </div>
    <div id="Home-2">
        <p>Home Content 2</p>
    </div>
    <div id="Home-3">
        <p>Home Content 3</p>
    </div>
</div>

的jQuery

$(function() {
    var tabs = $( "#my-tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs( "refresh" );
        }
    });
});

这就是我所说的

Answer 1

好的这是一个解决方法!!

<强> DEMO

<强> HTML

 <li class="tab"><input class="txt" type="text"/><a href="#Home-1">Home 1</a></li>
 <li class="tab"><input class="txt" type="text"/><a href="#Home-2">Home 2</a></li>
 <li class="tab"><input class="txt" type="text"/><a href="#Home-3">Home 3</a></li>

<强> CSS

input[type=text]
{
    display:none;
    width:120px;
}
a
{
    display:block;
}

<强> JS

$('.tab').on('dblclick',function(){
    $(this).find('input').toggle().val($(this).find('a').html()).focus();
    $(this).find('a').toggle();
});

$('.tab').on('blur','input',function(){
    $(this).toggle();
    $(this).siblings('a').toggle().html($(this).val());
});

<强>更新

<强> DEMO HERE

适用于enter keypress，blur和arrowkeys，其中arrowkeys在编辑模式下按下，用于强制文本框失去焦点！以下是总修复：

$('.tab').on('keydown blur','input',function(e){
       if(e.type=="keydown")
       {
           if(e.which==13)
           {
               $(this).toggle();
               $(this).siblings('a').toggle().html($(this).val());
           }
           if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
           {
               e.stopPropagation();
           }
       }
       else
       {
            if($(this).css('display')=="inline-block")
            {
                $(this).toggle();
                $(this).siblings('a').toggle().html($(this).val());
            }
       }
});

更新2

您需要检查dblclick事件以及blur和keydown作为输入，如下所示：

<强> DEMO

$('.tab').on('keydown blur dblclick','input',function(e){
     if(e.type=="keydown")
     {
         if(e.which==13)
         {
            $(this).toggle();
            $(this).siblings('a').toggle().html($(this).val());
         }
         if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
         {
            e.stopPropagation();
         }
     }
     else if(e.type=="focusout")
     {
         if($(this).css('display')=="inline-block")
         {
             $(this).toggle();
             $(this).siblings('a').toggle().html($(this).val());
         }
     }
     else
     {
         e.stopPropagation();
     }
});

Answer 2

http://jsfiddle.net/ckpwdojt/5/

这是方法。由于某种原因，输入键不会在jsfiddle中工作。所以暂时把它放到Q.

    $("a").dblclick(function() {
        $(this).hide();
        $(this).next().show();
    });
    $('.hide').keypress(function(e){
        if(e.keyCode==113) { //for some reason enter doesn't work. keyCode ==13
            var input = $(this); 
            input.hide();
            $(this).prev().show().text(input.val());
        }    
    });

jQuery UI选项卡 - 在DoubleClick上重命名此选项卡

双击选项卡名称文本以重命名

FIDDLE

2 个答案: