Colored Selector using jQuery UI

You are developing a user interface for SharePoint 2007/2010/2013 (Tested against 2013). You have radio button options in your interface such as below and want to show some indicator when selected such as highlight with the colour selected.

Implementation:

Using jQuery UI library and by applying “buttonset()” and “button()” functions, you can transform the radio buttons like described in the overview above.

In your page you may have below HTML or ASP.NET Control:

<div id=”jQUIRadioSet”>

<input type=”radio” id=”jQUIRadio1″ name=”jQUIRadio” value=”Red” /&gt;&lt;label for=”jQUIRadio1″&gt;Red&lt;/label />

<input type=”radio” id=”jQUIRadio2″ name=”jQUIRadio” value=”Green” checked=”checked” /&gt;&lt;label for=”jQUIRadio2″&gt;Green&lt;/label/>

<input type=”radio” id=”jQUIRadio3″ name=”jQUIRadio” value=”Yellow” /&gt;&lt;label for=”jQUIRadio3″&gt;Yellow&lt;/label />

</div>;

<div id=”jQUIRadioSet”>

<asp:RadioButtonList ID=”jQUIRadio” runat=”server” RepeatColumns=”3″ RepeatDirection=”Horizontal”></asp>

<asp:ListItem Text=”Red” Value=”Red”</asp:ListItem/>

<asp:ListItem Text=”Yellow” Value=”Yellow”</asp:ListItem />

<asp:ListItem Text=”Green” Value=”Green” </asp:ListItem />

</asp:RadioButtonList/>;

</div>;

<p>Add jQuery UI Script and CSS Reference: </p>

<link type=”text/css” rel=”stylesheet” href=”<a href=”http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css” target=”_blank”>http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css</a>/>

<script type=”text/javascript” src=”<a href=”http://code.jquery.com/jquery-1.9.1.js” target=”_blank”>http://code.jquery.com/jquery-1.9.1.js</a></script>

<script type=”text/javascript” src=”<a href=”http://code.jquery.com/ui/1.10.4/jquery-ui.js” target=”_blank”>http://code.jquery.com/ui/1.10.4/jquery-ui.js</a></script>;

<p>Include below Custom Script to your page:</p>

<script type=”text/javascript”>

$(function () {

/***Radio Set***/

$(“#jQUIRadioSet”).buttonset();

jQUIRadioFormat();

$(“input[id*=’jQUIRadio’]”).click(function (e) {

jQUIRadioFormat();

});

function jQUIRadioFormat() {

var radioOffIcon = { primary: ‘ui-icon-radio-off’, secondary: null };

var radioOnIcon = { primary: ‘ui-icon-circle-check’, secondary: null };

$(“input[id*=’jQUIRadio’]”).each(function (index) {

if ($(this).is(‘:checked’)) {

$(this).button({ icons: radioOnIcon });

$(“label[for='” + $(this).attr(“id”) + “‘]”).css(‘background’, $(this).val());

}

else {

$(this).button({ icons: radioOffIcon });

$(“label[for='” + $(this).attr(“id”) + “‘]”).removeAttr(“style”);

}

});

}

/***End of Radio Set***/

});

</script>;

That’s it! Hope this helps.