使用iframe动态添加/删除Tab控件 [英] Dynamically add/remove Tab control with iframe
本文介绍了使用iframe动态添加/删除Tab控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嘿朋友，
我正在做一个项目，我想创建动态添加和删除标签。我的代码
< span class =code-keyword>< html >
< head >
< meta name = viewport content = width =设备宽度 / >
< title > < / title >
< style >
iframe {
width：200px;
身高：200px;
}
< / style >
< script src = http://code.jquery.com/jquery-latest.min.js type = text / javascript > < / script >
< script < span class =code-attribute> src = http：// code.jquery.com/ui/1.9.1/jquery-ui.js\" type = text / javascript > < / script >
< script 类型 = text / javascript >
var tabTitle = $（＃tab_title），
tabContent = $（＃tab_content），
tabTemplate =< li > < a href =' ＃{href}' > ＃{label} < / a > < span class =' ui-icon ui-icon-close' 角色 =' 演示文稿' > 删除标签< / span > < / li > ，
tabCounter = 5;
var tabs = $（＃add_tab）。tabs（）;
$（＃add_tab）。click（function（）{
addTab（）;
}）;
//实际的addTab函数：使用上面表格中的输入添加新标签
function addTab（）{
var label = tabTitle.val（）|| Tab+ tabCounter，
id =tabs-+ tabCounter，
li = $（tabTemplate.replace（/＃\ {href \} / g，＃+ id）。 replace（/＃\ {label \} / g，label）），
tabContentHtml = tabContent.val（）|| Tab+ tabCounter +content。，
index = 1;
tabs.find（。ui-tabs-nav li：nth-last-child（+ index +））。after（li）;
tabs.append（< div id =' + id + ' > < iframe > < p < span class =code-keyword>> + tabContentHtml +< / p > < / iframe > < / div > ）;
tabs.tabs（刷新）;
tabCounter ++;
}
//关闭图标：删除点击
tabs.delegate（span.ui-icon-close，click，function（）{
var panelId = $（this）.closest（li）。remove（）。attr（aria-controls）;
$（＃+ panelId）.remove（）;
tabs.tabs（刷新）;
}）;
tabs.bind（keyup，function（event）{
if（event.altKey&& event.keyCode === $ .ui.keyCode.BACKSPACE）{
var panelId = tabs.find（。ui-tabs-active）。remove（）。attr（aria-controls）;
$（＃+ panelId）.remove（）;
tabs.tabs（刷新）;
}
}）;
< / script >
< / head >
< body 样式 = >
< 按钮 id = < span class =code-keyword> add_tab > 添加标签< < span class =code-leadattribute> / button >
< div id = 标签 >
< ul >
< span class =code-keyword>< li > < a href = ＃tabs-1 > 强加< / a > < span class = ui 角色 = < span class =code-keyword> presentation > < / span >
< < span class =code-leadattribute> / li >
< li > < a href = ＃tabs-2 > IMP ACS < / a > < span class =code-keyword>< span class = ui 角色 = presentation > < / span >
< / li >
< / ul >
< div id = tabs-1 >
< iframe src = > < / iframe >
< / div >
< div id = tabs-2 >
< iframe src = > < / iframe >
< / div >
< / div >
< / body >
< / html >
所以请发送解决方案...
解决方案
< blockquote>（＃tab_title），
tabContent =
（＃tab_content），
tabTemplate = < li > < a href =' ＃{href}' > ＃{ label} < / a > < span 类 =' ui-icon ui-icon-close' 角色 =' 演示文稿 > 删除标签< / span > < / li > ，
tabCounter = 5;
var tabs =
（＃add_tab）。tabs（）;
Hey friends ,
I am doing one project in that i want to create dynamic add and remove tab.My code
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
iframe {
width: 200px;
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 5;
var tabs = $("#add_tab").tabs();
$("#add_tab").click(function () {
addTab();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.",
index = 1;
tabs.find(".ui-tabs-nav li:nth-last-child(" + index + ")").after(li);
tabs.append("<div id='" + id + "'><iframe> <p>" + tabContentHtml + "</p></iframe> </div>");
tabs.tabs("refresh");
tabCounter++;
}
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
</script>
</head>
<body style="">
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Impose</a> <span class="ui" role="presentation"></span>
</li>
<li><a href="#tabs-2">IMPACS</a> <span class="ui" role="presentation"></span>
</li>
</ul>
<div id="tabs-1">
<iframe src=""></iframe>
</div>
<div id="tabs-2">
<iframe src=""></iframe>
</div>
</div>
</body>
</html>
so please send solution...
解决方案
("#tab_title"), tabContent =
("#tab_content"), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", tabCounter = 5; var tabs =
("#add_tab").tabs();
这篇关于使用iframe动态添加/删除Tab控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
