jQuery UI - Rename Sortable Tabs on Double Click -


i using jquery ui tabs sortable, how can rename on double click? please 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" );         }     }); }); 

i got solution this.. guruprasad...

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

Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -