我正在尝试制作一个基本上是Kendo标签的web部件。它本身具有一个简单的ul,并使用javascript代码将外部html文件链接到每个相对的li。到目前为止,一切正常。 但是现在我希望能够调用函数来添加或删除我选择到Tabstrip的任何文件,到目前为止,该文件不起作用。
我已经搜索并找到了一些适合这项工作的功能,但这与我的初衷更加接近。 当我使用添加按钮时,会创建Tabstrip,但是contecturl链接不起作用,它只是一个空选项卡。
<------------------------ web-part ------------------------>
<div class="row">
<input type='text' id='tabname' name='tabname'>
<input type='text' id='tabLink' name='tabLink'>
<input type="button" value="Add Tab" onclick="AddTab()" />
<input type="button" value="Remove Tab" onclick="closeTab()" />
</div>
<div id="tabstrip">
<ul id="tabStripUL">
<li class="k-state-active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<------------------------ Javascript ------------------------>
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
'Page1.html',
'Page2.html',
'Page3.html',
]
}).data('kendoTabStrip');
}
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function AddTab() {
var title = jQuery("#tabname").val();
var Address = jQuery("#tabLink").val();
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({
text: title,
contentUrl: Address
});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function closeTab() {
var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
tabStrip.remove(tabStrip.select());
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
它应该获得一个名称和一个地址,并将该选项卡添加到选项卡中,或者根据按钮将其删除。 如果有人可以提供帮助,我将非常感谢。
<----------------------------快速更新--------------- -------------->
我试图删除按钮,并仅向addTab函数添加一个参数以添加调用的每个页面。像这样的东西:
function addTab(tabName) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
if (tabName == "name1") {
tabStrip.append({
text: "title1",
contentUrl: 'page1.html',
});
}
else if (tabName == "name2") {
tabStrip.append({
text: "title2",
contentUrl: 'page2.html',
});
}
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
并这样称呼他们:
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("name1");
addTab("name2");
}
现在的问题是,当我尝试添加多个标签时,一个接一个地添加(如代码),tabstrip将两个列表项都设置为活动状态,并且中断了tabstrip。我认为这可能是因为“ tabstrip.select”造成的,但是我不太了解发生了什么问题。
答案 0 :(得分:0)
所以我设法自己修复了它,以为以后可以帮助其他人。 问题是,追加后,我有多个带有“ k-state-active”类的列表项,这些选项卡破坏了我的选项卡。我使用jquery手动删除活动类,无论它们在哪里,并将其添加到第一个li中。 同样,我每次调用addTab()时都会创建一个新变量,而不是使用同一个变量,这会使整个过程变慢,并且没有动画和选择。因此我公开了“ ts”以在所有功能中使用。 所以最终代码是这样的:
<---------------HTML------------------>
<div id="tabstrip" style="width: 100%">
<ul id="tabStripUL">
</ul>
</div>
<----------------Script--------------->
var ts;
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
ts = $("#tabstrip").kendoTabStrip({
animation: { open: { duration: 150, effects:"fadeIn" }
},
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("tab1");
addTab("tab2");
}
//ts couldn't work on selecttab because of call limited size (don't really know what it is)
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function addTab(tabSelect) {
if (tabSelect == "tab1") {
ts.append({
text: "title1",
contentUrl: 'page1.html',
});
//sets an id to each tab
ts.tabGroup.children().last().attr("id", "tab1");
}
else if (tabSelect == "tab2") {
ts.append({
text: "title2",
contentUrl: 'page2',
});
ts.tabGroup.children().last().attr("id", "tab2");
}
ts.select((ts.tabGroup.children("li").length - 1));
$("#tabstrip li").find(".k-state-active").removeClass("k-state-active k-tab-on-top");
$("#tabstrip li:first").addClass("k-state-active k-tab-on-top");
}
// ClearTS: clears all the tabs and contents
function clearTS() {
$("#tabstrip li").remove();
$("#tabstrip .k-content").remove();
希望有帮助!