142 lines
5.1 KiB
JavaScript
142 lines
5.1 KiB
JavaScript
/**
|
|
*
|
|
* Copyright (c) 2009 Tony Dewan (http://www.tonydewan.com/)
|
|
* Licensed under the MIT License:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
*
|
|
* Project home:
|
|
* http://www.tonydewan.com/code/checkToggle/
|
|
*
|
|
*/
|
|
|
|
(function($) {
|
|
/**
|
|
* Version 1.0
|
|
* Replaces checkboxes with a toggle switch.
|
|
* usage: $("input[type='checkbox']").checkToggle(settings);
|
|
*
|
|
* @name checkToggle
|
|
* @type jquery
|
|
* @param Hash settings Settings
|
|
* @param String settings[on_label] Text used for the left-side (on) label. Defaults to "On"
|
|
* @param String settings[off_label] Text used for the right-side (off) label. Defaults to "Off"
|
|
* @param String settings[on_bg_color] Hex background color for On state
|
|
* @param String settings[off_bg_color] Hex background color for Off state
|
|
* @param String settings[skin_dir] Document relative (or absolute) path to the skin directory
|
|
* @param Bool settings[bypass_skin] Flags whether to bypass the inclusion of the skin.css file. Used if you've included the skin styles somewhere else already.
|
|
*/
|
|
|
|
$.fn.checkToggle = function(action, settings) {
|
|
|
|
if (typeof(action) == 'object' || typeof(action) == 'undefined') {
|
|
settings = action || {};
|
|
action = 'initialize';
|
|
}
|
|
|
|
settings = $.extend({
|
|
on_label : 'Yes',
|
|
on_label_color : '#333333',
|
|
on_bg_color : '#8FE38D',
|
|
off_label : 'No',
|
|
off_label_color : '#cccccc',
|
|
off_bg_color: '#F8837C',
|
|
skin_dir : "skin/",
|
|
bypass_skin : false,
|
|
|
|
on_callback : function(el) {},
|
|
off_callback : function(el) {}
|
|
}, settings);
|
|
|
|
// FIXME (Didier Lafforgue) it works but it doesn't scale if we handle another locale
|
|
if (typeof I18nLocale != 'undefined' && I18nLocale == 'fr') {
|
|
settings.on_label = 'Oui';
|
|
settings.off_label = 'Non';
|
|
}
|
|
|
|
function showUncheckedState(element) {
|
|
element.parent().prev().css("color",settings.off_label_color);
|
|
element.parent().next().css("color",settings.on_label_color);
|
|
element.parent().css("background-color", settings.off_bg_color).removeClass('on');
|
|
element.parent().parent().prev().removeAttr("checked").trigger('change');
|
|
element.removeClass("left").addClass("right");
|
|
}
|
|
|
|
function showCheckedState(element) {
|
|
element.parent().prev().css("color",settings.on_label_color);
|
|
element.parent().next().css("color",settings.off_label_color);
|
|
element.parent().css("background-color", settings.on_bg_color).addClass('on');
|
|
element.parent().parent().prev().attr("checked", "checked").trigger('change');
|
|
element.removeClass("right").addClass("left");
|
|
}
|
|
|
|
function toggle(element){
|
|
var checked = $(element).parent().parent().prev().is(':checked');
|
|
|
|
// if it's set to on
|
|
if(checked){
|
|
|
|
$(element).animate({marginLeft: '0px'}, 100,
|
|
|
|
// callback function
|
|
function(){
|
|
showUncheckedState($(element));
|
|
|
|
if (typeof $.fn.publish != 'undefined')
|
|
$.publish('toggle.' + $(element).parent().parent().prev().attr('id') + '.unchecked', []);
|
|
|
|
settings.off_callback();
|
|
});
|
|
|
|
} else {
|
|
$(element).animate({marginLeft: '15px'}, 100,
|
|
|
|
// callback function
|
|
function(){
|
|
showCheckedState($(element));
|
|
|
|
if (typeof $.fn.publish != 'undefined')
|
|
$.publish('toggle.' + $(element).parent().parent().prev().attr('id') + '.checked', []);
|
|
|
|
settings.on_callback();
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
return this.each(function () {
|
|
|
|
if (action == 'initialize') {// initialize the UI element
|
|
|
|
if ($(this).hasClass('simple')) return;
|
|
|
|
// hide the checkbox
|
|
$(this).css('display','none');
|
|
|
|
// insert the new toggle markup
|
|
if($(this).attr("checked") == "checked" || $(this).attr("checked") == true){
|
|
$(this).after('<div class="toggleSwitch"><span class="leftLabel">'+settings.on_label+'<\/span><div class="switchArea on" style="background-color: '+settings.on_bg_color+'"><span class="switchHandle left" style="margin-left: 15px;"><\/span><\/div><span class="rightLabel" style="color:#cccccc">'+settings.off_label+'<\/span><\/div>');
|
|
}else{
|
|
$(this).after('<div class="toggleSwitch"><span class="leftLabel" style="color:#cccccc;">'+settings.on_label+'<\/span><div class="switchArea" style="background-color: '+settings.off_bg_color+'"><span class="switchHandle right" style="margin-left:0px"><\/span><\/div><span class="rightLabel">'+settings.off_label+'<\/span><\/div>');
|
|
}
|
|
|
|
// Bind the switchHandle click events to the internal toggle function
|
|
$(this).next().find('div.switchArea').bind("click", function () {
|
|
toggle($(this).find('.switchHandle'));
|
|
})
|
|
|
|
} else if (action == 'sync') {
|
|
element = $(this).next().find('.switchHandle');
|
|
|
|
if ($(this).is(':checked'))
|
|
showCheckedState(element);
|
|
else
|
|
showUncheckedState(element);
|
|
} else {
|
|
console.log('unknown action for the checkToggle plugin')
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
})(jQuery); |