Permalink
Browse files

Beta version ready

  • Loading branch information...
1 parent 0a41cce commit ba96b8b0015916d2bb4bad43c5aafff8ac04549a @doomhz committed Jun 17, 2011
Showing with 80 additions and 9 deletions.
  1. +26 −4 assets/formElements.css
  2. +36 −4 assets/jquery.formElements.js
  3. +18 −1 demo.html
View
@@ -3,16 +3,17 @@ body {
padding: 0;
}
-.radios input, .checks input {
+.radios input, .checks input, .selects select {
display: none;
}
-.check_on {
+.check_on, .check_off {
padding: 0 0 0 25px;
+ cursor: pointer;
}
-.check_off {
- padding: 0 0 0 25px;
+.check_on label, .check_off label {
+ cursor: pointer;
}
.radios .check_on {
@@ -33,4 +34,25 @@ body {
.checks .check_off {
display: inline-block;
background: url('check_off.png') no-repeat;
+}
+
+.selected-index-wrap {
+ cursor: pointer;
+ width: 150px;
+ overflow: hidden;
+ display: inline-block;
+}
+
+.select-options-wrap {
+ position: absolute;
+ display: none;
+ cursor: pointer;
+ list-style-type: none;
+ padding: 0;
+ width: 150px;
+ overflow: hidden;
+}
+
+.select-options-wrap li:hover {
+ background: #5a8ea6;
}
@@ -6,7 +6,7 @@
* @version 1.0
* @requires jQuery v1.6 or later
*
-* @example $('form').formElements({});
+* @example $('form').formElements();
*
* Find source on GitHub: https://github.com/doomhz/jQuery-Form-Elements
*
@@ -32,9 +32,9 @@
var self = this, $self = $(this);
- $self.find('input[type="checkbox"],input[type="radio"]').each(function (i, el) {
- var $el = $(el);
- switch ($el.attr('type')) {
+ $self.find('input[type="checkbox"],input[type="radio"],select').each(function (i, el) {
+ var $el = $(el), type = $el.attr('type') ? $el.attr('type') : ($el[0].nodeName === 'SELECT' ? 'select' : false);
+ switch (type) {
case 'checkbox':
$el.parent().removeClass('check_on check_off')
.addClass($el.attr('checked') ? 'check_on' : 'check_off')
@@ -68,6 +68,38 @@
.addClass($el.attr('checked') ? 'check_on' : 'check_off');
});
break;
+ case 'select':
+ var selectWrap = '<div class="selected-index-wrap"><span>{selectedText}</span></div>' +
+ '<ul class="select-options-wrap">{selectOptions}</ul>';
+ var optionsWrap = '';
+ $el.find('option').each(function (i, option) {
+ optionsWrap += ('<li data-index="' + i + '" class="' + ($(option).attr('selected') ? 'selected' : '') + '">' + $(option).text() + '</li>');
+ if ($(option).attr('selected')) {
+ selectWrap = selectWrap.replace('{selectedText}', $(option).text());
+ }
+ });
+ selectWrap = selectWrap.replace('{selectOptions}', optionsWrap);
+ var $selectWrap = $(selectWrap);
+ $selectWrap.insertAfter($el);
+ $($selectWrap[1]).offset({
+ left: $selectWrap.offset().left,
+ top: $selectWrap.offset().top + $selectWrap.height()
+ });
+ $selectWrap.click(function () {
+ $(this).next().toggle();
+ });
+ $selectWrap.find('li').click(function () {
+ var $self = $(this), $ul = $self.parent();
+ $selectWrap.find('span:first').text($self.text());
+ $ul.hide();
+ $el.find('option[selected="selected"]').attr('selected', false);
+ $($el.find('option')[$self.attr('data-index')]).attr('selected', true);
+ $ul.find('li').each(function (i, e) {
+ $(e).removeClass('selected');
+ });
+ $self.addClass('selected');
+ });
+ break;
}
});
View
@@ -5,7 +5,9 @@
<script type="text/javascript" src="assets/jquery.formElements.js"></script>
</head>
<body>
- <form action="" method="get">
+ <h1>jQuery Form Elements Demo</h1>
+ <h2>Registration form</h2>
+ <form action="" method="post">
<div class="radios">
<label>You are a</label>
<span>
@@ -32,6 +34,21 @@
<label>Animals</label>
</span>
</div>
+ <div class="selects">
+ <label>and was born in</label>
+ <select name="birthday">
+ <option value="1995">1995</option>
+ <option value="1994">1994</option>
+ <option value="1993">1993</option>
+ <option value="1992">1992</option>
+ <option value="1991">1991</option>
+ <option value="1990">1990</option>
+ <option value="before 1990">before 1990...</option>
+ </select>
+ </div>
+ <div class="submit">
+ <button type="submit">Come in</button>
+ </div>
</form>
</body>

0 comments on commit ba96b8b

Please sign in to comment.