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
Post a Comment