TinyToggle

jQuery plugin to create a flexible and modern checkbox input

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

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

Watch what TinyToggle can do at the Docs Page

Install

Copy TinyToggle dist files and folders in the assets path of your website.

Remember! TinyToggle plugin depends on jQuery

<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>

Link the TinyToggle stylesheet

<link href="%your_css_assets_path%/tinytoggle.min.css" rel="stylesheet">

How to use?

It's easy, trust me! First create a checkbox input tag in your HTML with the class 'tiny-toggle'

<input type="checkbox" id="my-checkbox" name="opt1" class="tiny-toggle">

Now instantiate the plugin with javascript:

$( document ).ready( function() {      
  $("#my-checkbox").tinyToggle();
});

That's all... :)

AngularJs Directive

Use TinyToggle in your AngularJs projects.

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

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

<input tiny-toggle ng-model="myValue"
  tt-ng-change="mychange()"
  type="checkbox" 
  class="tiny-toggle" 
  data-tt-size="big">

Documentation

Read complete documentation in TinyToggle Offical Page

License

Copyright © Simone Righi (simone.righi@icloud.com)
Licensed under the MIT license.