jQuery UI 选项卡 - 在双击时重命名此选项卡

Question

我正在使用 jQuery UI 标签...

双击选项卡名称文本进行重命名

例如：双击“Home 1”选项卡，可编辑文本字段应该可见，其中的标签说（此选项卡名称) "Home 1" 并且可以更改为其他名称，即 "Custom Tab"。一旦我点击 Enter 按钮，这个选项卡名称应该更改为“Custom Tab”...

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

This is what I am talking about

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/

这是方法。由于某种原因，Enter 键在 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 选项卡 - 在双击时重命名此选项卡

jQuery UI Tabs - On DoubleClick Rename this Tab

jquery

jquery-ui

jquery-tabs

双击选项卡名称文本进行重命名

FIDDLE