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

【问题标题】：jQuery UI Tabs - On DoubleClick Rename this TabjQuery UI 选项卡 - 在 DoubleClick 上重命名此选项卡
【发布时间】：2015-05-15 03:52:00
【问题描述】：

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

双击标签名称文本进行重命名

例如：双击“Home 1”选项卡时，可编辑文本字段应该可见，里面的标签说（此选项卡名称) “Home 1”，并且可以更改为其他名称，即“Custom Tab”。一旦我点击 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" );
        }
    });
});

这就是我要说的

【问题讨论】：

标签： jquery jquery-ui jquery-tabs

【解决方案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;
}

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

【讨论】：

哇...@Guruprasad ....最后一个例子就像一个冠军......谢谢你的时间......我已经“升级”和“接受”你的答案.. . 继续努力...
嘿@Guruprasad...抱歉...仍然有一些小问题...即使我双击文本字段，它也会关闭...相反，如果我双击在 Textfield 上，它应该选择 textfield 内的所有文本...感谢您的工作
@Reddy.. 查看最新演示！ :)
是的...@Guruprasad Rao...这正是我想要的...谢谢 TON
任何时候...... :) 再次快乐编码...... :D

【解决方案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());
        }    
    });

【讨论】：