/*
|
|
Uniform v1.7.5
|
Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC
|
http://pixelmatrixdesign.com
|
|
Requires jQuery 1.4 or newer
|
|
Much thanks to Thomas Reynolds and Buck Wilson for their help and advice on this
|
|
Disabling text selection is made possible by Mathias Bynens <http://mathiasbynens.be/>
|
and his noSelect plugin. <http://github.com/mathiasbynens/noSelect-jQuery-Plugin>
|
|
Also, thanks to David Kaneda and Eugene Bond for their contributions to the plugin
|
|
License:
|
MIT License - http://www.opensource.org/licenses/mit-license.php
|
|
Enjoy!
|
|
*/
|
|
(function($) {
|
$.uniform = {
|
options: {
|
selectClass: 'selector',
|
radioClass: 'radio',
|
checkboxClass: 'checker',
|
fileClass: 'uploader',
|
filenameClass: 'filename',
|
fileBtnClass: 'action',
|
fileDefaultText: 'No file selected',
|
fileBtnText: 'Choose File',
|
checkedClass: 'checked',
|
focusClass: 'focus',
|
disabledClass: 'disabled',
|
buttonClass: 'button',
|
activeClass: 'active',
|
hoverClass: 'hover',
|
useID: true,
|
idPrefix: 'uniform',
|
resetSelector: false,
|
autoHide: true
|
},
|
elements: []
|
};
|
|
if($.browser.msie && $.browser.version < 7){
|
$.support.selectOpacity = false;
|
}else{
|
$.support.selectOpacity = true;
|
}
|
|
$.fn.uniform = function(options) {
|
|
options = $.extend($.uniform.options, options);
|
|
var el = this;
|
//code for specifying a reset button
|
if(options.resetSelector != false){
|
$(options.resetSelector).mouseup(function(){
|
function resetThis(){
|
$.uniform.update(el);
|
}
|
setTimeout(resetThis, 10);
|
});
|
}
|
|
function doInput(elem){
|
$el = $(elem);
|
$el.addClass($el.attr("type"));
|
storeElement(elem);
|
}
|
|
function doTextarea(elem){
|
$(elem).addClass("uniform");
|
storeElement(elem);
|
}
|
|
function doButton(elem){
|
var $el = $(elem);
|
|
var divTag = $("<div>"),
|
spanTag = $("<span>");
|
|
divTag.addClass(options.buttonClass);
|
|
if(options.useID && $el.attr("id") != "") divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
|
var btnText;
|
|
if($el.is("a") || $el.is("button")){
|
btnText = $el.text();
|
}else if($el.is(":submit") || $el.is(":reset") || $el.is("input[type=button]")){
|
btnText = $el.attr("value");
|
}
|
|
btnText = btnText == "" ? $el.is(":reset") ? "Reset" : "Submit" : btnText;
|
|
spanTag.html(btnText);
|
|
$el.css("opacity", 0);
|
$el.wrap(divTag);
|
$el.wrap(spanTag);
|
|
//redefine variables
|
divTag = $el.closest("div");
|
spanTag = $el.closest("span");
|
|
if($el.is(":disabled")) divTag.addClass(options.disabledClass);
|
|
divTag.bind({
|
"mouseenter.uniform": function(){
|
divTag.addClass(options.hoverClass);
|
},
|
"mouseleave.uniform": function(){
|
divTag.removeClass(options.hoverClass);
|
divTag.removeClass(options.activeClass);
|
},
|
"mousedown.uniform touchbegin.uniform": function(){
|
divTag.addClass(options.activeClass);
|
},
|
"mouseup.uniform touchend.uniform": function(){
|
divTag.removeClass(options.activeClass);
|
},
|
"click.uniform touchend.uniform": function(e){
|
if($(e.target).is("span") || $(e.target).is("div")){
|
if(elem[0].dispatchEvent){
|
var ev = document.createEvent('MouseEvents');
|
ev.initEvent( 'click', true, true );
|
elem[0].dispatchEvent(ev);
|
}else{
|
elem[0].click();
|
}
|
}
|
}
|
});
|
|
elem.bind({
|
"focus.uniform": function(){
|
divTag.addClass(options.focusClass);
|
},
|
"blur.uniform": function(){
|
divTag.removeClass(options.focusClass);
|
}
|
});
|
|
$.uniform.noSelect(divTag);
|
storeElement(elem);
|
|
}
|
|
function doSelect(elem){
|
var $el = $(elem);
|
|
var divTag = $('<div />'),
|
spanTag = $('<span />');
|
|
if(!$el.css("display") == "none" && options.autoHide){
|
divTag.hide();
|
}
|
|
divTag.addClass(options.selectClass);
|
|
if(options.useID && elem.attr("id") != ""){
|
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
|
}
|
|
var selected = elem.find(":selected:first");
|
if(selected.length == 0){
|
selected = elem.find("option:first");
|
}
|
spanTag.html(selected.html());
|
|
elem.css('opacity', 0);
|
elem.wrap(divTag);
|
elem.before(spanTag);
|
|
//redefine variables
|
divTag = elem.parent("div");
|
spanTag = elem.siblings("span");
|
|
elem.bind({
|
"change.uniform": function() {
|
spanTag.text(elem.find(":selected").html());
|
divTag.removeClass(options.activeClass);
|
},
|
"focus.uniform": function() {
|
divTag.addClass(options.focusClass);
|
},
|
"blur.uniform": function() {
|
divTag.removeClass(options.focusClass);
|
divTag.removeClass(options.activeClass);
|
},
|
"mousedown.uniform touchbegin.uniform": function() {
|
divTag.addClass(options.activeClass);
|
},
|
"mouseup.uniform touchend.uniform": function() {
|
divTag.removeClass(options.activeClass);
|
},
|
"click.uniform touchend.uniform": function(){
|
divTag.removeClass(options.activeClass);
|
},
|
"mouseenter.uniform": function() {
|
divTag.addClass(options.hoverClass);
|
},
|
"mouseleave.uniform": function() {
|
divTag.removeClass(options.hoverClass);
|
divTag.removeClass(options.activeClass);
|
},
|
"keyup.uniform": function(){
|
spanTag.text(elem.find(":selected").html());
|
}
|
});
|
|
//handle disabled state
|
if($(elem).attr("disabled")){
|
//box is checked by default, check our box
|
divTag.addClass(options.disabledClass);
|
}
|
$.uniform.noSelect(spanTag);
|
|
storeElement(elem);
|
|
}
|
|
function doCheckbox(elem){
|
var $el = $(elem);
|
|
var divTag = $('<div />'),
|
spanTag = $('<span />');
|
|
if(!$el.css("display") == "none" && options.autoHide){
|
divTag.hide();
|
}
|
|
divTag.addClass(options.checkboxClass);
|
|
//assign the id of the element
|
if(options.useID && elem.attr("id") != ""){
|
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
|
}
|
|
//wrap with the proper elements
|
$(elem).wrap(divTag);
|
$(elem).wrap(spanTag);
|
|
//redefine variables
|
spanTag = elem.parent();
|
divTag = spanTag.parent();
|
|
//hide normal input and add focus classes
|
$(elem)
|
.css("opacity", 0)
|
.bind({
|
"focus.uniform": function(){
|
divTag.addClass(options.focusClass);
|
},
|
"blur.uniform": function(){
|
divTag.removeClass(options.focusClass);
|
},
|
"click.uniform touchend.uniform": function(){
|
if(!$(elem).attr("checked")){
|
//box was just unchecked, uncheck span
|
spanTag.removeClass(options.checkedClass);
|
}else{
|
//box was just checked, check span.
|
spanTag.addClass(options.checkedClass);
|
}
|
},
|
"mousedown.uniform touchbegin.uniform": function() {
|
divTag.addClass(options.activeClass);
|
},
|
"mouseup.uniform touchend.uniform": function() {
|
divTag.removeClass(options.activeClass);
|
},
|
"mouseenter.uniform": function() {
|
divTag.addClass(options.hoverClass);
|
},
|
"mouseleave.uniform": function() {
|
divTag.removeClass(options.hoverClass);
|
divTag.removeClass(options.activeClass);
|
}
|
});
|
|
//handle defaults
|
if($(elem).attr("checked")){
|
//box is checked by default, check our box
|
spanTag.addClass(options.checkedClass);
|
}
|
|
//handle disabled state
|
if($(elem).attr("disabled")){
|
//box is checked by default, check our box
|
divTag.addClass(options.disabledClass);
|
}
|
|
storeElement(elem);
|
}
|
|
function doRadio(elem){
|
var $el = $(elem);
|
|
var divTag = $('<div />'),
|
spanTag = $('<span />');
|
|
if(!$el.css("display") == "none" && options.autoHide){
|
divTag.hide();
|
}
|
|
divTag.addClass(options.radioClass);
|
|
if(options.useID && elem.attr("id") != ""){
|
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
|
}
|
|
//wrap with the proper elements
|
$(elem).wrap(divTag);
|
$(elem).wrap(spanTag);
|
|
//redefine variables
|
spanTag = elem.parent();
|
divTag = spanTag.parent();
|
|
//hide normal input and add focus classes
|
$(elem)
|
.css("opacity", 0)
|
.bind({
|
"focus.uniform": function(){
|
divTag.addClass(options.focusClass);
|
},
|
"blur.uniform": function(){
|
divTag.removeClass(options.focusClass);
|
},
|
"click.uniform touchend.uniform": function(){
|
if(!$(elem).attr("checked")){
|
//box was just unchecked, uncheck span
|
spanTag.removeClass(options.checkedClass);
|
}else{
|
//box was just checked, check span
|
var classes = options.radioClass.split(" ")[0];
|
$("." + classes + " span." + options.checkedClass + ":has([name='" + $(elem).attr('name') + "'])").removeClass(options.checkedClass);
|
spanTag.addClass(options.checkedClass);
|
}
|
},
|
"mousedown.uniform touchend.uniform": function() {
|
if(!$(elem).is(":disabled")){
|
divTag.addClass(options.activeClass);
|
}
|
},
|
"mouseup.uniform touchbegin.uniform": function() {
|
divTag.removeClass(options.activeClass);
|
},
|
"mouseenter.uniform touchend.uniform": function() {
|
divTag.addClass(options.hoverClass);
|
},
|
"mouseleave.uniform": function() {
|
divTag.removeClass(options.hoverClass);
|
divTag.removeClass(options.activeClass);
|
}
|
});
|
|
//handle defaults
|
if($(elem).attr("checked")){
|
//box is checked by default, check span
|
spanTag.addClass(options.checkedClass);
|
}
|
//handle disabled state
|
if($(elem).attr("disabled")){
|
//box is checked by default, check our box
|
divTag.addClass(options.disabledClass);
|
}
|
|
storeElement(elem);
|
|
}
|
|
function doFile(elem){
|
//sanitize input
|
var $el = $(elem);
|
|
var divTag = $('<div />'),
|
filenameTag = $('<span>'+options.fileDefaultText+'</span>'),
|
btnTag = $('<span>'+options.fileBtnText+'</span>');
|
|
if(!$el.css("display") == "none" && options.autoHide){
|
divTag.hide();
|
}
|
|
divTag.addClass(options.fileClass);
|
filenameTag.addClass(options.filenameClass);
|
btnTag.addClass(options.fileBtnClass);
|
|
if(options.useID && $el.attr("id") != ""){
|
divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
}
|
|
//wrap with the proper elements
|
$el.wrap(divTag);
|
$el.after(btnTag);
|
$el.after(filenameTag);
|
|
//redefine variables
|
divTag = $el.closest("div");
|
filenameTag = $el.siblings("."+options.filenameClass);
|
btnTag = $el.siblings("."+options.fileBtnClass);
|
|
//set the size
|
if(!$el.attr("size")){
|
var divWidth = divTag.width();
|
//$el.css("width", divWidth);
|
$el.attr("size", divWidth/10);
|
}
|
|
//actions
|
var setFilename = function()
|
{
|
var filename = $el.val();
|
if (filename === '')
|
{
|
filename = options.fileDefaultText;
|
}
|
else
|
{
|
filename = filename.split(/[\/\\]+/);
|
filename = filename[(filename.length-1)];
|
}
|
filenameTag.text(filename);
|
};
|
|
// Account for input saved across refreshes
|
setFilename();
|
|
$el
|
.css("opacity", 0)
|
.bind({
|
"focus.uniform": function(){
|
divTag.addClass(options.focusClass);
|
},
|
"blur.uniform": function(){
|
divTag.removeClass(options.focusClass);
|
},
|
"mousedown.uniform": function() {
|
if(!$(elem).is(":disabled")){
|
divTag.addClass(options.activeClass);
|
}
|
},
|
"mouseup.uniform": function() {
|
divTag.removeClass(options.activeClass);
|
},
|
"mouseenter.uniform": function() {
|
divTag.addClass(options.hoverClass);
|
},
|
"mouseleave.uniform": function() {
|
divTag.removeClass(options.hoverClass);
|
divTag.removeClass(options.activeClass);
|
}
|
});
|
|
// IE7 doesn't fire onChange until blur or second fire.
|
if ($.browser.msie){
|
// IE considers browser chrome blocking I/O, so it
|
// suspends tiemouts until after the file has been selected.
|
$el.bind('click.uniform.ie7', function() {
|
setTimeout(setFilename, 0);
|
});
|
}else{
|
// All other browsers behave properly
|
$el.bind('change.uniform', setFilename);
|
}
|
|
//handle defaults
|
if($el.attr("disabled")){
|
//box is checked by default, check our box
|
divTag.addClass(options.disabledClass);
|
}
|
|
$.uniform.noSelect(filenameTag);
|
$.uniform.noSelect(btnTag);
|
|
storeElement(elem);
|
|
}
|
|
$.uniform.restore = function(elem){
|
if(elem == undefined){
|
elem = $($.uniform.elements);
|
}
|
|
$(elem).each(function(){
|
if($(this).is(":checkbox")){
|
//unwrap from span and div
|
$(this).unwrap().unwrap();
|
}else if($(this).is("select")){
|
//remove sibling span
|
$(this).siblings("span").remove();
|
//unwrap parent div
|
$(this).unwrap();
|
}else if($(this).is(":radio")){
|
//unwrap from span and div
|
$(this).unwrap().unwrap();
|
}else if($(this).is(":file")){
|
//remove sibling spans
|
$(this).siblings("span").remove();
|
//unwrap parent div
|
$(this).unwrap();
|
}else if($(this).is("button, :submit, :reset, a, input[type='button']")){
|
//unwrap from span and div
|
$(this).unwrap().unwrap();
|
}
|
|
//unbind events
|
$(this).unbind(".uniform");
|
|
//reset inline style
|
$(this).css("opacity", "1");
|
|
//remove item from list of uniformed elements
|
var index = $.inArray($(elem), $.uniform.elements);
|
$.uniform.elements.splice(index, 1);
|
});
|
};
|
|
function storeElement(elem){
|
//store this element in our global array
|
elem = $(elem).get();
|
if(elem.length > 1){
|
$.each(elem, function(i, val){
|
$.uniform.elements.push(val);
|
});
|
}else{
|
$.uniform.elements.push(elem);
|
}
|
}
|
|
//noSelect v1.0
|
$.uniform.noSelect = function(elem) {
|
function f() {
|
return false;
|
};
|
$(elem).each(function() {
|
this.onselectstart = this.ondragstart = f; // Webkit & IE
|
$(this)
|
.mousedown(f) // Webkit & Opera
|
.css({ MozUserSelect: 'none' }); // Firefox
|
});
|
};
|
|
$.uniform.update = function(elem){
|
if(elem == undefined){
|
elem = $($.uniform.elements);
|
}
|
//sanitize input
|
elem = $(elem);
|
|
elem.each(function(){
|
//do to each item in the selector
|
//function to reset all classes
|
var $e = $(this);
|
|
if($e.is("select")){
|
//element is a select
|
var spanTag = $e.siblings("span");
|
var divTag = $e.parent("div");
|
|
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
|
//reset current selected text
|
spanTag.html($e.find(":selected").html());
|
|
if($e.is(":disabled")){
|
divTag.addClass(options.disabledClass);
|
}else{
|
divTag.removeClass(options.disabledClass);
|
}
|
|
}else if($e.is(":checkbox")){
|
//element is a checkbox
|
var spanTag = $e.closest("span");
|
var divTag = $e.closest("div");
|
|
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
spanTag.removeClass(options.checkedClass);
|
|
if($e.is(":checked")){
|
spanTag.addClass(options.checkedClass);
|
}
|
if($e.is(":disabled")){
|
divTag.addClass(options.disabledClass);
|
}else{
|
divTag.removeClass(options.disabledClass);
|
}
|
|
}else if($e.is(":radio")){
|
//element is a radio
|
var spanTag = $e.closest("span");
|
var divTag = $e.closest("div");
|
|
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
spanTag.removeClass(options.checkedClass);
|
|
if($e.is(":checked")){
|
spanTag.addClass(options.checkedClass);
|
}
|
|
if($e.is(":disabled")){
|
divTag.addClass(options.disabledClass);
|
}else{
|
divTag.removeClass(options.disabledClass);
|
}
|
}else if($e.is(":file")){
|
var divTag = $e.parent("div");
|
var filenameTag = $e.siblings(options.filenameClass);
|
btnTag = $e.siblings(options.fileBtnClass);
|
|
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
|
filenameTag.text($e.val());
|
|
if($e.is(":disabled")){
|
divTag.addClass(options.disabledClass);
|
}else{
|
divTag.removeClass(options.disabledClass);
|
}
|
}else if($e.is(":submit") || $e.is(":reset") || $e.is("button") || $e.is("a") || elem.is("input[type=button]")){
|
var divTag = $e.closest("div");
|
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
|
if($e.is(":disabled")){
|
divTag.addClass(options.disabledClass);
|
}else{
|
divTag.removeClass(options.disabledClass);
|
}
|
|
}
|
|
});
|
};
|
|
return this.each(function() {
|
if($.support.selectOpacity){
|
var elem = $(this);
|
|
if(elem.is("select")){
|
//element is a select
|
if(elem.attr("multiple") != true){
|
//element is not a multi-select
|
if(elem.attr("size") == undefined || elem.attr("size") <= 1){
|
doSelect(elem);
|
}
|
}
|
}else if(elem.is(":checkbox")){
|
//element is a checkbox
|
doCheckbox(elem);
|
}else if(elem.is(":radio")){
|
//element is a radio
|
doRadio(elem);
|
}else if(elem.is(":file")){
|
//element is a file upload
|
doFile(elem);
|
}else if(elem.is(":text, :password, input[type='email']")){
|
doInput(elem);
|
}else if(elem.is("textarea")){
|
doTextarea(elem);
|
}else if(elem.is("a") || elem.is(":submit") || elem.is(":reset") || elem.is("button") || elem.is("input[type=button]")){
|
doButton(elem);
|
}
|
|
}
|
});
|
};
|
})(jQuery);
|
