xp-dev.com Git - namibia/blob - public/js/vendor/jquery-ui.toggleSwitch.js

   1 jQuery.fn.toggleSwitch = function (params) {
   2
   3     var defaults = {
   4         highlight: true,
   5         width: 36,
   6         change: null
   7     };
   8
   9     var options = $.extend({}, defaults, params);
  10
  11     $(this).each(function (i, item) {
  12         generateToggle(item);
  13     });
  14
  15     function generateToggle(selectObj) {
  16
  17         // create containing element
  18         var $contain = $("<div />").addClass("ui-toggle-switch");
  19
  20         // generate labels
  21         $(selectObj).find("option").each(function (i, item) {
  22             $contain.append("<label>" + $(item).text() + "</label>");
  23         }).end().addClass("ui-toggle-switch");
  24
  25         // generate slider with established options
  26         var $slider = $("<div />").slider({
  27             min: 0,
  28             max: 100,
  29             animate: "fast",
  30             change: options.change,
  31             stop: function (e, ui) {
  32                 var roundedVal = Math.round(ui.value / 100);
  33                 var self = this;
  34                 window.setTimeout(function () {
  35                     toggleValue(self.parentNode, roundedVal);
  36                 }, 11);
  37             },
  38             range: (options.highlight && !$(selectObj).data("hideHighlight")) ? "max" : null
  39         }).width(options.width);
  40
  41         // put slider in the middle
  42         $slider.insertAfter(
  43             $contain.children().eq(0)
  44                 );
  45
  46         // bind interaction
  47         $contain.delegate("label", "click", function () {
  48             if ($(this).hasClass("ui-state-active")) {
  49                 return;
  50             }
  51             var labelIndex = ($(this).is(":first-child")) ? 0 : 1;
  52             toggleValue(this.parentNode, labelIndex);
  53         });
  54
  55         function toggleValue(slideContain, index) {
  56             $(slideContain).find("label").eq(index).addClass("ui-state-active").siblings("label").removeClass("ui-state-active");
  57             $(slideContain).parent().find("option").eq(index).attr("selected", true);
  58             $(slideContain).find(".ui-slider").slider("value", index * 100);
  59         }
  60
  61         // initialise selected option
  62         $contain.find("label").eq(selectObj.selectedIndex).click();
  63
  64         // add to DOM
  65         $(selectObj).parent().append($contain);
  66
  67     }
  68 };