jQuery UI选项卡-在DoubleClick上重命名此选项卡
jQuery UI选项卡-在DoubleClick上重命名此选项卡
提问于 2015-05-15 03:52:00
我正在使用jQuery用户界面表..。
双击选项卡名称文本以重命名
例:在双击"Home 1“选项卡时，可编辑文本字段应该是可见的，里面的标签写着(这个标签名) "Home 1”，并且可以更改为其他名称，即"Custom “。我一点击Enter按钮，这个标签名就应该更改为"Custom “.
小提琴
<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" );
}
});
});，这就是我所说的
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-15 04:26:31
好的，这是一个解决办法！！
演示
<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;
}
a
{
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());
});更新
这里的演示
适用于enter keypress、blur和arrowkeys，其中arrowkeys在编辑模式下按下，用来强迫文本框散焦！以下是总的解决办法：
$('.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());
}
}
});更新2
您需要检查dblclick事件以及输入的blur和keydown，如下所示：
演示
$('.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();
}
});Stack Overflow用户
发布于 2015-05-15 04:28:45
http://jsfiddle.net/ckpwdojt/5/
这条路。由于某种原因，Enter键在jsfiddle中不起作用。所以暂时把它放到Q。
$("a").dblclick(function() {
$(this).hide();
$(this).next().show();
});
$('.hide').keypress(function(e){
if(e.keyCode==113) { //for some reason enter doesn't work. keyCode ==13
var input = $(this);
input.hide();
$(this).prev().show().text(input.val());
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30251236
复制相关文章
相似问题
腾讯云开发者
