Permalink
Browse files

Removed 'reset' and added comments.

  • Loading branch information...
1 parent 0cd862a commit 9dc9cd5c4b638b74f33ea980c3ff5f31c8859e80 @karbassi committed Apr 13, 2012
View
214 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/)
@@ -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
Oops, something went wrong.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Deleted file not rendered
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Deleted file not rendered
Oops, something went wrong.

0 comments on commit 9dc9cd5

Please sign in to comment.