我安装了这个特殊的js插件，可以让你模拟一些支持拖动，关闭和打开标签的chrome like标签界面。 https://rawgit.com/adamjimenez/ui.tabs.overflowResize/master/demo/index.html
不幸的是，我在安装后遇到了一些问题，它一直打印在控制台上。
Cannot read property 'ui' of undefined
事实证明，这是因为我在jquery.UI加载到Dom之前加载了tab ui脚本，所以我将所有的tab ui脚本粘贴到jquery ui之后加载的那个脚本。
因此，最后标签的拖动功能起作用。但仍缺少正确的开启和关闭功能。（尝试点击实时网站标签下方的按钮）
任何人都可以请看看这个特定的脚本，看看是否有我可以手动修改脚本在我的网站上工作？
这是实时网站：http://lifeto.cafe24.com/xe/
答案 0 :(得分：0)
将此添加为一个模糊的答案，与添加标签的评论相关。它与原始问题并不完全相关。
正如我所提到的，第{115}行ui.tabs.overflowResize中存在错误：
var id = $( "<div>"+content+"</div>" ).appendTo( this.element.children(':last-child') ).uniqueId().attr('id');
这会将content追加到错误的div。它将.appendTo()最后div，它应该使用.after()，以便在最后div之后添加function addTab(obj, t, c) {
// Fixes .tabs("add") bug
// obj = Target Object
// t = Tab Title
// c = Tab Content
$(obj).tabs("add", t, c);
var h = $(".addTab").prev().find("a").attr("href");
$(h).clone().appendTo(obj);
$(h).remove();
}
。您也可以在Demo中看到这一点。
我创建了一个小函数来帮助解决这个问题：
div这会抓取function addTab(obj, t, c) {
// Fixes .tabs("add") bug
// obj = Target Object
// t = Tab Title
// c = Tab Content
$(obj).tabs("add", t, c);
var h = $(".addTab").prev().find("a").attr("href");
$(h).clone().appendTo(obj);
$(h).remove();
}
$(function() {
$(".tabpanel").tabs({
closable: true,
addTab: true
}).tabs('overflowResize')
.find(".ui-tabs-nav").sortable({
distance: 10
});
$(".addTab a").on("click", function(e) {
$("#dialog").dialog("open");
return false;
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab($(".tabpanel"), $("#tab_title").val(), $("#tab_content").val());
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#dialog form")[0].reset();
}
});
$("#dialog form").submit(function(e) {
addTab($(".tabpanel"), $("#tab_title").val(), $("#tab_content").val());
$("#dialog").dialog("close");
e.preventDefault();
});
});
并拯救它，将其附加到目标对象。您可以在此处查看完整的工作示例：https://jsfiddle.net/Twisty/ryhzwkph/
JQUERY UI
div其中大部分改编自https://jqueryui.com/tabs/#manipulation
修改
从演示示例中，我错过了一个小符号。这没有记录，但作者建议添加额外的<div class="tabpanel">
<ul>
<li><a href="#tabs-1" class="closable">Nunc tincidunt</a></li>
</ul>
<div class="ui-layout-content">
<div id="tabs-1">
</div>
</div>
</div>
，如下所示：
def decreaseRed(pict):
width=getWidth(pict)
height=getHeight(pict)
canvas=makeEmptyPicture(width,height)
for x in range(0, width):
for y in range(0, height/2):
pixel = getPixel(pict,x,y)
newRed = getRed(pixel)*0.5
newGreen = getGreen(pixel)
newBlue = getBlue(pixel)
newColor = makeColor(newRed,newGreen,newBlue)
pixelCanvas = getPixel(canvas,x,y)
setColor(pixelCanvas,newColor)
show(pict)
show(canvas)
file=getMediaPath("testa.jpg")
pict=makePicture(file)
decreaseRed(pict)
您可以在此处查看此内容：https://jsfiddle.net/Twisty/ryhzwkph/10/