jquery-uijquery-tabs

jQuery UI - Rename Sortable Tabs on Double Click


I am using jQuery UI Tabs with Sortable, how can I rename on Double Click? Please help me out!


FIDDLE


HTML

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

jQuery

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

Solution

  • I got the solution for this.. Thanks to Guruprasad...

    Here you go what I am talking about...


    Working FIDDLE


    HTML

    <div id="my-tabs">
        <ul>
            <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>
        </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" );
                  },
                  select: function(event, ui) {
                      alert("PRESSED TAB!");
                  }
             });
             $('.tab').on('dblclick',function(){
                 $(this).find('input').toggle().val($(this).find('a').html()).focus();
                 $(this).find('a').toggle();
             });
    
            $('.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.keyCode == 32)
                   {
                       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();
                }
            });
        });
        $(document).ready(function() {
    
        });