Removed 'reset' and added comments.

README.md

@@ -1,5 +1,4 @@
-Custom Form Elements
-====================
+# Custom Form Elements
 
 A lightweight custom form styler for radio, checkbox and select elements. Radio and Checkboxes have four states rather than just two.
 
@@ -9,100 +8,129 @@ This project lives on GitHub: [http://github.com/karbassi/Custom-Form-Elements](
 
 This whole project is licensed under the MIT License: [http://opensource.org/licenses/mit-license.php](http://opensource.org/licenses/mit-license.php)
 
-Requirements
--------------
+## Tested Environments
 
-* Requires [jQuery 1.4.2+](http://jquery.com)
-* All `form` elements require `id`s.
+### Desktop
+
+* Firefox 3.5+
+* Chrome 10+
+
+### Mobile
+
+* iPhone 4 w/ iOS 5.1
+* iPad w/ iOS 5.1
 
-Note
------
-
-* Call once your document is loaded. If you are dynamically loading content, use the `repaint` function.
-* The `input` file should not be wrapped with the `label` tag.
-* The sprite order from top to bottom is:
-  1. unchecked
-  2. unchecked-mousedown
-  3. checked
-  4. checked-mousedown
-* `checkboxHeight` and `radioHeight` should all be set to 1/4th the sprite height.
-* `selectWidth` is the width of the select box image.
-* Remember that `select` elements cannot be `readonly`; they can be `disabled` though.
-* As of jQuery 1.4.2, there is an [open bug](http://dev.jquery.com/ticket/7071) pertaining to jQuery, VML, and IE. Version 0.5+ of this script has a work around.
-
-
-Example
---------
-
-CSS
-===
-    .radio,
-    .checkbox,
-    .select {
-        display: inline-block;
-        cursor: pointer;
-        background-position: 0 0;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
-    }
-
-    .radio {
-        background-image: url(radios.png);
-        width: 12px;
-        height: 11px;
-    }
-
-    .checkbox {
-        background-image: url(checkbox.png);
-        padding: 0;
-        width: 12px;
-        height: 12px;
-    }
-
-    .select {
-        background-image: url(select-short.png);
-        color: #8A7967;
-        font: 10px/21px arial,sans-serif;
-        overflow: hidden;
-        position: absolute;
-        padding: 0 24px 0 11px;
-        width: 126px;
-        height: 21px;
-    }
-
-
-Javascript
-==========
-
-    jQuery(document).ready(function($) {
-
-        // Extremely minimum version:
-        // Default settings apply. All input/select tags with a class of 'styled' are affected.
-        var cf = new CustomFormElements();
-
-        // Minimum version:
-        var cf = new CustomFormElements({
-            checkboxHeight: 12,
-            radioHeight: 11,
-            selectWidth: 161
-        });
-
-        // All options
-        var cf = new CustomFormElements({
-            styled: 'styled',
-            uniqueClassName: 'customFormElement',
-            checkboxHeight: 12,
-            radioHeight: 11,
-            selectWidth: 161
-        });
-
-        // If you need to reinitialize dynamically added form elements:
-        cf.repaint();
+## Requirements
 
+* Requires [jQuery 1.7+](http://jquery.com)
+* All `form` elements require `id`s.
+
+## Note
+
+* Call once your document is loaded.
+* If you are dynamically loading content, use the `repaint` function.
+
+## Demo
+
+[http://karbassi.github.com/Custom-Form-Elements/demo.html](http://karbassi.github.com/Custom-Form-Elements/demo.html)
+
+## Example
+
+### CSS
+
+```css
+.cfe-radio,
+.cfe-checkbox,
+.cfe-select,
+.cfe-file {
+    display: inline-block;
+    cursor: pointer;
+    background: 0 0 no-repeat;
+}
+
+.cfe-radio,
+.cfe-checkbox {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+.cfe-radio {
+    background: url(radios.png);
+    width: 12px;
+    height: 11px;
+}
+
+.cfe-radio.cfe-state-0 { background-position: 0 0; }
+.cfe-radio.cfe-state-1 { background-position: 0 -11px; }
+.cfe-radio.cfe-state-2 { background-position: 0 -22px; }
+.cfe-radio.cfe-state-3 { background-position: 0 -33px; }
+
+.cfe-checkbox {
+    background: url(checkbox.png);
+    width: 12px;
+    height: 12px;
+    padding: 0;
+}
+
+.cfe-checkbox.cfe-state-0 { background-position: 0 0; }
+.cfe-checkbox.cfe-state-1 { background-position: 0 -12px; }
+.cfe-checkbox.cfe-state-2 { background-position: 0 -24px; }
+.cfe-checkbox.cfe-state-3 { background-position: 0 -36px; }
+
+.cfe-select,
+.cfe-file {
+    font: 10px/21px arial,sans-serif;
+    color: #8A7967;
+    overflow: hidden;
+    position: absolute;
+    padding: 0 24px 0 11px;
+    width: 126px;
+    height: 21px;
+}
+
+.cfe-select {
+    background: url(select.png);
+}
+
+select.cfe-styled {
+    position: relative;
+    width: 161px;
+}
+
+.cfe-file {
+    background: url(file.png);
+}
+
+/* Disabled style */
+.cfe-disabled,
+.cfe-readonly {
+    /* IE 8 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+
+    /* IE 5-7 */
+    filter: alpha(opacity=50);
+
+    /* CSS3 */
+    opacity: 0.5;
+}
+```
+
+### Javascript
+
+```javascript
+jQuery(document).ready(function($) {
+
+    // Default settings apply.
+    // All input/select tags with a class of 'cfe-styled' are affected.
+    var cf = new CustomFormElements();
+
+    // All options
+    var cf = new CustomFormElements({
+        cssClass: 'styled'
     });
 
-Demo
------
+    // If you need to reinitialize dynamically added form elements:
+    cf.repaint();
+
+});
+```
 
-[http://karbassi.github.com/Custom-Form-Elements/](http://karbassi.github.com/Custom-Form-Elements/)

src/custom-form-elements.js → custom-form-elements.js

@@ -1,5 +1,5 @@
 /*
-Custom Form Elements v0.12b
+Custom Form Elements v0.12
 
 http://github.com/karbassi/Custom-Form-Elements
 
@@ -10,12 +10,10 @@ Requires jQuery v1.7+
 Note:
     - Call once your document is loaded.
     - Custom `span` elements have four states:
-      - state-0: unchecked
-      - state-1: unchecked-mousedown
-      - state-2: checked
-      - state-3: checked-mousedown
-    - Remember that 'select' elements cannot be 'readonly'; they can be 'disabled' though.
-    - The 'input' file should not be wrapped with the 'label' tag.
+        - state-0: unchecked
+        - state-1: unchecked-mousedown
+        - state-2: checked
+        - state-3: checked-mousedown
 
 Example:
 
@@ -80,7 +78,7 @@ Example:
             ).each(function(){
 
                 var existing = $('#cfe-' + this.id + '.cfe');
-                if (existing.length > 0) {
+                if (existing.length) {
                     existing.remove();
                 }
 
@@ -136,7 +134,8 @@ Example:
 
             // Radio and Checkboxes
             $('.cfe-radio, .cfe-checkbox')
-                //
+
+                // Filter out any disabled/readonly items
                 .not('.cfe-disabled, .cfe-readonly')
 
                 // Remove old binds
@@ -164,20 +163,25 @@ Example:
 
             // Handle label clicks
             $('label.cfe')
+
                 // Remove old binds
                 .off('.cfe')
 
-                // New binds
+                // Prevent normal label event
                 .on('click.cfe', function(e){
                     e.preventDefault();
                 })
+
+                // Set mousedown state
                 .on('mousedown.cfe', function(e){
                     var el = document.getElementById('cfe-' + this.getAttribute('for'));
 
                     if (e.target !== el && el.className.indexOf('cfe-disabled') < 0) {
                         self.mousedown(el, e);
                     }
                 })
+
+                // Set mouseup state
                 .on('mouseup.cfe', function(e){
                     var el = document.getElementById('cfe-' + this.getAttribute('for'));
 
@@ -188,13 +192,6 @@ Example:
             ;
         },
 
-        reset: function(){
-            var self = this;
-            $('.' + self.options.cssClass).each(function() {
-                self.setState( document.getElementById('cfe-' + this.id), 0);
-            });
-        },
-
         mousedown: function(el, e) {
             if (!(e.isTrigger || e.which === 1)) { return; } // Only respond to left mouse clicks