Colored Selector using jQuery UI - Netwoven
Blog

Colored Selector using jQuery UI

By Sandip Paul  |  Published on February 10, 2014

Netwoven Blog

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.

Colored Selector using jQuery UI
Colored Selector using jQuery UI

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.

By Sandip Paul

Sandip Paul is a Technical Architect at Netwoven based in the bay area. He has over 13 years of experience in software development and consulting working with both large and small customers. He is experienced in all the three Microsoft clouds: Office 365, Dynamics 365 and Azure. Sandip has worked with Netwoven for over 10 years building scalable systems using Microsoft technologies. He specializes in design and implementation of SharePoint, .NET, and Frontend technologies. Sandip holds a Bachelor of Technology degree in Computer Science from West Bengal University of Technology, Kolkata.

Leave a comment

Your email address will not be published. Required fields are marked *

Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex