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

Question

我正在使用 jQuery UI 选项卡...

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

例如:双击“Home 1”选项卡时，可编辑文本字段应该可见，其中的标签显示(此选项卡名称)“Home 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" );
        }
    });
});

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

适用于输入按键、模糊和箭头键，其中箭头键在编辑模式下按下时，用于强制文本框失去焦点!以下是总体修复:

$('.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();
     }
});