/* Uniform v1.7.3 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 and his noSelect 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', select2Class: 'selector2', /* Second style for small date select boxes*/ select3Class: 'selector3', /* Third style for small date select boxes*/ 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 }, 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){ $el = elem; var divTag = $("
"), spanTag = $(""); divTag.addClass(options.buttonClass); if(options.useID && $el.attr("id") != "") divTag.attr("id", options.idPrefix+"-"+$el.attr("id")); var btnText; if($el.is("a")){ btnText = $el.text(); }else if($el.is("button")){ btnText = $el.text(); }else if($el.is(":submit") || $el.is("input[type=button]")){ btnText = $el.attr("value"); } if(btnText == "") btnText = "Submit"; spanTag.html(btnText); $el.hide(); $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); }, "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 divTag = $('
'), spanTag = $(''); 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.text()); 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").text()); 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); }, "keyup.uniform": function(){ spanTag.text(elem.find(":selected").text()); } }); //handle disabled state if($(elem).attr("disabled")){ //box is checked by default, check our box divTag.addClass(options.disabledClass); } $.uniform.noSelect(spanTag); storeElement(elem); } /* Second style for small date select boxes*/ function doSelect2(elem){ var divTag = $('
'), spanTag = $(''); divTag.addClass(options.select2Class); 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.text()); 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").text()); 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); }, "keyup.uniform": function(){ spanTag.text(elem.find(":selected").text()); } }); //handle disabled state if($(elem).attr("disabled")){ //box is checked by default, check our box divTag.addClass(options.disabledClass); } $.uniform.noSelect(spanTag); storeElement(elem); } /* Second style for small date select boxes*/ function doSelect3(elem){ var divTag = $('
'), spanTag = $(''); divTag.addClass(options.select3Class); 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.text()); 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").text()); 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); }, "keyup.uniform": function(){ spanTag.text(elem.find(":selected").text()); } }); //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 divTag = $('
'), spanTag = $(''); 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); } }); //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 divTag = $('
'), spanTag = $(''); 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 $("."+options.radioClass + " 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); } }); //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 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").text()); 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("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){ if (elem.attr("class")== "selectDate") { doSelect2(elem); }else if (elem.attr("class")== "selectDateMonth") { doSelect3(elem); }else { 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(":text, :password, input[type='email']")){ doInput(elem); }else if(elem.is("textarea")){ doTextarea(elem); }else if(elem.is("a") || elem.is(":submit") || elem.is("button") || elem.is("input[type=button]")){ doButton(elem); } } }); }; })(jQuery);