Kendo ButtonGroup Styling

by kendomobile

HTML

<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" data-init="initialize">    
    <div>
        <ul id="btnGroup">
            
            <li> button 1 </li>
                
            <li> button 2 </li>
                
            <li> button 3 </li>
        </ul>          
    </div> 
    <br/>
<div id="output"> </div>
</div>

CSS

#btnGroup   .km-button
{
    background-color: green;
     color: white;
}

#btnGroup .km-state-active
{
    background-color: maroon;   
    
}

JavaScript

var app = new kendo.mobile.Application(document.body);

function initialize(){
 
    $("#btnGroup").kendoMobileButtonGroup({
        index: 1,
        selectOn: "up",
        select: onButtonSelect       
        
    });
}

function onButtonSelect(e){
    
    output('selected button text was : ' + this.current().text());
    output(" index:" + this.current().index());
    //update text of clicked button
    this.current().text('I am clicked');    
}

function output(data){
    $("#output").append(data);
    $("#output").append("<br/>");    
}