├── README ├── jquery.slim-check.min.js ├── angular.slim-check.js ├── slim-check.css └── jquery.slim-check.js /README: -------------------------------------------------------------------------------- 1 | This plugin make elegante checkbox without images or complex settings. 2 | 3 | 4 | // Include js and css 5 | 6 | 7 | 8 | 9 | // Transforme all input checkbox 10 | $('input[type="checkbox"]').slimCheck(); 11 | 12 | 13 | Done! 14 | -------------------------------------------------------------------------------- /jquery.slim-check.min.js: -------------------------------------------------------------------------------- 1 | (function(e){e.fn.slimCheck=function(){return this.each(function(){t(this,n(this));e(this).addClass("slim-check")})};var t=function(t,n){if(e(t).next().length==0||e(t).next().get(0).tagName!="LABEL"){e(t).after('')}};var n=function(t){var n=e(t).attr("id");if(typeof n=="undefined"){n="check_"+Math.floor(Math.random()*999999999);e(t).attr("id",n)}return n}})(jQuery) -------------------------------------------------------------------------------- /angular.slim-check.js: -------------------------------------------------------------------------------- 1 | var module = angular.module('app'); 2 | 3 | module.directive('slimCheck', function() { 4 | return { 5 | // Restrict it to be an attribute in this case 6 | restrict: 'A', 7 | // responsible for registering DOM listeners as well as updating the DOM 8 | link: function(scope, element, attrs) { 9 | $(element).slimCheck(); 10 | } 11 | }; 12 | }); -------------------------------------------------------------------------------- /slim-check.css: -------------------------------------------------------------------------------- 1 | 2 | input[class*="slim-check"] { display: none; } 3 | 4 | input[class*="slim-check"] + label { 5 | display: inline-block; 6 | cursor: pointer; 7 | position: relative; 8 | font-size: 13px; 9 | 10 | } 11 | 12 | input[class*="slim-check"] + label:before { 13 | content: ""; 14 | display: inline-block; 15 | position: relative; 16 | width: 12px; 17 | height: 12px; 18 | background-color: #fff; 19 | -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 20 | border: solid 1px #ccc; 21 | } 22 | 23 | input[class*="slim-check"]:not(:disabled) + label:hover:before { 24 | border-color: #999; 25 | } 26 | 27 | input[class*="slim-check"]:checked + label:before { 28 | border-color: #87CEEB; 29 | background-color: #F0FFFF; 30 | } 31 | 32 | input[class*="slim-check"]:checked + label:after { 33 | font-family: "foundation-icons"; 34 | content: "\f126"; 35 | font-size: 15px; 36 | color: #777; 37 | text-align: center; 38 | position: absolute; 39 | left: 1px 40 | } 41 | 42 | input[class*="slim-check"]:disabled + label { 43 | cursor: default; 44 | } 45 | 46 | input[class*="slim-check"]:disabled + label:before { 47 | background-color: #eee; 48 | } 49 | -------------------------------------------------------------------------------- /jquery.slim-check.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.slim-check.js 3 | * 4 | * @version: v0.1 5 | * @author: Dyorg Washington G. de Almeida 6 | * @copyright Dyorg Washington G. de Almeida 2014 7 | * @link http://dyorg.github.com/jquery.slim-check.js/ 8 | * 9 | * The MIT License (http://www.opensource.org/licenses/mit-license.php) 10 | * 11 | * Permission is hereby granted, free of charge, to any person 12 | * obtaining a copy of this software and associated documentation 13 | * files (the "Software"), to deal in the Software without 14 | * restriction, including without limitation the rights to use, 15 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | * copies of the Software, and to permit persons to whom the 17 | * Software is furnished to do so, subject to the following 18 | * conditions: 19 | * 20 | * The above copyright notice and this permission notice shall be 21 | * included in all copies or substantial portions of the Software. 22 | * 23 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 24 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 25 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 26 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 27 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 28 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 29 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 30 | * OTHER DEALINGS IN THE SOFTWARE. 31 | */ 32 | 33 | (function($){ 34 | 35 | $.fn.slimCheck = function() { 36 | return this.each(function(){ 37 | addLabel(this, getId(this)); 38 | $(this).addClass('slim-check'); 39 | }); 40 | }; 41 | 42 | var addLabel = function(e, id){ 43 | if($(e).next().length == 0 || $(e).next().get(0).tagName != "LABEL"){ 44 | $(e).after(''); 45 | } 46 | }; 47 | 48 | var getId = function(e){ 49 | var id = $(e).attr('id'); 50 | 51 | if(typeof id == "undefined") { 52 | id = 'check_' + Math.floor(Math.random()*999999999); 53 | $(e).attr('id', id); 54 | } 55 | 56 | return id; 57 | }; 58 | 59 | })(jQuery); 60 | 61 | --------------------------------------------------------------------------------