This example demonstrates initializing a TabStrip widget with no additional options specified.

<div data-bind="kendoTabStrip: {}">
    <ul>
        <li class="k-state-active">tab one</li>
        <li>tab two</li>
        <li>tab three</li>
    </ul>
    <div>tab one content</div>
    <div>tab two content</div>
    <div>tab three content</div>
</div>

var ViewModel = function() {};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute. The kendoTab binding can be applied to child elements to control the behavior of individual menu items.

<input type="checkbox" data-bind="checked: oneEnabled" /> Enabled 1<br/>
<input type="checkbox" data-bind="checked: twoEnabled" /> Enabled 2
<hr/>
<div data-bind="kendoTabStrip: {}">
    <ul>
        <li data-bind="kendoTab: { enabled: oneEnabled }" class="k-state-active">tab one</li>
        <li data-bind="kendoTab: { enabled: twoEnabled }">tab two</li>
        <li>tab three</li>
    </ul>
    <div>tab one content</div>
    <div>tab two content</div>
    <div>tab three content</div>
</div>

var ViewModel = function() {
    this.oneEnabled = ko.observable(false);
    this.twoEnabled = ko.observable(true);
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoTabStrip.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<div data-bind="kendoTabStrip: {}">
    <ul>
        <li>tab one</li>
        <li class="k-state-active">tab two</li>
        <li>tab three</li>
    </ul>
    <div>tab one content</div>
    <div>tab two content</div>
    <div>tab three content</div>
</div>

var ViewModel = function() {};

ko.bindingHandlers.kendoTabStrip.options.animation = false;

                            ko.applyBindings(new ViewModel());