Bizamajig VIEW MODE Button - JQuery UI Buttonset() - Get Selected Info - And BG COLOR Customization

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/themes/redmond/jquery-ui.css">
<div id="bizamajig-ui-view-mode-buttons">
    <input type="radio" id="bizamajig-ui-listview" name="view_option" />
    <label id="bizamajig-ui-listview-label" for="bizamajig-ui-listview">List</label>
    <input type="radio" id="bizamajig-ui-blockview" name="view_option" />
    <label id="bizamajig-ui-blockview-label" for="bizamajig-ui-blockview">Blocks</label>
</div>

CSS

#bizamajig-ui-listview-label.ui-state-active { background: blue; }
#bizamajig-ui-listview-label.ui-state-active span.ui-button-text { color: red; }

#bizamajig-ui-blockview-label.ui-state-active { background: red; }
#bizamajig-ui-blockview-label.ui-state-active span.ui-button-text { color: blue; }

JavaScript

$('#bizamajig-ui-view-mode-buttons').buttonset();

// $('input:radio').bind( 'click', function(){
// $("#bizamajig-ui-view-mode-buttons input").bind( 'click', function(){
$("input:radio[name=view_option]").bind( 'click', function(){
    alert( $("#bizamajig-ui-view-mode-buttons :radio:checked") );
    alert( $("#bizamajig-ui-view-mode-buttons :radio:checked").attr('id') );
    alert( $("#bizamajig-ui-view-mode-buttons :radio:checked + label").text() );

var params = $("input[name=view_option]:checked").val();
alert( params );

});