我正在使用可排序的jQuery UI标签,双击如何重命名？请帮我出去
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" );
}
});
});
解决方法
我得到了解决方案.感谢Guruprasad …
在这里你走我正在谈论的…
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() {
});
