append
Appends a tab to the collection of tabs in a TabStrip.
Example
<div id="tabstrip"></div>
<script>
var tabStrip = $("#tabstrip").kendoTabStrip({
dataTextField: "text",
dataImageUrlField: "imageUrl",
dataContentField: "content",
dataContentUrlField: "contentUrl",
dataSource: [
{
text: "Tab 1",
content: "Tab 1 content"
},
{
text: "Tab 2",
content: "Tab 2 content"
},
{
text: "Tab 3",
content: "Tab 3 content"
}
]
}).data("kendoTabStrip");
tabStrip.append(
[{
text: "<b>Appended Tab 1</b>",
encoded: false, // Allows use of HTML for item text
content: "Appended Tab 1 content", // Content for the content element
imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png" // Provides the image URL of the tab
},
{
text: "<i>Appended Tab 2</i>",
encoded: false, // Allows use of HTML for item text
contentUrl: "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html", // Provides the URL for the Ajax loaded tab content
spriteCssClass: "brazilFlag" // Item image sprite CSS class, optional.
}]
);
</script>
<style>
#tabstrip .k-sprite {
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
}
</style>
Parameters
tab Array|Object
Target tab, specified as a JSON object. You can pass tab text
, content
or contentUrl
here. Can handle an HTML string or array of such strings or JSON.
Returns
kendo.ui.TabStrip
Returns the TabStrip object to support chaining.