New checkbox widget????

I found it somewhere, though I don't remember where. I know I made some heavy alterations that now are part of Module Filter. I don't know of a module that does it site wide, would be interesting though. :)

The checkbox-toggle-stuff can be found in the module_filter_tab.js on line 175:

$('td.checkbox div.form-item').hide();
$('td.checkbox').each(function(i) {
  var $cell = $(this);
  var $switch = $('.toggle-enable', $cell);
  $switch.removeClass('js-hide').click(function() {
    if (!$(this).hasClass('disabled')) {
      $(':checkbox', $cell).click().change();
    }
  });
  $(':checkbox', $cell).change(function() {
    if (!$switch.hasClass('disabled')) {
      $switch.toggleClass('off');
    }
  });
});

Here is the css which is needed for the style, it's copied from the module_filter_tab.css line 154:

.toggle-enable {
  margin: auto;
  position: relative;
  width: 50px;
  overflow: hidden;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
  box-shadow: 0 0 10px rgba(0,0,0,0.50) inset;
  background-clip: padding-box;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(50%, red), color-stop(50%, orange), color-stop(100%, orange));
  background-image: -moz-linear-gradient(left, red 50%, orange 50%, orange 100%);
  background-image: linear-gradient(left, red 50%, orange 50%, orange 100%);
}
.toggle-enable.enabled {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(50%, orange), color-stop(50%, green), color-stop(100%, green));
  background-image: -moz-linear-gradient(left, orange 50%, green 50%, green 100%);
  background-image: linear-gradient(left, orange 50%, green 50%, green 100%);
}
.toggle-enable.disabled {
  background: #ccc;
  border-color: #ddd;
  cursor: auto;
}
.toggle-enable div {
  position: relative;
  color: #777;
  width: 26px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  background: white;
  text-shadow: 1px 1px 0 white;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #FEFEFE), color-stop(100%, #EAEAEA));
  background-image: -moz-linear-gradient(top, #FEFEFE 0%, #EAEAEA 100%);
  background-image: linear-gradient(top, #FEFEFE 0%, #EAEAEA 100%);
  -webkit-transition: left 0.2s;
  -mox-transition: left 0.2s;
  -o-transition: left 0.2s;
  transition: left 0.2s;
}
.toggle-enable.disabled div {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #FEFEFE), color-stop(100%, #EEEEEE));
  background-image: -moz-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%);
  background-image: linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%);
}
.toggle-enable div:after,
.toggle-enable div:before {
  color: white;
  text-shadow: none;
  width: 25px;
  position: absolute;
  top: 0;
  font-size: 9px;
  font-weight: bold;
}
.toggle-enable div:before {
  content: "OFF";
  left: -24px;
}
.toggle-enable div:after {
  content: "ON";
  right: -24px;
}
.toggle-enable.off div {
  left: 24px;
}

I found it somewhere, though I don't remember where.

Hi greenSkin,
I'm pretty sure you found it on my Sasson toolkit, I first created it for the draggable design-image-overlay feature.
No bad feelings, not looking for any credit or anything, just had to ask, it is far too similar :)