jQuery UI Tabs - On DoubleClick Rename this Tab -
i using jquery ui tabs...
double click on tab name text rename
eg: on double click of "home 1" tab, editable text field should visible label inside says(this tab name) "home 1" , can changed other name i.e. "custom tab". hit enter button, tab name should changed "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 talking about
ok here workaround!!
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; } { 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
works enter keypress
, blur
, arrowkeys
wherein arrowkeys
when pressed during edit mode, used force textbox loose focus!! below 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 check dblclick
event along blur
, keydown
input below:
$('.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(); } });
Comments
Post a Comment