を使用して（TabStripコントロールに）新しいタブを追加し、選択する方法：剣道UI - 私は私の剣道UI TabStripコントロールで新しいタブを開く機能を作成したJavaScriptの
function AddTab(targetUrl, title) {
$("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl });
}
これが追加されますタブを最後まで選択しますが、選択しません。アクティブなタブにするにはどうしたらいいですか？タブを作成するときにIDを設定してから、select（..）関数を呼び出す必要がありますか、それとも1行で入力できますか？
リンクの負荷を自動的に生成する必要があります。それぞれ異なるタイトルとtargetUrlが使用されます。
それを選択するためのドキュメントKendo Ui tabstrip
var tabStrip = $("#tabStrip").data("kendoTabStrip");
tabStrip.insertAfter(
{ text: "New Tab" },
tabstrip.tabGroup.children("li:last")
);
からこの
<div id="tabstrip">
<ul>
<li class="k-state-active">First Tab</li>
<li>Second Tab</li>
</ul>
<div>
First text
</div>
<div>
Second text
</div>
</div>
<input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" />
<script>
function AddTab(targetUrl, title) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" });
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>
を試してみてください参考link
このようにしてください。 //
$(document).ready(function(){
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(yourIndexoftheTab);
});
こんにちはRavi、insertAfter（）は私にとってはうまくいきませんでした。どうしてか分かりません。ありがとう、ありがとう。 – pfeds
現在のタブの後にタブを追加するには、これを行う必要がありました：var currentIndex = tabStrip.select（）。index（）; tabStrip.tabGroup.children（）。eq（currentIndex））; tabStrip.tabGroup.children（）。 –
あなたはkendoui..i希望を使用して動的タブを追加および削除することができますこのコードは何かを助ける
<html>
<head>
<title> testing remote data </title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<input type='text' id='tabname' name='tabname'>
<input type="button" value="Add Tab" onclick="AddTab()" />
<div id="tabstrip">
</div>
<script>
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: function(element){selecttab(element)}
});
});
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(targetUrl) {
var title = jQuery("#tabname").val();
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({ text: title,
content: "<div class='showtabcontent dhtmlgoodies_aTab' style='height: auto; display: block;' id='tabViewsubtabname'><div style='float:right;'><input type='button' value='X' onClick='closeTab($(this).closest(\"li\"));'></div><br><label class='evtgrouplables'>Description</label><br><textarea name='dynamic_other_content[]' id='dynamic_other_content' class='textareaeditor'></textarea><input type='hidden' name='dynamic_other_title[]' value=''/></div>"
});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function closeTab(vari){
var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
tabStrip.remove(tabStrip.select());
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>
コードが新しいタブを追加し、選択する：ここで
var tabs = $('#tabs').data('kendoTabStrip');
var tabNum = tabs.items().length;
var closeButton =
"<span unselectable='on' class='k-icon k-delete'>delete</span>";
tabs.append({
encoded: false, //allow HTML
text: team.name + ' ' + closeButton,
contentUrl: 'teamschedule.html'
});
// make new tab the active tab
tabs.select(tabNum);
var tab = $(tabs.items()[tabNum]);
//attach delete handler to the delete icon
tab.on('click','.k-delete', tab, $scope.removeTab);
は、（削除タブを選択した場合）のタブを削除し、以前のいずれかを選択するためのコードです：
$scope.removeTab = function(e) {
var tabs = $('#tabs').data('kendoTabStrip');
if (e.data.hasClass('k-state-active')) {
//select previous tab if the active tab is removed
tabs.select(e.data.prev());
}
tabs.remove(e.data);
}
私は角度を使用していますので、$ scopeを使用しています。
それはトリックでした。ありがとう！ – pfeds
注 - エラーの原因となる新しいタブストリップを作成しています。あなたはこれが必要です：var tabStrip = $（ "＃tabstrip"）。data（ "kendoTabStrip"）; – pfeds