├── PSD └── icr-all-skin.psd ├── _tmp └── logo-ion-check-radio.png ├── bower.json ├── css ├── ion.checkRadio.cloudy.css ├── ion.checkRadio.css ├── ion.checkRadio.dark.css ├── ion.checkRadio.green.css └── ion.checkRadio.html5.css ├── history.md ├── img ├── icr-cloudy-skin.png ├── icr-dark-skin.png └── icr-green-skin.png ├── ion-checkRadio.jquery.json ├── js ├── ion.checkRadio.js └── ion.checkRadio.min.js ├── package.json ├── readme.md └── readme.ru.md /PSD/icr-all-skin.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonDen/ion.checkRadio/156c1701b4d5fc1a590d4aad2755ffe53ee22f3d/PSD/icr-all-skin.psd -------------------------------------------------------------------------------- /_tmp/logo-ion-check-radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonDen/ion.checkRadio/156c1701b4d5fc1a590d4aad2755ffe53ee22f3d/_tmp/logo-ion-check-radio.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion-checkradio", 3 | "version": "2.0.0", 4 | "homepage": "https://github.com/IonDen/ion.checkRadio", 5 | "authors": [ 6 | { 7 | "name": "Denis Ineshin (IonDen)", 8 | "email": "denis.ineshin@gmail.com", 9 | "homepage": "https://github.com/IonDen" 10 | } 11 | ], 12 | "description": "jQuery plugin for styling checkboxes and radio-buttons. With skin support.", 13 | "repository": { 14 | "type": "git", 15 | "url": "git://github.com/IonDen/ion.checkRadio.git" 16 | }, 17 | "main": [ 18 | "js/ion.checkRadio.js" 19 | ], 20 | "moduleType": [ 21 | "globals" 22 | ], 23 | "keywords": [ 24 | "jquery", 25 | "forms", 26 | "checkbox", 27 | "radio", 28 | "interface", 29 | "skins", 30 | "ui" 31 | ], 32 | "license": "MIT", 33 | "ignore": [ 34 | "ion-checkRadio.jquery.json" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /css/ion.checkRadio.cloudy.css: -------------------------------------------------------------------------------- 1 | /* Ion.CheckRadio, Cloudy Skin 2 | // Version 2.0.0 3 | // 4 | // © Denis Ineshin, 2015 5 | // https://github.com/IonDen 6 | // ===================================================================================================================*/ 7 | 8 | .icr-label { 9 | padding-right: 2px; 10 | margin: 0 5px 5px 0; 11 | } 12 | 13 | .icr-item { 14 | width: 18px; height: 18px; 15 | background: url(../img/icr-cloudy-skin.png) no-repeat; 16 | } 17 | 18 | .icr-label.disabled { 19 | opacity: 0.4; 20 | } 21 | 22 | .icr-label.focused .icr-item:after { 23 | position: absolute; 24 | display: block; 25 | content: ""; 26 | top: -1px; left: -1px; 27 | width: 18px; height: 18px; 28 | border: 1px dotted rgba(0, 0, 0, 0.3); 29 | } 30 | .icr-label.focused .type_checkbox:after { 31 | -webkit-border-radius: 4px; 32 | -moz-border-radius: 4px; 33 | border-radius: 4px; 34 | } 35 | .icr-label.focused .type_radio:after { 36 | -webkit-border-radius: 18px; 37 | -moz-border-radius: 18px; 38 | border-radius: 18px; 39 | } 40 | -------------------------------------------------------------------------------- /css/ion.checkRadio.css: -------------------------------------------------------------------------------- 1 | /* Ion.CheckRadio, Skin Base 2 | // Version 2.0.0 3 | // 4 | // © Denis Ineshin, 2015 5 | // https://github.com/IonDen 6 | // ===================================================================================================================*/ 7 | 8 | .icr-label { 9 | position: relative; 10 | display: inline-block; 11 | } 12 | 13 | .icr-hidden { 14 | position: absolute; 15 | display: block; 16 | top: 0; left: 0; 17 | width: 0; height: 0; 18 | overflow: hidden; 19 | } 20 | 21 | .icr-input { 22 | position: absolute; 23 | display: block; 24 | top: -20px; left: -20px; 25 | } 26 | 27 | .icr-text { 28 | display: inline; 29 | vertical-align: middle; 30 | } 31 | 32 | .icr-item { 33 | position: relative; 34 | display: inline-block; 35 | vertical-align: middle; 36 | } 37 | 38 | 39 | /* Sprite positions */ 40 | 41 | .icr-label .type_checkbox { 42 | background-position: 0 0; 43 | } 44 | .icr-label .type_radio { 45 | background-position: 0 -50px; 46 | } 47 | 48 | .icr-label:hover .type_checkbox { 49 | background-position: -50px 0; 50 | } 51 | .icr-label:hover .type_radio { 52 | background-position: -50px -50px; 53 | } 54 | 55 | 56 | .icr-label.checked .type_checkbox { 57 | background-position: -150px 0; 58 | } 59 | .icr-label.checked .type_radio { 60 | background-position: -150px -50px; 61 | } 62 | 63 | .icr-label.checked:hover .type_checkbox { 64 | background-position: -150px 0; 65 | } 66 | .icr-label.checked:hover .type_radio { 67 | background-position: -150px -50px; 68 | } 69 | 70 | 71 | .icr-label.disabled { 72 | opacity: 0.5; 73 | } 74 | .lt-ie9 .icr-label.disabled { 75 | filter: alpha(opacity=50); 76 | } 77 | 78 | .icr-label.disabled .type_checkbox { 79 | background-position: 0 0 !important; 80 | } 81 | .icr-label.disabled .type_radio { 82 | background-position: 0 -50px !important; 83 | } 84 | 85 | .icr-label.checked.disabled .type_checkbox { 86 | background-position: -100px 0 !important; 87 | } 88 | .icr-label.checked.disabled .type_radio { 89 | background-position: -100px -50px !important; 90 | } -------------------------------------------------------------------------------- /css/ion.checkRadio.dark.css: -------------------------------------------------------------------------------- 1 | /* Ion.CheckRadio, Dark Skin 2 | // Version 2.0.0 3 | // 4 | // © Denis Ineshin, 2015 5 | // https://github.com/IonDen 6 | // ===================================================================================================================*/ 7 | 8 | .icr-label { 9 | padding-right: 2px; 10 | margin: 0 5px 5px 0; 11 | color: #999; 12 | text-shadow: -1px -1px 0 rgba(0,0,0,0.8); 13 | } 14 | 15 | .icr-item { 16 | width: 18px; height: 18px; 17 | background: url(../img/icr-dark-skin.png) no-repeat; 18 | } 19 | 20 | .icr-label.disabled { 21 | opacity: 0.4; 22 | } 23 | 24 | .icr-label.focused .icr-item:after { 25 | position: absolute; 26 | display: block; 27 | content: ""; 28 | top: -2px; left: -2px; 29 | width: 19px; height: 19px; 30 | border: 1px dotted rgba(255, 255, 255, 0.3); 31 | } 32 | .icr-label.focused .type_checkbox:after { 33 | -webkit-border-radius: 4px; 34 | -moz-border-radius: 4px; 35 | border-radius: 4px; 36 | } 37 | .icr-label.focused .type_radio:after { 38 | border-color: rgba(255, 255, 255, 0.2); 39 | -webkit-border-radius: 18px; 40 | -moz-border-radius: 18px; 41 | border-radius: 18px; 42 | } 43 | -------------------------------------------------------------------------------- /css/ion.checkRadio.green.css: -------------------------------------------------------------------------------- 1 | /* Ion.CheckRadio, Green Skin 2 | // Version 2.0.0 3 | // 4 | // © Denis Ineshin, 2015 5 | // https://github.com/IonDen 6 | // ===================================================================================================================*/ 7 | 8 | .icr-label { 9 | padding-right: 2px; 10 | margin: 0 5px 5px 0; 11 | font-size: 14px; line-height: 18px; 12 | } 13 | 14 | .icr-item { 15 | width: 23px; height: 23px; 16 | background: url(../img/icr-green-skin.png) no-repeat; 17 | } 18 | 19 | .icr-label.focused .icr-item:after { 20 | position: absolute; 21 | display: block; 22 | content: ""; 23 | top: -2px; left: -2px; 24 | border: 1px dotted rgba(0, 0, 0, 0.3); 25 | } 26 | .icr-label.focused .type_checkbox:after { 27 | width: 25px; height: 25px; 28 | -webkit-border-radius: 4px; 29 | -moz-border-radius: 4px; 30 | border-radius: 4px; 31 | } 32 | .icr-label.focused .type_radio:after { 33 | width: 22px; height: 22px; 34 | -webkit-border-radius: 22px; 35 | -moz-border-radius: 22px; 36 | border-radius: 22px; 37 | } 38 | -------------------------------------------------------------------------------- /css/ion.checkRadio.html5.css: -------------------------------------------------------------------------------- 1 | /* Ion.CheckRadio, Cloudy Skin 2 | // Version 2.0.0 3 | // 4 | // © Denis Ineshin, 2015 5 | // https://github.com/IonDen 6 | // ===================================================================================================================*/ 7 | 8 | .icr-label { 9 | padding-right: 2px; 10 | margin: 0 5px 5px 0; 11 | } 12 | 13 | .icr-item { 14 | width: 18px; height: 18px; 15 | border: 1px solid #ccc; 16 | } 17 | 18 | .icr-item.type_radio { 19 | -moz-border-radius: 18px; 20 | border-radius: 18px; 21 | } 22 | .icr-label.checked .type_radio:after { 23 | position: absolute; 24 | display: block; 25 | content: ""; 26 | top: 50%; left: 50%; 27 | width: 8px; height: 8px; 28 | margin: -4px 0 0 -4px; 29 | -moz-border-radius: 8px; 30 | border-radius: 8px; 31 | background: #999; 32 | } 33 | .icr-label.focused .icr-item { 34 | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 35 | -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 36 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 37 | } 38 | .lt-ie9 .icr-label.focused .icr-item { 39 | border-color: #555; 40 | } 41 | 42 | .icr-item.type_checkbox { 43 | -moz-border-radius: 2px; 44 | border-radius: 2px; 45 | } 46 | 47 | .icr-label.checked .type_checkbox:after { 48 | position: absolute; 49 | display: block; 50 | content: ""; 51 | top: 50%; left: 50%; 52 | width: 4px; height: 12px; 53 | margin: -6px 0 0 -2px; 54 | background: #999; 55 | 56 | -webkit-transform-origin: 50% 50%; 57 | -moz-transform-origin: 50% 50%; 58 | -o-transform-origin: 50% 50%; 59 | transform-origin: 50% 50%; 60 | 61 | -webkit-transform: rotate(45deg); 62 | -moz-transform: rotate(45deg); 63 | -o-transform: rotate(45deg); 64 | transform: rotate(45deg); 65 | } 66 | 67 | .icr-label.checked .type_checkbox:before { 68 | position: absolute; 69 | display: block; 70 | content: ""; 71 | top: 50%; left: 50%; 72 | width: 12px; height: 4px; 73 | margin: -2px 0 0 -6px; 74 | background: #999; 75 | 76 | -webkit-transform-origin: 50% 50%; 77 | -moz-transform-origin: 50% 50%; 78 | -o-transform-origin: 50% 50%; 79 | transform-origin: 50% 50%; 80 | 81 | -webkit-transform: rotate(45deg); 82 | -moz-transform: rotate(45deg); 83 | -o-transform: rotate(45deg); 84 | transform: rotate(45deg); 85 | } 86 | 87 | 88 | .icr-label:hover .icr-item, .icr-label.checked .icr-item { 89 | border-color: #999; 90 | } 91 | 92 | .icr-label.checked:hover .icr-item:after, .icr-label.checked:hover .icr-item:before { 93 | background: #999; 94 | } 95 | 96 | .icr-label.disabled.checked:hover .icr-item:after, .icr-label.disabled.checked:hover .icr-item:before { 97 | background: #ccc; 98 | } 99 | -------------------------------------------------------------------------------- /history.md: -------------------------------------------------------------------------------- 1 | ![ion.checkRadio](_tmp/logo-ion-check-radio.png) 2 | 3 | # Update History 4 | 5 | ### Version 2.0.0. June 05, 2015 6 | * New code 7 | * New API 8 | * Many bug fixes and improvements 9 | * New HTML5 Skin 10 | * New Demo Page 11 | 12 | ### Version 1.1.0. April 30, 2014 13 | * Many minor changes and bug fixes. 14 | * Fixed issues: #1, #5, #7 15 | 16 | ### Version 1.0.2. August 05, 2013 17 | * minor bug with onChange event fixed 18 | 19 | ### Version 1.0.1. July 31, 2013 20 | * minor enhancement 21 | 22 | ### Version 1.0.0. July 21, 2013 23 | * Plugin release 24 | 25 | *** 26 | 27 | Support the plugin: 28 | 29 | [![](https://pledgie.com/campaigns/25694.png?skin_name=chrome)](https://pledgie.com/campaigns/25694) 30 | -------------------------------------------------------------------------------- /img/icr-cloudy-skin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonDen/ion.checkRadio/156c1701b4d5fc1a590d4aad2755ffe53ee22f3d/img/icr-cloudy-skin.png -------------------------------------------------------------------------------- /img/icr-dark-skin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonDen/ion.checkRadio/156c1701b4d5fc1a590d4aad2755ffe53ee22f3d/img/icr-dark-skin.png -------------------------------------------------------------------------------- /img/icr-green-skin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IonDen/ion.checkRadio/156c1701b4d5fc1a590d4aad2755ffe53ee22f3d/img/icr-green-skin.png -------------------------------------------------------------------------------- /ion-checkRadio.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion-checkRadio", 3 | "version": "2.0.0", 4 | "title": "Ion.CheckRadio", 5 | "description": "jQuery plugin for styling checkboxes and radio-buttons. With skin support.", 6 | "keywords": [ 7 | "jquery", 8 | "forms", 9 | "checkbox", 10 | "radio", 11 | "interface", 12 | "skins", 13 | "ui" 14 | ], 15 | "author": { 16 | "name": "IonDen", 17 | "url": "https://github.com/IonDen", 18 | "email": "denis.ineshin@gmail.com" 19 | }, 20 | "licenses": [ 21 | { 22 | "type": "MIT", 23 | "url": "http://ionden.com/a/plugins/licence-en.html" 24 | } 25 | ], 26 | "homepage": "http://ionden.com/a/plugins/ion.checkRadio/en.html", 27 | "docs": "https://github.com/IonDen/ion.checkRadio", 28 | "demo": "http://ionden.com/a/plugins/ion.checkRadio/demo.html", 29 | "download": "http://ionden.com/a/plugins/ion.checkRadio/ion.checkRadio-2.0.0.zip", 30 | "dependencies": { 31 | "jquery": ">=1.9" 32 | } 33 | } -------------------------------------------------------------------------------- /js/ion.checkRadio.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Ion.CheckRadio 3 | * version 2.0.0 Build 42 4 | * © Denis Ineshin, 2015 5 | * 6 | * Project page: http://ionden.com/a/plugins/ion.CheckRadio/en.html 7 | * GitHub page: https://github.com/IonDen/ion.CheckRadio 8 | * 9 | * Released under MIT licence: 10 | * http://ionden.com/a/plugins/licence-en.html 11 | */ 12 | 13 | ;(function ($, window) { 14 | "use strict"; 15 | 16 | if ($.fn.ionCheckRadio) { 17 | return; 18 | } 19 | 20 | if (!String.prototype.trim) { 21 | (function() { 22 | var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; 23 | String.prototype.trim = function() { 24 | return this.replace(rtrim, ''); 25 | }; 26 | })(); 27 | } 28 | 29 | 30 | 31 | var collection = {}, 32 | instances = {}; 33 | 34 | var IonCheckRadio = function (group) { 35 | this.group = group.content; 36 | this.type = group.type; 37 | this.$group = $(this.group); 38 | this.old = null; 39 | this.observer = null; 40 | 41 | this.init(); 42 | }; 43 | 44 | IonCheckRadio.prototype = { 45 | init: function () { 46 | var ready = this.$group.eq(0).hasClass("icr-input"); 47 | 48 | if (ready) { 49 | this.prepare(); 50 | } else { 51 | this.createHTML(); 52 | } 53 | }, 54 | 55 | prepare: function () { 56 | var self = this, 57 | $item, 58 | $parent, 59 | i; 60 | 61 | for (i = 0; i < this.group.length; i++) { 62 | $item = $(this.group[i]); 63 | $parent = $item.parent().parent(); 64 | $.data(this.group[i], "icr-parent", $parent); 65 | 66 | this.presetChecked(this.group[i]); 67 | this.presetDisabled(this.group[i]); 68 | } 69 | 70 | this.$group.on("change", function () { 71 | self.change(this); 72 | }); 73 | 74 | this.$group.on("focus", function () { 75 | self.focus(this); 76 | }); 77 | 78 | this.$group.on("blur", function () { 79 | self.blur(this); 80 | }); 81 | 82 | // Trace input "disabled" attribute mutation 83 | // Only for modern browsers. IE11+ 84 | // To add cross browser support, install this: 85 | // https://github.com/megawac/MutationObserver.js 86 | if (window.MutationObserver) { 87 | this.setUpObserver(); 88 | } 89 | }, 90 | 91 | setUpObserver: function () { 92 | var self = this, 93 | node, 94 | i; 95 | 96 | this.observer = new MutationObserver(function (mutations) { 97 | mutations.forEach(function (mutation) { 98 | node = mutation.target; 99 | 100 | if (mutation.attributeName === "disabled") { 101 | self.toggle(self.getParent(node), node.disabled, "disabled"); 102 | } 103 | }); 104 | }); 105 | 106 | for (i = 0; i < this.group.length; i++) { 107 | this.observer.observe(this.group[i], { 108 | attributes: true 109 | }); 110 | } 111 | }, 112 | 113 | destroy: function () { 114 | this.$group.off(); 115 | 116 | if (this.observer) { 117 | this.observer.disconnect(); 118 | this.observer = null; 119 | } 120 | }, 121 | 122 | presetChecked: function (node) { 123 | if (node.checked) { 124 | this.toggle(this.getParent(node), true, "checked"); 125 | 126 | if (this.type === "radio") { 127 | this.old = node; 128 | } 129 | } 130 | }, 131 | 132 | presetDisabled: function (node) { 133 | if (node.disabled) { 134 | this.toggle(this.getParent(node), true, "disabled"); 135 | } 136 | }, 137 | 138 | change: function (node) { 139 | this.toggle(this.getParent(node), node.checked, "checked"); 140 | 141 | if (this.type === "radio" && this.old && this.old !== node) { 142 | this.toggle(this.getParent(this.old), this.old.checked, "checked"); 143 | } 144 | 145 | this.old = node; 146 | }, 147 | 148 | focus: function (node) { 149 | this.toggle(this.getParent(node), true, "focused"); 150 | }, 151 | 152 | blur: function (node) { 153 | this.toggle(this.getParent(node), false, "focused"); 154 | }, 155 | 156 | toggle: function ($node, state, class_name) { 157 | if (state) { 158 | $node.addClass(class_name); 159 | } else { 160 | $node.removeClass(class_name); 161 | } 162 | }, 163 | 164 | getParent: function (node) { 165 | return $.data(node, "icr-parent"); 166 | }, 167 | 168 | // auto transform code to correct layout 169 | // VERY SLOW(!) for lazy developers 170 | // to avoid this, use recommended html layout 171 | createHTML: function () { 172 | var tpl = 173 | '', 178 | 179 | classes = [], 180 | types = [], 181 | names = [], 182 | values = [], 183 | texts = [], 184 | checked_list = [], 185 | disabled_list = [], 186 | nc = [], 187 | self = this; 188 | 189 | var getTextParent = function ($label) { 190 | var label = $label[0], 191 | queue = [], 192 | nodes = label.childNodes, 193 | cur, text, html, 194 | start, end, i; 195 | 196 | for (i = 0; i < nodes.length; i++) { 197 | queue.push(nodes[i]); 198 | } 199 | 200 | while (queue.length) { 201 | cur = queue[0]; 202 | 203 | if (cur.nodeType === 3) { 204 | text = cur.nodeValue.trim(); 205 | 206 | if (text) { 207 | break; 208 | } 209 | } else if (cur.nodeType === 1) { 210 | nodes = cur.childNodes; 211 | 212 | for (i = 0; i < nodes.length; i++) { 213 | queue.push(nodes[i]); 214 | } 215 | } 216 | 217 | Array.prototype.splice.call(queue, 0, 1); 218 | } 219 | 220 | html = cur.parentNode.innerHTML; 221 | 222 | if (html.indexOf('= 0) { 223 | start = html.indexOf(''); 226 | html = html.slice(end + 1).trim(); 227 | } 228 | 229 | return html; 230 | }; 231 | 232 | var getHTML = function (i) { 233 | var tp = tpl.replace(/\{class_list\}/, classes[i]); 234 | tp = tp.replace(/\{type\}/g, types[i]); 235 | tp = tp.replace(/\{name\}/, names[i]); 236 | tp = tp.replace(/\{value\}/, values[i]); 237 | tp = tp.replace(/\{text\}/, texts[i]); 238 | 239 | if (disabled_list[i]) { 240 | tp = tp.replace(/\{disabled\}/, "disabled"); 241 | } else { 242 | tp = tp.replace(/\{disabled\}/, ""); 243 | } 244 | 245 | if (checked_list[i]) { 246 | tp = tp.replace(/\{checked\}/, "checked"); 247 | } else { 248 | tp = tp.replace(/\{checked\}/, ""); 249 | } 250 | 251 | return tp; 252 | }; 253 | 254 | this.$group.each(function (i) { 255 | var $label, 256 | $next, 257 | $cur = $(this), 258 | class_list = $cur.prop("className"), 259 | type = $cur.prop("type"), 260 | name = $cur.prop("name"), 261 | val = $cur.prop("value"), 262 | checked = $cur.prop("checked"), 263 | disabled = $cur.prop("disabled"), 264 | id = $cur.prop("id"), 265 | html; 266 | 267 | classes.push(class_list); 268 | types.push(type); 269 | names.push(name); 270 | values.push(val); 271 | checked_list.push(checked); 272 | disabled_list.push(disabled); 273 | 274 | if (id) { 275 | $label = $("label[for='" + id + "']"); 276 | } else { 277 | $label = $cur.closest("label"); 278 | } 279 | 280 | texts.push(getTextParent($label)); 281 | 282 | html = getHTML(i); 283 | $label.after(html); 284 | $next = $label.next(); 285 | nc.push($next[0]); 286 | 287 | $cur.remove(); 288 | $label.remove(); 289 | }); 290 | 291 | this.$group = $(nc).find("input"); 292 | this.$group.each(function (i) { 293 | self.group[i] = this; 294 | collection[names[0]][i] = this; 295 | }); 296 | 297 | this.prepare(); 298 | } 299 | }; 300 | 301 | $.fn.ionCheckRadio = function () { 302 | var i, 303 | local = [], 304 | input, 305 | name; 306 | 307 | var warn = function (text) { 308 | window.console && window.console.warn && window.console.warn(text); 309 | }; 310 | 311 | for (i = 0; i < this.length; i++) { 312 | input = this[i]; 313 | name = input.name; 314 | 315 | if (input.type !== "radio" && input.type !== "checkbox" || !name) { 316 | warn("Ion.CheckRadio: Some inputs have wrong type or absent name attribute!"); 317 | continue; 318 | } 319 | 320 | collection[name] = { 321 | type: input.type, 322 | content: [] 323 | }; 324 | local.push(input); 325 | } 326 | 327 | for (i = 0; i < local.length; i++) { 328 | input = local[i]; 329 | name = input.name; 330 | 331 | collection[name].content.push(input); 332 | } 333 | 334 | for (i in collection) { 335 | if (instances[i]) { 336 | instances[i].destroy(); 337 | instances[i] = null; 338 | } 339 | 340 | instances[i] = new IonCheckRadio(collection[i]); 341 | } 342 | }; 343 | 344 | })(jQuery, window); 345 | -------------------------------------------------------------------------------- /js/ion.checkRadio.min.js: -------------------------------------------------------------------------------- 1 | // Ion.CheckRadio | version 2.0.0 | https://github.com/IonDen/ion.CheckRadio 2 | ;(function(f,h){if(!f.fn.ionCheckRadio){String.prototype.trim||function(){var a=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(a,"")}}();var k={},l={},n=function(a){this.group=a.content;this.type=a.type;this.$group=f(this.group);this.observer=this.old=null;this.init()};n.prototype={init:function(){this.$group.eq(0).hasClass("icr-input")?this.prepare():this.createHTML()},prepare:function(){var a=this,e,b;for(b=0;b"),b=b.slice(d+1).trim());return b};this.$group.each(function(g){var m,d=f(this);m=d.prop("className");var c=d.prop("type"),k=d.prop("name"),p=d.prop("value"),v=d.prop("checked"),w=d.prop("disabled"),t=d.prop("id");a.push(m);e.push(c);b.push(k); 7 | q.push(p);l.push(v);n.push(w);m=t?f("label[for='"+t+"']"):d.closest("label");h.push(u(m));c=''.replace(/\{class_list\}/,a[g]);c=c.replace(/\{type\}/g,e[g]);c=c.replace(/\{name\}/,b[g]);c=c.replace(/\{value\}/,q[g]);c=c.replace(/\{text\}/,h[g]); 8 | c=n[g]?c.replace(/\{disabled\}/,"disabled"):c.replace(/\{disabled\}/,"");c=l[g]?c.replace(/\{checked\}/,"checked"):c.replace(/\{checked\}/,"");m.after(c);g=m.next();r.push(g[0]);d.remove();m.remove()});this.$group=f(r).find("input");this.$group.each(function(a){p.group[a]=this;k[b[0]][a]=this});this.prepare()}};f.fn.ionCheckRadio=function(){var a,e=[],b,f;for(a=0;a=1.8" 34 | }, 35 | "license": "MIT", 36 | "ignore": [ 37 | ".idea", 38 | "bower.json", 39 | "ion-checkRadio.jquery.json", 40 | "readme.ru.md" 41 | ], 42 | 43 | "spm": { 44 | "main": "js/ion.checkRadio.js", 45 | "dependencies": { 46 | "jquery": "1.11.3" 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![ion.checkRadio](_tmp/logo-ion-check-radio.png) 2 | 3 | > English description | Описание на русском 4 | 5 | jQuery-plugin for styling checkboxes and radio-buttons. With skin support. 6 | 7 | *** 8 | 9 | * Version: 2.0.0 10 | * Project page and demos 11 | * Download ZIP 12 | 13 | ## Description 14 | * Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization. 15 | * With skin support 16 | * Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+) 17 | * Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.). 18 | * Ion.CheckRadio freely distributed under terms of MIT licence. 19 | 20 | ## Demo Page 21 | 22 | ## Dependencies 23 | * jQuery 1.9+ 24 | 25 | ## Using script 26 | 27 | Import this libraries: 28 | * jQuery 29 | * ion.checkRadio.min.js 30 | 31 | And CSS: 32 | * normalize.min.css - desirable if you have not yet connected one 33 | * ion.checkRadio.css 34 | * ion.checkRadio.skinName.css 35 | 36 | Don't forget about skin image: 37 | * icr-skinName-skin.png - skin sprite 38 | * Or use included PSD file and draw your own skin 39 | 40 | ## Install with bower 41 | * bower install ion-checkradio 42 | 43 | ## Install with npm 44 | * npm install ion-checkradio 45 | 46 | ## Install with spm [![](http://spmjs.io/badge/ion-checkradio)](http://spmjs.io/package/ion-checkradio) 47 | * spm install ion-checkradio 48 | 49 | ### Recommended HTML 50 | ```html 51 | Radio-buttons: 52 | 53 | 58 | 63 | 64 | Checkboxes: 65 | 70 | 75 | ``` 76 | 77 | 78 | ### Regular HTML 79 | ```html 80 | Create checkboxes and/or radio-buttons: 81 | 82 | 83 | 84 | 85 | 86 | 87 | or 88 | 89 | 90 | 91 | 92 | 93 | 94 | or drop some checkboxes: 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | ``` 104 | 105 | ### Initialize slider 106 | ```javascript 107 | // all on the page: 108 | $("input[type='radio'], input[type='checkbox']").ionCheckRadio(); 109 | 110 | // or specific only: 111 | $(".my_inputs").ionCheckRadio(); 112 | ``` 113 | 114 | Success! 115 | 116 | 117 | ### Update history 118 | 119 | *** 120 | 121 | #### Support Ion-series plugins development: 122 | 123 | * Donate through Pledgie service: [![](https://pledgie.com/campaigns/25694.png?skin_name=chrome)](https://pledgie.com/campaigns/25694) 124 | 125 | * Donate direct to my Paypal account: https://www.paypal.me/IonDen 126 | 127 | * Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku 128 | -------------------------------------------------------------------------------- /readme.ru.md: -------------------------------------------------------------------------------- 1 | ![ion.checkRadio](_tmp/logo-ion-check-radio.png) 2 | 3 | > English description | Описание на русском 4 | 5 | jQuery-плагин для стилизации чекбоксов и радио-батонов. С поддержкой скинов 6 | 7 | *** 8 | 9 | * Версия: 2.0.0 10 | * Сайт проекта и демо 11 | * Скачать ZIP-архив 12 | 13 | ## Описание 14 | * Ion.CheckRadio — простой и понятный плагин для стилизации чекбоксов и радио-батонов. 15 | * С поддержкой скинов 16 | * Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+) 17 | * Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.). 18 | * Репозиторий на GitHub. 19 | * Плагин свободно распространяется на условиях лицензии MIT. 20 | 21 | ## Демо страница 22 | 23 | ## Зависимости 24 | * jQuery 1.9+ 25 | 26 | ## Подключение 27 | 28 | Подключаем библиотеки: 29 | * jQuery 30 | * ion.checkRadio.min.js 31 | 32 | CSS: 33 | * normalize.min.css - елательно, если он у вас еще не подключен 34 | * ion.checkRadio.css 35 | * ion.checkRadio.skinName.css 36 | 37 | Не забываем про картинки скина: 38 | * icr-skinName-skin.png - спрайт скина 39 | * Либо воспользуйтесь вложенным в архив PSD файлом, и нарисуйте собственный скин 40 | 41 | 42 | ## Устанавливаем с помощью bower 43 | * bower install ion-checkradio 44 | 45 | ## Устнавливаем с помощью npm 46 | * npm install ion-checkradio 47 | 48 | ## Устанавливаем с помощью spm [![](http://spmjs.io/badge/ion-checkradio)](http://spmjs.io/package/ion-checkradio) 49 | * spm install ion-checkradio 50 | 51 | 52 | ### Рекомендуемая разметка 53 | ```html 54 | Радио-батоны: 55 | 56 | 61 | 66 | 67 | Чекбоксы: 68 | 73 | 78 | ``` 79 | 80 | 81 | ### Обычная разметка 82 | ```html 83 | Создаем чекбоксы и/или радио-батоны: 84 | 85 | 86 | 87 | 88 | 89 | 90 | или так: 91 | 92 | 93 | 94 | 95 | 96 | 97 | или вот еще чекбоксиков: 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | ``` 107 | 108 | ### Инициализируем плагин 109 | ```javascript 110 | // все на странице: 111 | $("input[type='radio'], input[type='checkbox']").ionCheckRadio(); 112 | 113 | // конкретную группу: 114 | $(".my_inputs").ionCheckRadio(); 115 | ``` 116 | 117 | Profit! 118 | 119 | 120 | ### История обновлений 121 | 122 | *** 123 | 124 | #### Поддержите разработку плагинов серии Ion: 125 | 126 | * Пожертвовать через сервис Pledgie: [![](https://pledgie.com/campaigns/25694.png?skin_name=chrome)](https://pledgie.com/campaigns/25694) 127 | 128 | * Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen 129 | 130 | * Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku 131 | --------------------------------------------------------------------------------