Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merging in dev.

  • Loading branch information...
commit 564a9739eb23f1541d0f8a57af3da1d32f68aac8 2 parents 48b46d2 + 9dc9cd5
@karbassi authored
View
213 README.md
@@ -1,5 +1,4 @@
-Custom Form Elements ![Project status](http://stillmaintained.com/karbassi/Custom-Form-Elements.png)
-====================
+# 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,128 @@ 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
-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();
+* iPhone 4 w/ iOS 5.1
+* iPad w/ iOS 5.1
+
+## 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/)
+});
+```
View
294 custom-form-elements.js
@@ -0,0 +1,294 @@
+/*
+Custom Form Elements v0.12
+
+http://github.com/karbassi/Custom-Form-Elements
+
+Written by Ali Karbassi (karbassi.com)
+
+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
+
+Example:
+
+ jQuery(document).ready(function($) {
+
+ // Extremely minimum version:
+ // 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: 'cfe-styled',
+ });
+
+ // If you need to reinitialize dynamically added form elements:
+ cf.repaint();
+
+ });
+
+*/
+
+(function(window, document, $) {
+
+ function CustomFormElements(options) {
+ this.init.call(this, options);
+ }
+
+ CustomFormElements.prototype = {
+ init: function(options) {
+ // Merge options
+ this.options = $.extend({}, CustomFormElements.options, options || {});
+
+ // Create CSS
+ var head = document.getElementsByTagName('head')[0];
+ var style = document.createElement('style');
+ style.type = 'text/css';
+
+ var rules = document.createTextNode(
+ 'input.' + this.options.cssClass + ' { display: none; } ' +
+ 'select.' + this.options.cssClass + ', input.' + this.options.cssClass + '[type=file] { position: relative; display: block; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); z-index: 5; } '
+ );
+
+ if (style.styleSheet) {
+ style.styleSheet.cssText = rules.nodeValue;
+ } else {
+ style.appendChild( rules );
+ }
+
+ head.appendChild( style );
+
+ this.repaint();
+ },
+
+
+ repaint: function(){
+ var self = this;
+
+ $('.' + self.options.cssClass + '[type=checkbox], ' +
+ '.' + self.options.cssClass + '[type=radio], ' +
+ '.' + self.options.cssClass + '[type=file], ' +
+ '.' + self.options.cssClass
+ ).each(function(){
+
+ var existing = $('#cfe-' + this.id + '.cfe');
+ if (existing.length) {
+ existing.remove();
+ }
+
+ // Class Names for the ement
+ var className =
+ [
+ // Plugins unique name
+ 'cfe',
+
+ // Form Element type
+ 'cfe-' + (this.type === 'select-one' ? 'select' : this.type),
+
+ // If the element is checked or not
+ this.type !== 'select-one' && this.type !== 'file' ?
+ 'cfe-' + (this.checked ? 'state-2' : 'state-0'):
+ '',
+
+ // If the element is disabled or not
+ this.disabled ? 'cfe-disabled' : '',
+
+ // If the element is readonly or not
+ this.getAttribute('readonly') ? 'cfe-readonly' : ''
+ ]
+
+ .sort()
+
+ // Combine array into a string with seperator of space.
+ .join(' ')
+
+ // Trim
+ .trim()
+ ;
+
+ // Create the span element
+ var span = document.createElement('span');
+ span.id = 'cfe-' + this.id;
+ span.className = className;
+ span.innerHTML = $(this).find('option:selected').text();
+
+ // Insert before the HTML element
+ this.parentNode.insertBefore(span, this);
+
+ // Set label class
+ $('label[for=' + this.id + ']').addClass('cfe');
+
+ });
+
+ this.bind();
+ },
+
+ bind: function(){
+ var self = this;
+
+ // Radio and Checkboxes
+ $('.cfe-radio, .cfe-checkbox')
+
+ // Filter out any disabled/readonly items
+ .not('.cfe-disabled, .cfe-readonly')
+
+ // Remove old binds
+ .off('.cfe')
+
+ // New binds
+ .on('mousedown.cfe', function(e) {
+ self.mousedown(this, e);
+ })
+ .on('mouseup.cfe', function(e) {
+ self.mouseup(this, e);
+ })
+ ;
+
+ // Select boxes
+ $('select.' + self.options.cssClass +
+ ', input.' + self.options.cssClass + '[type=file]')
+
+ // Remove old binds
+ .off('.cfe')
+
+ // New binds
+ .on('change.cfe', self.change)
+ ;
+
+ // Handle label clicks
+ $('label.cfe')
+
+ // Remove old binds
+ .off('.cfe')
+
+ // 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'));
+
+ if (e.target !== el && el.className.indexOf('cfe-disabled') < 0) {
+ self.mouseup(el, e);
+ }
+ })
+ ;
+ },
+
+ mousedown: function(el, e) {
+ if (!(e.isTrigger || e.which === 1)) { return; } // Only respond to left mouse clicks
+
+ var input = document.getElementById( el.id.split('cfe-').pop() );
+ this.setState(el, (input.checked ? 3 : 1));
+ },
+
+ mouseup: function(el, e) {
+ if (!(e.isTrigger || e.which === 1)) { return; } // Only respond to left mouse clicks
+
+ // e.preventDefault();
+
+ var self = this;
+ var input = document.getElementById( el.id.split('cfe-').pop() );
+
+ // Prevent unselecting radio option
+ if (input.type === 'radio' && input.checked === true) {
+ this.setState(el, 2);
+ return;
+ }
+
+ // Reset all other radio buttons in group
+ $('.' + this.options.cssClass + '[type=radio][name=' + input.name + ']')
+ .not(':disabled, .cfe-disabled, #' + input.id)
+ .each(function(){
+ self.setState( document.getElementById('cfe-' + this.id), 0);
+ })
+ ;
+
+ // Set state
+ this.setState(el, (input.checked ? 0 : 2));
+
+ // Set the checkbox state
+ if (!e.isTrigger ) {
+ input.checked = !input.checked;
+ }
+ },
+
+ change: function(e){
+
+ var value = this.options[this.selectedIndex].text;
+
+ // Remove 'C:\fakepath\' from string
+ if (this.type === 'file') {
+ value = this.value.replace(/C:\\fakepath\\/, '');
+ }
+
+ document.getElementById('cfe-' + this.id).innerHTML = value;
+ },
+
+ setState: function(el, state) {
+ // Remove previous states
+ el.className = el.className.replace(/(?:^|\s)cfe-state-\d(?!\S)/, '');
+
+ // Add new state.
+ el.className += ' cfe-state-' + state;
+ }
+
+ };
+
+ // Default CustomFormElements options
+ CustomFormElements.options = {
+ cssClass: 'cfe-styled'
+ };
+
+ // Expose CustomFormElements to the global object
+ window.CustomFormElements = CustomFormElements;
+
+ // Create String's trim function if we don't have it.
+ if(!String.prototype.trim) {
+ String.prototype.trim = function () {
+ return this.replace(/^\s+|\s+$/g,'');
+ };
+ }
+
+ if (!Function.prototype.bind) {
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== "function") {
+ // closest thing possible to the ECMAScript 5 internal IsCallable function
+ throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+ }
+
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(
+ this instanceof fNOP ? this : oThis || window,
+ aArgs.concat(Array.prototype.slice.call(arguments))
+ );
+ };
+
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
+ }
+
+})(window, document, jQuery);
View
2  custom-form-elements.min.js
@@ -0,0 +1,2 @@
+/* Custom Form Elements v0.12 / http://github.com/karbassi/Custom-Form-Elements / Written by Ali Karbassi (karbassi.com) */
+(function(h,d,f){function g(a){this.init.call(this,a)}g.prototype={init:function(a){this.options=f.extend({},g.options,a||{});var a=d.getElementsByTagName("head")[0],b=d.createElement("style");b.type="text/css";var c=d.createTextNode("input."+this.options.cssClass+" { display: none; } select."+this.options.cssClass+", input."+this.options.cssClass+'[type=file] { position: relative; display: block; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); z-index: 5; } ');b.styleSheet?b.styleSheet.cssText=c.nodeValue:b.appendChild(c);a.appendChild(b);this.repaint()},repaint:function(){f("."+this.options.cssClass+"[type=checkbox], ."+this.options.cssClass+"[type=radio], ."+this.options.cssClass+"[type=file], ."+this.options.cssClass).each(function(){var a=f("#cfe-"+this.id+".cfe");a.length&&a.remove();var a=["cfe","cfe-"+("select-one"===this.type?"select":this.type),"select-one"!==this.type&&"file"!==this.type?"cfe-"+(this.checked?"state-2":"state-0"):"",this.disabled?"cfe-disabled":"",this.getAttribute("readonly")?"cfe-readonly":""].sort().join(" ").trim(),b=d.createElement("span");b.id="cfe-"+this.id;b.className=a;b.innerHTML=f(this).find("option:selected").text();this.parentNode.insertBefore(b,this);f("label[for="+this.id+"]").addClass("cfe")});this.bind()},bind:function(){var a=this;f(".cfe-radio, .cfe-checkbox").not(".cfe-disabled, .cfe-readonly").off(".cfe").on("mousedown.cfe",function(b){a.mousedown(this,b)}).on("mouseup.cfe",function(b){a.mouseup(this,b)});f("select."+a.options.cssClass+", input."+a.options.cssClass+"[type=file]").off(".cfe").on("change.cfe",a.change);f("label.cfe").off(".cfe").on("click.cfe",function(a){a.preventDefault()}).on("mousedown.cfe",function(b){var c=d.getElementById("cfe-"+this.getAttribute("for"));b.target!==c&&0>c.className.indexOf("cfe-disabled")&&a.mousedown(c,b)}).on("mouseup.cfe",function(b){var c=d.getElementById("cfe-"+this.getAttribute("for"));b.target!==c&&0>c.className.indexOf("cfe-disabled")&&a.mouseup(c,b)})},mousedown:function(a,b){if(b.isTrigger||1===b.which){var c=d.getElementById(a.id.split("cfe-").pop());this.setState(a,c.checked?3:1)}},mouseup:function(a,b){if(b.isTrigger||1===b.which){var c=this,e=d.getElementById(a.id.split("cfe-").pop());"radio"===e.type&&!0===e.checked?this.setState(a,2):(f("."+this.options.cssClass+"[type=radio][name="+e.name+"]").not(":disabled, .cfe-disabled, #"+e.id).each(function(){c.setState(d.getElementById("cfe-"+this.id),0)}),this.setState(a,e.checked?0:2),b.isTrigger||(e.checked=!e.checked))}},change:function(){var a=this.options[this.selectedIndex].text;"file"===this.type&&(a=this.value.replace(/C:\\fakepath\\/,""));d.getElementById("cfe-"+this.id).innerHTML=a},setState:function(a,b){a.className=a.className.replace(/(?:^|\s)cfe-state-\d(?!\S)/,"");a.className+=" cfe-state-"+b}};g.options={cssClass:"cfe-styled"};h.CustomFormElements=g;String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")});Function.prototype.bind||(Function.prototype.bind=function(a){if(typeof this!=="function")throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var b=Array.prototype.slice.call(arguments,1),c=this,e=function(){},d=function(){return c.apply(this instanceof e?this:a||h,b.concat(Array.prototype.slice.call(arguments)))};e.prototype=this.prototype;d.prototype=new e;return d})})(window,document,jQuery);
View
BIN  demo/checkbox.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/checkbox.png
Deleted file not rendered
View
BIN  demo/file.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/file.png
Deleted file not rendered
View
354 demo/index.html
@@ -1,132 +1,228 @@
<!DOCTYPE html>
<html>
-<head>
- <meta charset="utf-8" />
- <title>Custom Form Elements</title>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="../src/custom-form-elements.js"></script>
- <style>
- .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;
- }
-
- div {
- margin: 2em;
- }
- </style>
- <script>
- jQuery(document).ready(function($) {
- var cf = new CustomFormElements();
- });
- </script>
-</head>
-<body>
- <div>
- <h3>Select Box</h3>
- <select id="select1" class="styled">
- <option selected>One</option>
- <option>Two</option>
- </select>
- </div>
-
- <div>
- <h3>Select Box Disabled</h3>
- <select id="select2" class="styled" disabled>
- <option>One</option>
- <option selected>Two</option>
- </select>
- </div>
-
- <div>
- <h3>Default Checkbox</h3>
- <label for="checkbox1">Checkbox 1</label>
- <input class="styled" type="checkbox" id="checkbox1" name="checkbox1" value="checkbox" />
- </div>
-
- <div>
- <h3>Checkbox Checked by default</h3>
- <label for="checkbox2">Checkbox 2</label>
- <input class="styled" type="checkbox" id="checkbox2" name="checkbox2" value="checkbox" checked="checked" />
- </div>
-
- <div>
- <h3>Label after Checkbox</h3>
- <input class="styled" type="checkbox" id="checkbox3" name="checkbox3" value="checkbox" />
- <label for="checkbox3">Checkbox 3</label>
- </div>
-
- <div>
- <h3>Default Radio Button</h3>
- <label for="radio1">Radio 1</label>
- <input class="styled" type="radio" id="radio1" name="radio1" value="radio" />
- </div>
-
- <div>
- <h3>Radio Button Disabled</h3>
- <label for="radio2">Radio 2</label>
- <input class="styled" type="radio" id="radio2" name="radio2" value="radio" disabled="disabled" />
- </div>
-
- <div>
- <h3>Default Radio Group</h3>
- <label for="radiog1">Radio 1</label>
- <input class="styled" type="radio" id="radiog1" name="radiog1" value="radio" />
-
- <label for="radiog2">Radio 2</label>
- <input class="styled" type="radio" id="radiog2" name="radiog1" value="radio" />
-
- <label for="radiog3">Radio 3</label>
- <input class="styled" type="radio" id="radiog3" name="radiog1" value="radio" />
-
- <label for="radiog4">Radio 4</label>
- <input class="styled" type="radio" id="radiog4" name="radiog1" value="radio" />
- </div>
-
- <div>
- <h3>Radio Group with Radio 2 Disabled</h3>
- <label for="radiog5">Radio 1</label>
- <input class="styled" type="radio" id="radiog5" name="radiog2" value="radio" />
-
- <label for="radiog6">Radio 2</label>
- <input class="styled" type="radio" id="radiog6" name="radiog2" value="radio" disabled="disabled" />
-
- <label for="radiog7">Radio 3</label>
- <input class="styled" type="radio" id="radiog7" name="radiog2" value="radio" />
-
- <label for="radiog8">Radio 4</label>
- <input class="styled" type="radio" id="radiog8" name="radiog2" value="radio" />
- </div>
-
-</body>
+ <head>
+ <meta charset="utf-8" />
+ <title>Custom Form Elements</title>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+ <script src="../custom-form-elements.min.js"></script>
+ <style>
+ .cfe-radio,
+ .cfe-checkbox,
+ .cfe-select,
+ .cfe-file {
+ display: inline-block;
+ cursor: pointer;
+ background: 0 0 no-repeat;
+ }
+
+ .cfe-radio {
+ background: url(radios.gif);
+ 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.gif);
+ 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.gif);
+ }
+
+ select.cfe-styled {
+ position: relative;
+ width: 161px;
+ }
+
+ .cfe-file {
+ background: url(file.gif);
+ }
+
+ /* 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;
+ }
+
+ /* Demo only*/
+
+ div {
+ margin: 2em;
+ }
+ </style>
+ <script>
+ jQuery(document).ready(function($) {
+ var cf = new CustomFormElements();
+ });
+ </script>
+ </head>
+ <body>
+ <div>
+ <h3>Select Box</h3>
+ <select id="select1" class="cfe-styled">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="DC">District Of Columbia</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL" selected>Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div>
+ <h3>Select Box Disabled</h3>
+ <select id="select2" class="cfe-styled" disabled>
+ <option value="one" selected>First Option</option>
+ <option value="two">Second Option</option>
+ </select>
+ </div>
+
+ <div>
+ <h3>File Upload</h3>
+ <input type="file" id="file1" name="file1" value="" class="cfe-styled" />
+ </div>
+
+ <div>
+ <h3>Default Checkbox</h3>
+ <label for="checkbox1">Checkbox 1</label>
+ <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox" class="cfe-styled" />
+ </div>
+
+ <div>
+ <h3>Checkbox Checked by default</h3>
+ <label for="checkbox2">Checkbox 2</label>
+ <input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox" class="cfe-styled" checked />
+ </div>
+
+ <div>
+ <h3>Label after Checkbox</h3>
+ <input type="checkbox" id="checkbox3" name="checkbox3" value="checkbox" class="cfe-styled" />
+ <label for="checkbox3">Checkbox 3</label>
+ </div>
+
+ <div>
+ <h3>Label wrapping Checkbox</h3>
+ <label for="checkbox4">
+ <input type="checkbox" id="checkbox4" name="checkbox4" value="checkbox" class="cfe-styled" /> Checkbox 3
+ </label>
+ </div>
+
+ <div>
+ <h3>Default Radio Button</h3>
+ <label for="radio1">Radio 1</label>
+ <input type="radio" id="radio1" name="radio1" value="radio" class="cfe-styled" />
+ </div>
+
+ <div>
+ <h3>Radio Button Disabled</h3>
+ <label for="radio2">Radio 2</label>
+ <input class="cfe-styled" type="radio" id="radio2" name="radio2" value="radio" disabled="disabled" />
+ </div>
+
+ <div>
+ <h3>Default Radio Group</h3>
+ <label for="radiog1">Radio 1</label>
+ <input type="radio" id="radiog1" name="radio-group-1" value="radio" class="cfe-styled" />
+
+ <label for="radiog2">Radio 2</label>
+ <input type="radio" id="radiog2" name="radio-group-1" value="radio" class="cfe-styled" />
+
+ <label for="radiog3">Radio 3</label>
+ <input type="radio" id="radiog3" name="radio-group-1" value="radio" class="cfe-styled" />
+
+ <label for="radiog4">Radio 4</label>
+ <input type="radio" id="radiog4" name="radio-group-1" value="radio" class="cfe-styled" />
+ </div>
+
+ <div>
+ <h3>Radio Group with Radio 2 Disabled</h3>
+ <label for="radiog5">Radio 1</label>
+ <input type="radio" id="radiog5" name="radio-group-2" value="radio" class="cfe-styled" />
+
+ <label for="radiog6">Radio 2</label>
+ <input type="radio" id="radiog6" name="radio-group-2" value="radio" class="cfe-styled" disabled />
+
+ <label for="radiog7">Radio 3</label>
+ <input type="radio" id="radiog7" name="radio-group-2" value="radio" class="cfe-styled" />
+
+ <label for="radiog8">Radio 4</label>
+ <input type="radio" id="radiog8" name="radio-group-2" value="radio" class="cfe-styled" />
+ </div>
+ </body>
</html>
View
BIN  demo/radios.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/radios.png
Deleted file not rendered
View
BIN  demo/select-short.png
Deleted file not rendered
View
BIN  demo/select.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/select.png
Deleted file not rendered
View
209 src/custom-form-elements.js
@@ -1,209 +0,0 @@
-/*
-Custom Form Elements v0.11
-
-http://github.com/karbassi/Custom-Form-Elements
-
-Written by Ali Karbassi (karbassi.com)
-
-Requires jQuery v1.4.2+
-
-Note:
- - Call once your document is loaded.
- - The sprite order from top to bottom is: unchecked, unchecked-clicked, checked, checked-clicked.
- - '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.
- - The 'input' file should not be wrapped with the 'label' tag.
- - Works on mobile devices. Tested on iPhone and iPad.
-
-Example:
-
- 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();
-
- });
-
-*/
-
-(function(window, document, $) {
-
- function CustomFormElements(options) {
- this.init.call(this, options);
- }
-
- CustomFormElements.prototype = {
- init: function(options) {
- var self = this;
-
- // Merge options
- self.options = $.extend({}, CustomFormElements.options, options || {});
- var css = [
- 'input.', self.options.styled, '{display:none;}',
- 'select.', self.options.styled, '{position:relative;width:', self.options.selectWidth, 'px;opacity:0;filter:alpha(opacity=0);z-index:5;}',
- '.' + d + ',.' + r + '{opacity:0.5;filter:alpha(opacity=50);}'
- ];
-
- $('<style>' + css.join('') + '</style>').appendTo('head');
-
- self.repaint();
- },
-
- repaint: function(){
- var self = this;
-
- $('input.' + self.options.styled + '[type=checkbox],input.' + self.options.styled + '[type=radio],select.' + self.options.styled).each(function(){
-
- var existing = $('#' + this.id + '_cf.' + self.options.uniqueClassName);
- if (existing.length > 0) {
- existing.remove();
- }
-
- var selected = $(this).find('option:selected').text(),
- type = this.type === 'select-one' ? 'select' : this.type,
- style = 'style="background-position:0 -' + self.options[type + h] * (this.checked ? 2 : 0) + 'px;"',
- disabled = this.disabled ? d : null,
- readonly = $(this).attr(r) ? r : null,
- className = [self.options.uniqueClassName, type, disabled, readonly],
- span = '<span id="' + this.id + '_cf" class="' + className.join(' ').replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '') + '"' + (type !== 'select' ? ' ' + style + ' ' : '') + '>' + selected + '</span>';
-
- $(this).before(span);
- });
-
- self.bind();
- },
-
- bind: function(){
- var self = this;
-
- $('span.' + self.options.uniqueClassName + '.checkbox:not(.' + d + ',.' + r + '),span.' + self.options.uniqueClassName + '.radio:not(.' + d + ',.' + r + ')')
- .die('mousedown mouseup touchstart touchend')
- .live('mousedown touchstart', function(e) {
- self.mousedown(e, this);
- })
- .live('mouseup touchend', function(e) {
- self.mouseup(e, this);
- });
-
- var query = 'span.' + self.options.uniqueClassName + '.select:not(.' + d + ')+select';
-
- $(query).each(function(){
- $(this)
- .parent()
- .undelegate(query, 'change')
- .delegate(query, 'change', function(){
- $(this)
- .prev('span')
- .html(
- $(this)
- .find('option:selected')
- .text()
- .replace(/\s/g, '&nbsp;')
- );
- });
- });
-
- // Handle label clicks
- query = 'input.' + self.options.styled;
- $(query).each(function(){
-
- if ($('span#' + this.id + '_cf.' + d).length) {
- return;
- }
-
- $(this)
- .parent()
- .undelegate(query, 'change')
- .delegate(query, 'change', function(e){
- self.reset();
- });
-
- if ($.browser.msie) {
- $('label[for=' + this.id + ']').bind('click', function(){
- var mouseup = jQuery.Event("mouseup");
- mouseup.which = 1;
- $('span#' + $(this).attr('for') + '_cf').trigger(mouseup);
- });
- }
- });
- },
-
- reset: function(){
- var self = this;
- $('input.' + self.options.styled).each(function(k, v) {
- $('#' + this.id + '_cf')[0].style[bgp] = !this.checked ? '' : "0 -" + self.options[this.type + h] * 2 + 'px';
- });
- },
-
- mousedown: function(e, el) {
- if (e.which !== 1 && e.which !== 0) { return; } // Only respond to left mouse clicks and touch event.
-
- var self = this,
- input = $('#' + el.id.split('_cf').shift())[0],
- offset = self.options[input.type + h] * (input.checked ? 3 : 1);
-
- el.style[bgp] = "0 -" + offset + 'px';
- },
-
- mouseup: function(e, el) {
- if (e.which !== 1 && e.which !== 0) { return; } // Only respond to left mouse clicks and touch event.
-
- var self = this,
- input = $('#' + el.id.split('_cf').shift())[0];
-
- el.style[bgp] = input.checked && input.type === 'checkbox' ? '' : "0 -" + self.options[input.type + h] * 2 + 'px';
-
- if (input.type == 'radio' && input.checked === true) {
- // Prevent unselecting radio option
- return;
- }
-
- $('input[type=radio][name=' + input.name + ']').not('#' + input.id).each(function(){
- $('#' + this.id + '_cf')[0].style[bgp] = '';
- });
-
- input.checked = !input.checked;
- $(input).trigger('change');
- }
-
- };
-
- // Default CustomFormElements options
- CustomFormElements.options = {
- 'styled': 'styled',
- 'uniqueClassName': 'customFormElement',
- 'checkboxHeight': 12,
- 'radioHeight': 11,
- 'selectWidth': 161
- };
-
- // Save some space
- var bgp = 'backgroundPosition',
- d = 'disabled',
- r = 'readonly',
- h = 'Height';
-
- // Expose CustomFormElements to the global object
- window.CustomFormElements = CustomFormElements;
-})(window, document, jQuery);
View
2  src/custom-form-elements.min.js
@@ -1,2 +0,0 @@
-/* Custom Form Elements v0.11 / http://github.com/karbassi/Custom-Form-Elements / Written by Ali Karbassi (karbassi.com) */
-(function(j,k,b){function e(a){this.init.call(this,a)}e.prototype={init:function(a){this.options=b.extend({},e.options,a||{});b("<style>"+["input.",this.options.styled,"{display:none;}select.",this.options.styled,"{position:relative;width:",this.options.selectWidth,"px;opacity:0;filter:alpha(opacity=0);z-index:5;}","."+f+",."+h+"{opacity:0.5;filter:alpha(opacity=50);}"].join("")+"</style>").appendTo("head");this.repaint()},repaint:function(){var a=this;b("input."+a.options.styled+"[type=checkbox],input."+a.options.styled+"[type=radio],select."+a.options.styled).each(function(){var c=b("#"+this.id+"_cf."+a.options.uniqueClassName);0<c.length&&c.remove();var c=b(this).find("option:selected").text(),d="select-one"===this.type?"select":this.type,e='style="background-position:0 -'+a.options[d+i]*(this.checked?2:0)+'px;"',g=this.disabled?f:null,j=b(this).attr(h)?h:null,c='<span id="'+this.id+'_cf" class="'+[a.options.uniqueClassName,d,g,j].join(" ").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"")+'"'+("select"!==d?" "+e+" ":"")+">"+c+"</span>";b(this).before(c)});a.bind()},bind:function(){var a=this;b("span."+a.options.uniqueClassName+".checkbox:not(."+f+",."+h+"),span."+a.options.uniqueClassName+".radio:not(."+f+",."+h+")").die("mousedown mouseup touchstart touchend").live("mousedown touchstart",function(b){a.mousedown(b,this)}).live("mouseup touchend",function(b){a.mouseup(b,this)});var c="span."+a.options.uniqueClassName+".select:not(."+f+")+select";b(c).each(function(){b(this).parent().undelegate(c,"change").delegate(c,"change",function(){b(this).prev("span").html(b(this).find("option:selected").text().replace(/\s/g,"&nbsp;"))})});c="input."+a.options.styled;b(c).each(function(){b("span#"+this.id+"_cf."+f).length||(b(this).parent().undelegate(c,"change").delegate(c,"change",function(){a.reset()}),b.browser.msie&&b("label[for="+this.id+"]").bind("click",function(){var a=jQuery.Event("mouseup");a.which=1;b("span#"+b(this).attr("for")+"_cf").trigger(a)}))})},reset:function(){var a=this;b("input."+a.options.styled).each(function(){b("#"+this.id+"_cf")[0].style[g]=!this.checked?"":"0 -"+2*a.options[this.type+i]+"px"})},mousedown:function(a,c){if(!(1!==a.which&&0!==a.which)){var d=b("#"+c.id.split("_cf").shift())[0];c.style[g]="0 -"+this.options[d.type+i]*(d.checked?3:1)+"px"}},mouseup:function(a,c){if(!(1!==a.which&&0!==a.which)){var d=b("#"+c.id.split("_cf").shift())[0];c.style[g]=d.checked&&"checkbox"===d.type?"":"0 -"+2*this.options[d.type+i]+"px";if(!("radio"==d.type&&!0===d.checked))b("input[type=radio][name="+d.name+"]").not("#"+d.id).each(function(){b("#"+this.id+"_cf")[0].style[g]=""}),d.checked=!d.checked,b(d).trigger("change")}}};e.options={styled:"styled",uniqueClassName:"customFormElement",checkboxHeight:12,radioHeight:11,selectWidth:161};var g="backgroundPosition",f="disabled",h="readonly",i="Height";j.CustomFormElements=e})(window,document,jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.