68 lines
2.5 KiB
JavaScript
68 lines
2.5 KiB
JavaScript
|
//
|
||
|
|
//Notes:
|
||
|
|
// The element should look something like:
|
||
|
|
// <span class='custom-radiobutton' css-unchecked="radiobutton-unchecked" css-checked="radiobutton-checked" value="false"> My text goes here!</span>
|
||
|
|
// The unchecked and checked css should at a minimum specify a height & width and a background image set to no-repeat.
|
||
|
|
//
|
||
|
|
// Depends on several CSS classes:
|
||
|
|
// .non-selectable-text {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
|
||
|
|
// .clickable {cursor: pointer; cursor: hand;}
|
||
|
|
//
|
||
|
|
(function($) {
|
||
|
|
$.fn.buildCustomRadioButton= function() {
|
||
|
|
for(var index = 0; index < this.length; index++) {
|
||
|
|
var next = $(this[index]);
|
||
|
|
var isWrapped = next.data('is-wrapped');
|
||
|
|
|
||
|
|
if(isWrapped != true) {
|
||
|
|
var cssChecked = next.attr('css-checked');
|
||
|
|
var cssUnchecked = next.attr('css-unchecked');
|
||
|
|
var value = next.attr('value');
|
||
|
|
|
||
|
|
value = value == 'true' || value == true ? true : false;
|
||
|
|
next.attr('value', value);
|
||
|
|
|
||
|
|
//next.prepend("<div class='" + (value == true ? cssChecked : cssUnchecked) + "' style='display: inline-block;'/>");
|
||
|
|
next.prepend("<span class='" + (value == true ? cssChecked : cssUnchecked) + "' style='display: inline-block;'/>");
|
||
|
|
next.addClass("clickable");
|
||
|
|
next.addClass("non-selectable-text");
|
||
|
|
next.data('radioButtonGroup', this);
|
||
|
|
next.add(next.children().first()).click(function() {
|
||
|
|
var _this = $(this);
|
||
|
|
var isChecked = _this.attr('value') == true;
|
||
|
|
|
||
|
|
//Radio buttons should never be un-checked.//
|
||
|
|
if(!isChecked) {
|
||
|
|
var cssChecked = next.attr('css-checked');
|
||
|
|
var cssUnchecked = next.attr('css-unchecked');
|
||
|
|
var allButtons = next.data('radioButtonGroup');
|
||
|
|
|
||
|
|
//Uncheck any of the buttons that are checked.//
|
||
|
|
for(var buttonIndex = 0; buttonIndex < allButtons.length; buttonIndex++) {
|
||
|
|
var nextButton = $(allButtons[buttonIndex]);
|
||
|
|
|
||
|
|
if(nextButton.attr('value') == true) {
|
||
|
|
nextButton.attr('value', false);
|
||
|
|
nextButton.children().first().removeClass(cssChecked);
|
||
|
|
nextButton.children().first().addClass(cssUnchecked);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//Check this selected button.//
|
||
|
|
_this.attr('value', true);
|
||
|
|
_this.children().first().removeClass(cssUnchecked);
|
||
|
|
_this.children().first().addClass(cssChecked);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
next.keypress(function(event) {
|
||
|
|
if(event.which == 32 || event.which == 13) {
|
||
|
|
var _this = $(event.target);
|
||
|
|
_this.children().first().click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
})(jQuery);
|