TinyToggle - jQuery plugin

TinyToggle is a simple and useful plug-in to mask the checkboxes html inputs tag in your projects. You can choose from 13 different icons sets available, you can also customize colors palette and size as you like and extend with external library like Font Awesome.

TinyToggle is based on web fonts css it's easy to use and light to include in your project.

News in 1.2.0 Version

Add groups management
Add color css transition for switch status
Add method 'event' to set specific callbacks handler
Add optionals labels to controller
Add external iconset library integration (Ex. Font Awesome)
AngularJs Directive

<!-- Include css and js -->
<link href="%your_css_assets_path%/tinytoggle.min.css" rel="stylesheet">

<script src="%your_js_assets_path%/jquery.js" type="text/javascript"></script>
<script src="%your_js_assets_path%/jquery.tinytoggle.min.js" type="text/javascript"></script>

<!-- Create checkbox input and add "tiny-toggle" class -->  
<input type="checkbox" id="my-checkbox" name="my_option" class="tiny-toggle">
<script type="text/javascript">
  // Customize default options
  $.fn.TinyToggle.defaults.type = "square";
  
  // Define your custom size and use it
  $.fn.TinyToggle.sizes["mysize"] = "36px";
  $.fn.TinyToggle.defaults.size = "mysize";
      
  // Initialize plug-in    
  $("#my-checkbox").tinyToggle({
    type:    "circle",
    palette: "red", 
    size:    "huge", // you can also specify defined custom sizes Ex. "mysize"
    onReady: function() { /* do something... */ },
    onClick: function() { /* do something */ },
    onChange: function() { /* do something... */ },
    onCheck: function() { /* do something... */ },
    onUncheck: function() { /* do something... */ },
    onDisabled: function() { /* do something... */ },
    onEnabled: function() { /* do something... */ }
  });    
</script>

HTML Tag

<input id="cb1" name="my_option" type="checkbox" class="tiny-toggle" 
    data-tt-type="circle"
    data-tt-size="large"
    data-tt-label-check="This is checked" 
    data-tt-label-uncheck="This is unchecked">

Javascript code

$("#cb1").tinyToggle({          
  onReady: function(obj) { writeLog("onReady", "TinyToggle '" + obj.attr("name") + "'  is ready!"); },
  onClick: function(obj) { writeLog("onClick", "TinyToggle '" + obj.attr("name") + "'  was clicked!"); },
  onChange: function(obj, value) { writeLog("onChange", "Input value changed for '" + obj.attr("name") + "' new value is " + value ); },
  onUncheck: function(obj) { writeLog("onUncheck", "Input '" + obj.attr("name") + "' now is FALSE"); },
  onDisabled: function(obj) { writeLog("onDisabled", "Input '" + obj.attr("name") + "' now is DISABLED"); },
  onEnabled: function(obj) { writeLog("onEnabled", "Input '" + obj.attr("name") + "' now is ENABLED"); }          
});

// You can also set specific handler with method 'event'
$("#cb1").tinyToggle("event", "onCheck", function(obj) {
  writeLog("onCheck", "Input '" + obj.attr("name") + "' now is TRUE");
});

Test TinyToggle Methods

Use tt-group data attribute to set the group of specific checkbox

<input id="my-checkbox" name="my_option" type="checkbox" 
        class="tiny-toggle" 
        data-tt-group="%GROUP_NAME%">

Use TinyToggle methods to manage checkboxes group

$("#groups .tiny-toggle").tinyToggle("toggle", "%GROUP_NAME%");
$("#groups .tiny-toggle").tinyToggle("check", "%GROUP_NAME%");
$("#groups .tiny-toggle").tinyToggle("uncheck", "%GROUP_NAME%");

Work With Groups
My First Option		group-one
My Second Option		group-one
My Third Option		group-one
My Fourth Option		group-one
Group One Actions

My Fifth Option		group-two
My Sixth Option		group-two
My Seventh Option		group-two
My Eighth Option		group-two
Group Two Actions

Use TinyToggle angular directive

/* Include angular tinytoggle module */  
<script src="%your_js_assets_path%/ng.tinytoggle.min.js" type="text/javascript"></script>

/* Add tinytoggle dependencing in your app */
angular.module('ttApp', ['tinytoggle'])
  .controller('DemoNgController', function($scope) {
    $scope.myValue = true;
    $scope.enabled = true;
    
    $scope.mychange = function() {        
      $scope.log("Value changed: " + $scope.myValue );
    }
    
    /* ...my others controller functions */    
  });

// in HTML tag...        
<input tiny-toggle ng-model="myValue"
  tt-ng-change="mychange()"
  tt-ng-click="myclick()"
  tt-ng-active="enabled" 
  tt-ng-ready="%myReadyFunc%"
  tt-ng-check="%myCheckFunc%"
  tt-ng-uncheck="%myUnCheckFunc%"
  tt-ng-enabled="%myEnabledFunc%"
  tt-ng-disabled="%myDisabledFunc%"
  type="checkbox" 
  class="tiny-toggle" 
  data-tt-size="big">
    
<p>The scope var 'myValue' now is: <span>{{ myToggleValue }}</span></p>

The scope var 'myValue' now is: {{ myValue }}

Angular {{ row }}

Use tinyToggle in angular ng-repeator

// in controller...
$scope.options = [
     {name:'Option One', val:true},
     {name:'Option Two', val:false},
     {name:'Option Three', val:true}
];

// in template ...
<input tiny-toggle ng-repeat="opt in options" ng-model="opt.val" 
  type="checkbox" 
  data-tt-group="options-group"
  class="tiny-toggle"
  data-tt-label="{{ opt.name }}">

Work With Groups on Angular Repeator
	{{ options \| json }}

Types
Toggle		data-tt-type="toggle"
Check		data-tt-type="check"
Circle		data-tt-type="circle"
Square		data-tt-type="square"
Square Checked		data-tt-type="square_v"
Power		data-tt-type="power"
Dot		data-tt-type="dot"
Like		data-tt-type="like"
Watch		data-tt-type="watch"
Star		data-tt-type="star"
Lock		data-tt-type="lock"
Heart		data-tt-type="heart"
Smile		data-tt-type="smile"

Sizes
Mini
Small
Medium
Large
Big
Huge
Monster
Giant

Palettes
Standard
Black
Blue
Purple
Red
Green
Yellow
White

TinyToggle Version 1.2.0

News in 1.2.0 Version

Docs Contents

#1 - Get Started

#2 - Types Available

#3 - Font Awsome Integration

#4 - Sizes and Palettes Available

#5 - Behaviours and Callbacks

#6 - Grouping

#7 - AngularJs Directive