jqueryjquery-uijquery-tabs

jQuery UI Tabs - On DoubleClick Rename this Tab

I am using jQuery UI Tabs...

Double click on tab name text to rename

Eg: On Double Click of "Home 1" Tab, editable text field should be visible with the label inside says(this tab name) "Home 1" and can be changed to other name i.e. "Custom Tab". As soon as I hit Enter button, this tab name should be changed to "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 enter image description here

Solution

  • Ok Here is a workaround!!

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

    UPDATE

    DEMO HERE

    Works for enter keypress, blur and arrowkeys wherein arrowkeys when pressed during edit mode, used to force textbox to loose focus!! below is the total fix:

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

    UPDATE 2

    You need to check for dblclick event along with blur and keydown for the input as below:

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