- init

ibotplus · Mar 24, 2017 · 27e8ab0 · 27e8ab0
commit 27e8ab0
Show file tree

Hide file tree

Showing 8 changed files with 537 additions and 0 deletions.
diff --git a/MIT-License.txt b/MIT-License.txt
@@ -0,0 +1,21 @@
+Copyright 2013 Selvakumar Arumugam
+http://meetselva.github.io/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+Checkbox/Radio 插件
+=================================================
+    用于自定义checkbox/radio样式，支持IE8+，chrome，firefox
+
+使用方法
+-------------------------------------------------
+该插件依赖于 [jquery](http://jquery.com/)，[attrchange](http://meetselva.github.io/)，attrchange插件无需独立引入，只引入jquery.kbase.checkbox.js即可
+
+```
+<script src="../js/jquery.kbase.checkbox.js" type="text/javascript"></script>
+```
+
+初始化
+--------------------------------------------------
+	Dom加载完毕后调用 $(selector).kbsElem(); 控件只会初始化type=checkbox 和 type=radio 的元素
+```
+$(':checkbox').kbsElem();
+$(':radio').kbsElem();
+$('#btnRadio').kbsElem();   //不会做初始化
+```
+Demo
+--------------------------------------------------
+[example/checkbox.html]()
diff --git a/example/checkbox.html b/example/checkbox.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>checkbox-demo</title>
+        <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
+        <script src="../js/jquery.kbase.checkbox.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <input name="opt" type="checkbox" value="1" alt="Apple" _kbs-resid="apple">苹果
+        <input name="opt" type="checkbox" value="2">葡萄
+        <input name="opt" type="checkbox" value="3" text="梨子">
+        <input name="opt" type="checkbox" value="4">
+        <button id="btnCheckbox">查看选中的结果</button>
+        <br>
+        <input type="radio" name="Fruit" value="1" alt="Apple" _kbs-resid="apple">苹果
+        <input type="radio" name="Fruit" value="2" text="葡萄">
+        <input type="radio" name="Fruit" value="3" text="梨子">
+        <button id="btnRadio">查看选中的结果</button>
+        <br>
+        <input type="checkbox" id="btnSelAll" value="">全选/全不选
+        <hr/>
+        <div id="resultPanel" style="font-size: 12px;color:#0090ff;"></div>
+
+
+        <script type="text/javascript">
+            $(':checkbox').kbsElem();
+            $(':radio').kbsElem();
+            $('#btnRadio').kbsElem();   //不会做初始化
+            $('#btnCheckbox').click(function(){
+                //console.log($(':checkbox:checked'));
+                $('#resultPanel').empty();
+                $('#resultPanel').append('checked number is ' + $(':checkbox:checked').length + '<br>');
+                $(':checkbox:checked').each(function(i, item){
+                    $('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' + $(item).val() + '<br>');
+                });
+            });
+            $('#btnRadio').click(function(){
+                //console.log($(':radio:checked'));
+                $('#resultPanel').empty();
+                $('#resultPanel').append('checked number is ' + $(':radio:checked').length + '<br>');
+                var item = $(':radio:checked');
+                if (item.length>0){
+                    $('#resultPanel').append('[text]' + $(item).attr('text') + ' [value]' +$(item).val() + '<br>');
+                }
+            });
+            $('#btnSelAll').click(function(){
+                if ($(this).attr('checked')){
+                    $('input[name="opt"]').attr('checked', 'checked');
+                }else{
+                    $('input[name="opt"]').removeAttr('checked');
+                }
+            });
+        </script>
+    </body>
+</html>
diff --git a/js/attrchange.js b/js/attrchange.js
@@ -0,0 +1,124 @@
+/*
+A simple jQuery function that can add listeners on attribute change.
+http://meetselva.github.io/attrchange/
+
+About License:
+Copyright (C) 2013-2014 Selvakumar Arumugam
+You may use attrchange plugin under the terms of the MIT Licese.
+https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
+ */
+(function($) {
+	function isDOMAttrModifiedSupported() {
+		var p = document.createElement('p');
+		var flag = false;
+
+		if (p.addEventListener) {
+			p.addEventListener('DOMAttrModified', function() {
+				flag = true
+			}, false);
+		} else if (p.attachEvent) {
+			p.attachEvent('onDOMAttrModified', function() {
+				flag = true
+			});
+		} else { return false; }
+		p.setAttribute('id', 'target');
+		return flag;
+	}
+
+	function checkAttributes(chkAttr, e) {
+		if (chkAttr) {
+			var attributes = this.data('attr-old-value');
+
+			if (e.attributeName.indexOf('style') >= 0) {
+				if (!attributes['style'])
+					attributes['style'] = {}; //initialize
+				var keys = e.attributeName.split('.');
+				e.attributeName = keys[0];
+				e.oldValue = attributes['style'][keys[1]]; //old value
+				e.newValue = keys[1] + ':'
+						+ this.prop("style")[$.camelCase(keys[1])]; //new value
+				attributes['style'][keys[1]] = e.newValue;
+			} else {
+				e.oldValue = attributes[e.attributeName];
+				e.newValue = this.attr(e.attributeName);
+				attributes[e.attributeName] = e.newValue;
+			}
+
+			this.data('attr-old-value', attributes); //update the old value object
+		}
+	}
+
+	//initialize Mutation Observer
+	var MutationObserver = window.MutationObserver
+			|| window.WebKitMutationObserver;
+
+	$.fn.attrchange = function(a, b) {
+		if (typeof a == 'object') {//core
+			var cfg = {
+				trackValues : false,
+				callback : $.noop
+			};
+			//backward compatibility
+			if (typeof a === "function") { cfg.callback = a; } else { $.extend(cfg, a); }
+
+			if (cfg.trackValues) { //get attributes old value
+				this.each(function(i, el) {
+					var attributes = {};
+					for ( var attr, i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
+						attr = attrs.item(i);
+						attributes[attr.nodeName] = attr.value;
+					}
+					$(this).data('attr-old-value', attributes);
+				});
+			}
+
+			if (MutationObserver) { //Modern Browsers supporting MutationObserver
+				var mOptions = {
+					subtree : false,
+					attributes : true,
+					attributeOldValue : cfg.trackValues
+				};
+				var observer = new MutationObserver(function(mutations) {
+					mutations.forEach(function(e) {
+						var _this = e.target;
+						//get new value if trackValues is true
+						if (cfg.trackValues) {							
+							e.newValue = $(_this).attr(e.attributeName);
+						}						
+						if ($(_this).data('attrchange-status') === 'connected') { //execute if connected
+							cfg.callback.call(_this, e);
+						}
+					});
+				});
+
+				return this.data('attrchange-method', 'Mutation Observer').data('attrchange-status', 'connected')
+						.data('attrchange-obs', observer).each(function() {
+							observer.observe(this, mOptions);
+						});
+			} else if (isDOMAttrModifiedSupported()) { //Opera
+				//Good old Mutation Events
+				return this.data('attrchange-method', 'DOMAttrModified').data('attrchange-status', 'connected').on('DOMAttrModified', function(event) {
+					if (event.originalEvent) { event = event.originalEvent; }//jQuery normalization is not required 
+					event.attributeName = event.attrName; //property names to be consistent with MutationObserver
+					event.oldValue = event.prevValue; //property names to be consistent with MutationObserver
+					if ($(this).data('attrchange-status') === 'connected') { //disconnected logically
+						cfg.callback.call(this, event);
+					}
+				});
+			} else if ('onpropertychange' in document.body) { //works only in IE		
+				return this.data('attrchange-method', 'propertychange').data('attrchange-status', 'connected').on('propertychange', function(e) {
+					e.attributeName = window.event.propertyName;
+					//to set the attr old value
+					checkAttributes.call($(this), cfg.trackValues, e);
+					if ($(this).data('attrchange-status') === 'connected') { //disconnected logically
+						cfg.callback.call(this, e);
+					}
+				});
+			}
+			return this;
+		} else if (typeof a == 'string' && $.fn.attrchange.hasOwnProperty('extensions') &&
+				$.fn.attrchange['extensions'].hasOwnProperty(a)) { //extensions/options
+			return $.fn.attrchange['extensions'][a].call(this, b);
+		}
+	}
+})(jQuery);
diff --git a/js/attrchange_ext.js b/js/attrchange_ext.js
@@ -0,0 +1,97 @@
+/*
+An extension for attrchange jQuery plugin
+http://meetselva.github.io/attrchange/
+
+About License:
+Copyright (C) 2013-2014 Selvakumar Arumugam
+You may use attrchange ext plugin under the terms of the MIT Licese.
+https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
+ */
+$.fn.attrchange.extensions = { /*attrchange option/extension*/
+	disconnect: function (o) {
+		if (typeof o !== 'undefined' && o.isPhysicalDisconnect) {
+			return this.each(function() {
+				var attrchangeMethod = $(this).data('attrchange-method');
+				if (attrchangeMethod == 'propertychange' || attrchangeMethod == 'DOMAttrModified') {
+					$(this).off(attrchangeMethod);
+				} else if (attrchangeMethod == 'Mutation Observer') {
+					$(this).data('attrchange-obs').disconnect();
+				} else if (attrchangeMethod == 'polling') {
+					clearInterval($(this).data('attrchange-polling-timer'));
+				}
+			}).removeData(['attrchange-method', 'attrchange-status']);
+		} else { //logical disconnect
+			return this.data('attrchange-status', 'disconnected'); //set a flag that prevents triggering callback onattrchange
+		}
+	},
+	remove: function (o) {
+		return  $.fn.attrchange.extensions['disconnect'].call(this, {isPhysicalDisconnect: true});
+	},
+	getProperties: function (o) {
+		var attrchangeMethod = $(this).data('attrchange-method');
+		var pollInterval = $(this).data('attrchange-pollInterval');
+		return {
+			method: attrchangeMethod,
+			isPolling: (attrchangeMethod == 'polling'),
+			pollingInterval: (typeof pollInterval === 'undefined')?0:parseInt(pollInterval, 10),
+			status: (typeof attrchangeMethod === 'undefined')?'removed': $(this).data('attrchange-status')
+		}
+	},
+	reconnect: function (o) {//reconnect possible only when there is a logical disconnect
+		return this.data('attrchange-status', 'connected');
+	},
+	polling: function (o) {
+		if (o.hasOwnProperty('isComputedStyle') && o.isComputedStyle == 'true') { /* extensive and slow - polling to check on computed style properties */
+			return this.each(function(i, _this) {
+				if (!o.hasOwnProperty('properties') ||
+						Object.prototype.toString.call(o.properties) !== '[object Array]' ||
+							o.properties.length == 0) { return false; } //return if no properties found
+				var attributes = {}; //store computed properties
+				for (var i = 0; i < o.properties.length; i++) {
+					attributes[o.properties[i]] = $(this).css(o.properties[i]);
+				}			
+				var _this = this;
+				$(this).data('attrchange-polling-timer', setInterval(function () {
+					var changes = {}, hasChanges = false; // attrName: { oldValue: xxx, newValue: yyy}						
+					for (var comuptedVal, i = 0; i < o.properties.length; i++){
+						comuptedVal = $(_this).css(o.properties[i]);
+						if (attributes[o.properties[i]] !== comuptedVal) {
+							hasChanges = true;
+							changes[o.properties[i]] = {oldValue: attributes[o.properties[i]], newValue: comuptedVal};
+							attributes[o.properties[i]] = comuptedVal //add the attribute to the orig						
+						}
+					}					
+					if (hasChanges && $(_this).data('attrchange-status') === 'connected') { //disconnected logically
+						o.callback.call(_this, changes);
+					}
+				}, (o.pollInterval)?o.pollInterval: 1000)).data('attrchange-method', 'polling').data('attrchange-pollInterval', o.pollInterval).data('attrchange-status', 'connected');
+			});
+		} else {
+			return this.each(function(i, _this) { /* this one is programmatic polling */
+				var attributes = {};
+				for (var attr, i=0, attrs=_this.attributes, l=attrs.length; i<l; i++){
+					attr = attrs.item(i);
+					attributes[attr.nodeName] = attr.nodeValue;
+				}						
+				$(_this).data('attrchange-polling-timer', setInterval(function () {
+					var changes = {}, hasChanges = false; // attrName: { oldValue: xxx, newValue: yyy}						
+					for (var attr, i=0, attrs=_this.attributes, l=attrs.length; i<l; i++){
+						attr = attrs.item(i);							
+						if (attributes.hasOwnProperty(attr.nodeName) &&
+								attributes[attr.nodeName] != attr.nodeValue) { //check the values
+							changes[attr.nodeName] = {oldValue: attributes[attr.nodeName], newValue: attr.nodeValue};
+							hasChanges = true;
+						} else if (!attributes.hasOwnProperty(attr.nodeName)) { //new attribute
+							changes[attr.nodeName] = {oldValue: '', newValue: attr.nodeValue};
+							hasChanges = true;
+						}
+						attributes[attr.nodeName] = attr.nodeValue; //add the attribute to the orig
+					}
+					if (hasChanges && $(_this).data('attrchange-status') === 'connected') { //disconnected logically
+						o.callback.call(_this, changes);
+					}
+				}, (o.pollInterval)?o.pollInterval: 1000)).data('attrchange-method', 'polling').data('attrchange-pollInterval', o.pollInterval).data('attrchange-status', 'connected');
+			});
+		}
+	}
+}
diff --git a/js/jquery.kbase.checkbox.css b/js/jquery.kbase.checkbox.css
@@ -0,0 +1,56 @@
+.kbs-checkbox-item,.kbs-radio-item {
+	position:relative;
+	display:inline-block;
+	margin-right:10px;
+	height:16px;
+}
+.kbs-checkbox-input,.kbs-radio-input{
+	position:absolute;
+	top:-9999px;
+	left:-9999px;
+}
+.kbs-checkbox-item .kbs-checkbox-label,.kbs-radio-item .kbs-radio-label{
+	display:inline-block;
+	cursor:pointer;
+}
+.kbs-checkbox-label .kbs-checkbox-text,.kbs-radio-label .kbs-radio-text{
+	float:left;
+	height:15px;
+	line-height:15px;
+	color:#444;
+	font-style: normal;
+}
+.kbs-checkbox-label .kbs-checkbox-icon{
+	float:left;
+	margin-right:5px;
+	background:url(radio_checkbox.png) no-repeat;
+	background-position: -83px -10px;
+	width:15px;
+	height:15px;
+}
+.kbs-checkbox-label.on .kbs-checkbox-icon{
+	background-position: -19px -10px;
+}
+.kbs-checkbox-label .kbs-checkbox-icon:hover{
+	background-position: -115px -10px;
+}
+.kbs-checkbox-label.on .kbs-checkbox-icon:hover{
+	background-position: -51px -10px;
+}
+.kbs-radio-label .kbs-radio-icon{
+	float:left;
+	margin-right:5px;
+	background: url(radio_checkbox.png) no-repeat;
+	background-position: -83px -41px;
+	width:15px;
+	height:15px;
+}
+.kbs-radio-label.on .kbs-radio-icon{
+	background-position:  -19px -41px;
+}
+.kbs-radio-label .kbs-radio-icon:hover{
+	background-position: -115px -41px;
+}
+.kbs-radio-label.on .kbs-radio-icon:hover{
+	background-position: -51px -41px;
+}