Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added events to select:

  • Loading branch information...
commit 799633f4d4a4a7bb7d7f7cc647a35a3dd7017556 1 parent 9b63d08
@sbarre sbarre authored
Showing with 74 additions and 7 deletions.
  1. +17 −0 index.html
  2. +57 −7 javascripts/jquery.customforms.js
View
17 index.html
@@ -106,6 +106,22 @@
<li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
</ul>
+ <h3>Forms</h3>
+
+ <form id="testForm" class="custom">
+ <label for="checkbox1">
+ <input type="checkbox" id="checkbox1" /> Checkbox
+ </label>
+ <label for="radio1">
+ <input type="radio" id="radio1" /> Radio
+ </label>
+
+ <select id="testSelect" name="testSelect">
+ <option value="0">Zero</option>
+ <option value="1">One</option>
+ </select>
+ </form>
+
<h3>Buttons</h3>
<p><a href="#" class="small blue button">Small Blue Button</a></p>
@@ -116,6 +132,7 @@
<p><a href="#" class="nice radius blue button">Nice Blue Button</a></p>
<p><a href="#" class="nice radius large blue button">Nice Blue Button</a></p>
+
</div>
<div class="four columns">
View
64 javascripts/jquery.customforms.js
@@ -24,32 +24,41 @@ jQuery(document).ready(function ($) {
appendCustomMarkup('checkbox');
appendCustomMarkup('radio');
- $('form.custom select').each(function () {
- var $this = $(this),
+
+ function appendCustomSelect(sel) {
+ var $this = $(sel),
$customSelect = $this.next('div.custom.dropdown'),
$options = $this.find('option'),
maxWidth = 0,
$li;
-
- if ($customSelect.length === 0) {
+
+ if ($customSelect.length === 0) {
$customSelect = $('<div class="custom dropdown"><a href="#" class="selector"></a><ul></ul></div>"');
$options.each(function () {
$li = $('<li>' + $(this).html() + '</li>');
$customSelect.find('ul').append($li);
});
$customSelect.prepend('<a href="#" class="current">' + $options.first().html() + '</a>');
-
+
$this.after($customSelect);
$this.hide();
+
+ } else {
+ // refresh the ul with options from the select in case the supplied markup doesn't match
+ $customSelect.find('ul').html('');
+ $options.each(function () {
+ $li = $('<li>' + $(this).html() + '</li>');
+ $customSelect.find('ul').append($li);
+ });
}
-
+
$options.each(function (index) {
if (this.selected) {
$customSelect.find('li').eq(index).addClass('selected');
$customSelect.find('.current').html($(this).html());
}
});
-
+
$customSelect.find('li').each(function () {
$customSelect.addClass('open');
if ($(this).outerWidth() > maxWidth) {
@@ -59,11 +68,48 @@ jQuery(document).ready(function ($) {
});
$customSelect.css('width', maxWidth + 18 + 'px');
$customSelect.find('ul').css('width', maxWidth + 16 + 'px');
+
+ }
+
+ $('form.custom select').each(function () {
+ appendCustomSelect(this);
});
+
});
(function ($) {
+ function refreshSelect($select) {
+ var $customSelect = $select.next();
+ $options = $select.find('option');
+ $customSelect.find('ul').html('');
+ $options.each(function () {
+ $li = $('<li>' + $(this).html() + '</li>');
+ $customSelect.find('ul').append($li);
+ });
+
+ // re-populate
+ $options.each(function (index) {
+ if (this.selected) {
+ $customSelect.find('li').eq(index).addClass('selected');
+ $customSelect.find('.current').html($(this).html());
+ }
+ });
+
+ // fix width
+ $customSelect.find('li').each(function () {
+ $customSelect.addClass('open');
+ if ($(this).outerWidth() > maxWidth) {
+ maxWidth = $(this).outerWidth();
+ }
+ $customSelect.removeClass('open');
+ });
+ $customSelect.css('width', maxWidth + 18 + 'px');
+ $customSelect.find('ul').css('width', maxWidth + 16 + 'px');
+
+
+ }
+
function toggleCheckbox($element) {
var $input = $element.prev(),
input = $input[0];
@@ -101,6 +147,10 @@ jQuery(document).ready(function ($) {
toggleRadio($(this));
});
+ $('form.custom').delegate('select','change', function (event) {
+ refreshSelect($(this));
+ });
+
$('form.custom label').live('click', function (event) {
var $associatedElement = $('#' + $(this).attr('for')),
$customCheckbox,
Please sign in to comment.
Something went wrong with that request. Please try again.