![](/img/trans.png)
[英]Is it possible to create dynamic tabs in Kendo Angular Tabstrip?
[英]Dynamically Adding HTML files as tabs to Kendo TabStrip
我正在嘗試創建一個基本上是Kendo標簽的網絡部分。 它有一個簡單的ul,並使用javascript代碼將外部html文件鏈接到每個相對的li。 它到目前為止工作正常。 但現在我希望能夠調用函數來添加或刪除我選擇的任何文件到我的tabtrip,到目前為止它不起作用。
我已經搜索並找到了一些功能,但這個功能更接近我的想法。 當我使用添加按鈕時,制作了標簽,但是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));
}
它應該獲取一個名稱和一個地址,並將該選項卡添加到tabstrip或根據按鈕將其刪除。 如果有人可以提供幫助,我真的很感激。
<----------------------------快速更新------------------ ----------->
我試圖刪除按鈕,只需在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.select',但我真的不明白出了什么問題。
所以我設法自己修復它,以為它可能會幫助別人。 問題是,在追加后我有多個列表項,其中“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();
希望能幫助到你 !
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.