/*
* UPDATED: 12.19.07
*
* jNice
* by Sean Mooney (sean@whitespace-creative.com)
*
* To Use: place in the head
*
*
*
* And apply the jNice class the form you want to style
*
* To Do: Add textareas, Add File upload
*
******************************************** */
(function($){
$.fn.jNice = function(options){
var self = this;
var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
/* each form */
this.each(function(){
/***************************
Buttons
***************************/
var setButton = function(){
$(this).replaceWith(''+ $(this).attr('value') +' ');
};
$('input:submit, input:reset', this).each(setButton);
/***************************
Text Fields
***************************/
var setText = function(){
var $input = $(this);
$input.addClass("jNiceInput").wrap('');
var $wrapper = $input.parents('div.jNiceInputWrapper');
$wrapper.css("width", $(this).width()+10);
$input.focus(function(){
$wrapper.addClass("jNiceInputWrapper_hover");
}).blur(function(){
$wrapper.removeClass("jNiceInputWrapper_hover");
});
};
$('input:text:visible, input:password', this).each(setText);
/* If this is safari we need to add an extra class */
if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});}
/***************************
Check Boxes
***************************/
$('input:checkbox', this).each(function(){
$(this).addClass('jNiceHidden').wrap(' ');
var $wrapper = $(this).parent();
$wrapper.prepend(' ');
/* Click Handler */
$(this).siblings('a.jNiceCheckbox').click(function(){
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked===true){
input.checked = false;
$a.removeClass('jNiceChecked');
}
else {
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
/* set the default state */
if (this.checked){$('a.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
});
/***************************
Radios
***************************/
$('input:radio', this).each(function(){
$input = $(this);
$input.addClass('jNiceHidden').wrap(' ');
var $wrapper = $input.parent();
$wrapper.prepend(' ');
/* Click Handler */
$('a.jNiceRadio', $wrapper).click(function(){
var $a = $(this);
$a.siblings('input')[0].checked = true;
$a.addClass('jNiceChecked');
/* uncheck all others of same name */
$('a[rel="'+ $a.attr('rel') +'"]').not($a).each(function(){
$(this).removeClass('jNiceChecked').siblings('input')[0].checked=false;
});
return false;
});
/* set the default state */
if (this.checked){$('a.jNiceRadio', $wrapper).addClass('jNiceChecked');}
});
/***************************
Selects
***************************/
$('select', this).each(function(index){
var $select = $(this);
/* First thing we do is Wrap it */
$(this).addClass('jNiceHidden').wrap('
');
var $wrapper = $(this).parent().css({zIndex: 100-index});
/* Now add the html for the select */
$wrapper.prepend('');
var $ul = $('ul', $wrapper);
/* Now we add the options */
$('option', this).each(function(i){
$ul.append(''+ this.text +' ');
});
/* Hide the ul and add click handler to the a */
$ul.hide().find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the defalut */
$('a:eq('+ this.selectedIndex +')', $ul).click();
});/* End select each */
/* Apply the click handler to the Open */
$('a.jNiceSelectOpen', this).click(function(){
var $ul = $(this).parent().siblings('ul');
if ($ul.css('display')=='none'){hideSelect();} /* Check if box is already open to still allow toggle, but close all other selects */
$ul.slideToggle();
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({scrollTop: offSet});
return false;
});
}); /* End Form each */
/* Hide all open selects */
var hideSelect = function(){
$('.jNiceSelectWrapper ul:visible').hide();
};
/* Check for an external click */
var checkExternalClick = function(event) {
if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { hideSelect(); }
};
/* Apply document listener */
$(document).mousedown(checkExternalClick);
/* Add a new handler for the reset action */
var jReset = function(f){
var sel;
$('.jNiceSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
$('a.jNiceCheckbox, a.jNiceRadio', f).removeClass('jNiceChecked');
$('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jNiceChecked');}});
};
this.bind('reset',function(){var action = function(){jReset(this);}; window.setTimeout(action, 10);});
};/* End the Plugin */
/* Automatically apply to any forms with class jNice */
$(function(){$('form.jNice').jNice(); });
})(jQuery);