1652 Views
3 minutes read
Categories
SharePoint

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.

color1
Color2

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.

Sandip Paul

About 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.

LinkedinTwitterFacebook

Leave a Reply

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