Skip to content
Browse files

The plugin

  • Loading branch information...
1 parent c58170a commit 852f6309d96ecfd6dc9d78bed53e2cdc678bdbd7 @doomhz committed Jun 17, 2011
Showing with 141 additions and 0 deletions.
  1. +24 −0 assets/formElements.css
  2. +76 −0 assets/jquery.formElements.js
  3. +41 −0 demo.html
View
24 assets/formElements.css
@@ -0,0 +1,24 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.radios input, .checks input {
+ display: none;
+}
+
+.radios .check_on {
+ background: url('radio_on.png') no-repeat left left;
+}
+
+.radios .check_off {
+ background: url('radio_off.png') no-repeat left left;
+}
+
+.checks .check_on {
+ background: url('check_on.png') no-repeat left left;
+}
+
+.checks .check_off {
+ background: url('check_off.png') no-repeat left left;
+}
View
76 assets/jquery.formElements.js
@@ -0,0 +1,76 @@
+/**
+* From Elements jQuery Plugin
+*
+* @author Dumitru Glavan
+* @link http://dumitruglavan.com
+* @version 1.0
+* @requires jQuery v1.6 or later
+*
+* @example $('form').formElements({});
+*
+* Find source on GitHub: https://github.com/doomhz/jQuery-Form-Elements
+*
+* Dual licensed under the MIT and GPL licenses:
+* http://www.opensource.org/licenses/mit-license.php
+* http://www.gnu.org/licenses/gpl.html
+*
+*/
+(function ($) {
+ $.fn.formElements = function (options) {
+
+ if ($(this).length > 1) {
+ $(this).each(function (i, el) {
+ $(el).formElements(options);
+ });
+ return $(this);
+ }
+
+ this.config = {
+
+ };
+ $.extend(this.config, options);
+
+ var self = this, $self = $(this);
+
+ $self.find('input[type="checkbox"],input[type="radio"]').each(function (i, el) {
+ var $el = $(el);
+ switch ($el.attr('type')) {
+ case 'checkbox':
+ $el.parent().removeClass('check_on check_off')
+ .addClass($el.attr('checked') ? 'check_on' : 'check_off')
+ .click(function (ev) {
+ var $par = $(this);
+ if ($(ev.target)[0].nodeName !== 'INPUT') {
+ $el.attr('checked', $el.attr('checked') ? false : true);
+ }
+ $par.removeClass('check_on check_off')
+ .addClass($el.attr('checked') ? 'check_on' : 'check_off');
+ });
+ break;
+ case 'radio':
+ $el.parent()
+ .addClass($el.attr('checked') ? 'check_on' : 'check_off')
+ .click(function (ev) {
+ $('.check_on,.check_off,input[checked="checked"]', $el.parent().parent()).
+ each(function (i, elem) {
+ if ($(elem)[0].nodeName === 'INPUT') {
+ $(elem).attr('checked', false);
+ } else {
+ $(elem).removeClass('check_on').addClass('check_off');
+ }
+ });
+
+ var $par = $(this);
+ if ($(ev.target)[0].nodeName !== 'INPUT') {
+ $el.attr('checked', $el.attr('checked') ? false : true);
+ }
+ $par.removeClass('check_on check_off')
+ .addClass($el.attr('checked') ? 'check_on' : 'check_off');
+ });
+ break;
+ }
+ });
+
+ return this;
+ };
+})(jQuery);
View
41 demo.html
@@ -0,0 +1,41 @@
+<html>
+ <head>
+ <link href="assets/formElements.css" media="all" rel="stylesheet" type="text/css" />
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script type="text/javascript" src="assets/jquery.formElements.js"></script>
+ </head>
+ <body>
+ <form action="" method="get">
+ <div class="radios">
+ <label>You are a</label>
+ <span>
+ <input type="radio" name="gender" value="0" />
+ <label>Guy</label>
+ </span>
+ <span>
+ <input type="radio" name="gender" value="1" />
+ <label>Chick</label>
+ </span>
+ </div>
+ <div class="checks">
+ <label>who likes</label>
+ <span>
+ <input type="checkbox" name="likes" value="0" />
+ <label>Guys</label>
+ </span>
+ <span>
+ <input type="checkbox" name="likes" value="1" />
+ <label>Chicks</label>
+ </span>
+ <span>
+ <input type="checkbox" name="likes" value="2" />
+ <label>Animals</label>
+ </span>
+ </div>
+ </form>
+ </body>
+
+ <script type="text/javascript">
+ $('form').formElements();
+ </script>
+</html>

0 comments on commit 852f630

Please sign in to comment.
Something went wrong with that request. Please try again.