Theme chooser

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<ul id="segmented"><li></li></ul>

CSS

html,body {
    margin: 0;
    padding: 0;    
}

body {
    font: 12px/1.5 Tahoma,sans-serif;
    padding: 2em;
}

#tree {
    height: 9em;
}

.segmentedControl
{
    float: right;
    background:rgba(0,0,0,.1);
    border:solid rgba(0,0,0,.2);
    border-width:0 1px;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    overflow:hidden;
}


.segmentedControl li
{
    display:inline;
}

.segmentedControl,
.segmentedControl span
{
    display:inline-block;
    vertical-align:middle;
}

.segmentedControl span
{
    padding:0 9px;
    line-height:27px;
    cursor:pointer;

    -moz-box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
    -webkit-box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
    box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
}

.segmentedControl li:first-child span
{
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
}

.segmentedControl li:last-child span
{
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
}

.segmentedControl .k-state-selected
{
    cursor:default;
    position:relative;
    background:repeat-x 0 -258px url(http://demos.kendoui.com/content/shared/styles/highlight.png)
}

.segmentedControl .k-state-selected:after
{
    content:" ";
    display:block;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
    left: 50%;
    margin: 0 0 0 -5px;
    position: absolute;
    top: 0;
    width: 0;
    height:0;
}

.segmentedControl .k-state-selected{background-color:#005c83;color:#fff;}

JavaScript

$.fn.segmentedControl = function(options) {
    var segments = $.isArray(options) ? options : options.segments,
        template = kendo.template("<li data-value='#=value#' class='skin-#=value#'><span>#= text #</span></li>"),
        setSegment = function(segment) {
            try {
                sessionStorage.setItem("segment", segment);
            } catch(err) {}
        };

    return this.each(function() {
        var element = $(this),
            segment;
        
        element.addClass("segmentedControl");
        
        if (options.select) {
            element.bind("select", options.select);
        }

        try {
            segment = sessionStorage.getItem("segment");
        } catch(err) {}

        segment = segment || segments[0].value;

        $(this).html(kendo.render(template, segments))
               .on("click", "li", function() {
                   var li = $(this).children("span").addClass("k-state-selected").end(),
                       segment = segments[li.index()];

                   li.siblings().children("span").removeClass("k-state-selected");

                   setSegment(segment.value);
                   
                   element.trigger("select", { segment: segment });
               })
               .children()
               .filter(function() {
                   return $(this).data("value") === segment;
               }).children("span").addClass("k-state-selected");
    });
};

function onSelect(e, extra) {
    alert("text: " + extra.segment.text + ", value: " + extra.segment.value);
}

$("#segmented").segmentedControl({ 
    segments: [
        { text: "Black", value: "black" },
        { text: "Blue Opal", value: "blueopal" },
        { text: "Default", value: "default" },
        { text: "Metro", value: "metro" },
        { text: "Silver", value: "silver" }
    ], 
    select: onSelect
});