JavaScript/jQuery Tabs - Customize Item Appearance
For a minor customization of tabs, you can define specific fields in item data objects. For example, the following code generates three tabs: the first has an icon, the second has a badge, the third is disabled.
JavaScript
- $(function() {
- $("#tabsContainer").dxTabs({
- items: [
- { text: "User", icon: 'user' },
- { text: "Comment", badge: "New" },
- { text: "Find", disabled: true }
- ]
- });
- });
If you need a more flexible solution, define an itemTemplate.
JavaScript
- $(function() {
- $("#tabsContainer").dxTabs({
- items: [
- { text: "User" },
- { text: "Comment" },
- { text: "Find" }
- ],
- itemTemplate: function (itemData, itemIndex, itemElement) {
- itemElement.append("<p style='color:#6600cc;'>" + itemData.text + "</p>");
- }
- });
- });
You can also customize individual tabs. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
HTML
JavaScript
- <div id="tabsContainer"></div>
- <script id="individualTabTemplate" type="text/html">
- <span>Comment</span>
- </script>
- $(function() {
- $("#tabsContainer").dxTabs({
- items: [{
- template: function() {
- return $("<span>").text("User");
- }
- }, {
- template: $("#individualTabTemplate")
- }]
- });
- });
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.