[英]Dynamically Adding HTML files as tabs to Kendo TabStrip
I'm trying to make a web-part which is basically a Kendo tabstrip . 我正在尝试创建一个基本上是Kendo标签的网络部分。 it has a simple ul on it's own and linking external html files to each relative li using a javascript code.
它有一个简单的ul,并使用javascript代码将外部html文件链接到每个相对的li。 it works fine so far.
它到目前为止工作正常。 but now I want to be able to call functions to add or remove whatever file I selected to my tabstrip and so far it's not working .
但现在我希望能够调用函数来添加或删除我选择的任何文件到我的tabtrip,到目前为止它不起作用。
I've searched and found some functions to the job but this one is closer to what I had in mind . 我已经搜索并找到了一些功能,但这个功能更接近我的想法。 when I use the add button the tabstrip is made but the contecturl link doesn't work and it's just an empty tab.
当我使用添加按钮时,制作了标签,但是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));
}
It should get a name and an Address and add that tab to the tabstrip or remove it based on the button. 它应该获取一个名称和一个地址,并将该选项卡添加到tabstrip或根据按钮将其删除。 I'd really appreciate it if someone could help.
如果有人可以提供帮助,我真的很感激。
<---------------------------- A quick update -----------------------------> <----------------------------快速更新------------------ ----------->
I tried to remove the buttons and simply add a single parameter to the addTab function to add each page that the is called . 我试图删除按钮,只需在addTab函数中添加一个参数即可添加被调用的每个页面。 something like this :
这样的事情:
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));
}
and call them like this : 并称他们为:
$(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");
}
right now the problem is when I try to add more than one tab , one after the other(like the code), tabstrip sets both list items as active and it breaks the tabstrip. 现在问题是,当我尝试一个接一个地添加多个选项卡(如代码)时,tabstrip将两个列表项设置为活动状态,并打破了标签。 I think it's probably because of the 'tabstrip.select' , but I don't really understand what went wrong .
我想这可能是因为'tabstrip.select',但我真的不明白出了什么问题。
So I managed to fix it on my own , thought it may help someone else later . 所以我设法自己修复它,以为它可能会帮助别人。 the problem was that after appending I had multiple list items with "k-state-active" class that broke my tabstrip .
问题是,在追加后我有多个列表项,其中“k-state-active”类打破了我的标签。 I used jquery to manually remove the active classes whereever they were and add it up to the first li .
我使用jquery手动删除它们所在的活动类,并将其添加到第一个li。 also I used to create a new variable each time I called addTab() instead of working on the same variable which made the whole thing alot slower and didn't have animation and select.
我每次调用addTab()时都会创建一个新变量,而不是处理相同的变量,这使得整个事情变得更慢并且没有动画和选择。 so I made 'ts' public to be used in all the functions.
所以我把'ts'公开用于所有功能。 so that final code is like this :
所以最终的代码是这样的:
<---------------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();
Hope it helps ! 希望能帮助到你 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.