Skip to content
This repository has been archived by the owner on Sep 24, 2019. It is now read-only.

Commit

Permalink
Added support for inputs, textareas, and buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh Pyles committed Jul 6, 2010
1 parent 58b7e9f commit c3c38da
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 41 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
$ cat .gitignore

demo/**/*
9 changes: 8 additions & 1 deletion README.textile
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $("select").uniform();

To “uniform” all possible form elements, just do something like this:

$("select, input[type=checkbox], input[type=radio], input[type=file]").uniform();
$("select, input[type=checkbox], input[type=radio], input[type=file], input[type=submit], a.button, button").uniform();

A complete tag in the HEAD section of your site can therefore look like this:

Expand Down Expand Up @@ -91,6 +91,13 @@ Sets the text written on the action button inside a file upload input.

@$(":file").uniform({fileBtnText: 'Choose…'});@

h3. buttonClass(string)

*Default:* "button"
Sets the class given to a button that's been uniformed

@$("input[type=button]").uniform({buttonClass: 'myBtnClass'});@

h3. checkedClass (string)

*Default:* “checked”
Expand Down
65 changes: 42 additions & 23 deletions css/uniform.default.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ http://pixelmatrixdesign.com/uniform/themer.html

div.selector,
div.selector span,
div.checker span,
div.checker span,
div.radio span,
div.uploader,
div.uploader span.action,
Expand Down Expand Up @@ -325,32 +325,10 @@ div.uploader.disabled span.action {

div.button {
background-position: 0px -523px;
height: 30px;
cursor: pointer;
position: relative;
display: inline-block;
}

div.button a,
div.button button,
div.button input {
position: absolute;
}

div.button span {
background-position: right -643px;
margin-left: 13px;
display: block;
height: 30px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 2px;
padding-right: 15px;
line-height: 30px;
text-align: center;
}

div.button.focus,
Expand Down Expand Up @@ -392,6 +370,25 @@ div.button:disabled span {

/* PRESENTATION */

/* Button */

div.button {
height: 30px;
}

div.button span {
margin-left: 13px;
height: 22px;
padding-top: 8px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 2px;
padding-right: 15px;
}

/* Select */
div.selector {
margin-bottom: 20px;
Expand Down Expand Up @@ -478,6 +475,28 @@ Not advised to edit stuff below this line
outline: 0;
}

/* Button */

div.button a,
div.button button,
div.button input {
position: absolute;
}

div.button {
cursor: pointer;
position: relative;
display: -moz-inline-box;
display: inline-block;
}

div.button span {
display: -moz-inline-box;
display: inline-block;
line-height: 1;
text-align: center;
}

/* Select */

div.selector {
Expand Down
37 changes: 21 additions & 16 deletions jquery.uniform.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,6 @@ Enjoy!
}

function doButton(elem){
/*
How this could work:
Allow use of A, Button, or Input type='submit' by
wrapping it in div/span tags and then passing the click
event to the actual element.
It's crazy, but it just might work!
*/
$el = elem;

var divTag = $("<div>"),
Expand Down Expand Up @@ -445,16 +436,13 @@ Enjoy!
});

// IE7 doesn't fire onChange until blur or second fire.
if ($.browser.msie)
{
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
{
}else{
// All other browsers behave properly
$el.bind('change.uniform', setFilename);
}
Expand All @@ -472,6 +460,10 @@ Enjoy!
}

$.uniform.restore = function(elem){
if(elem == undefined){
elem = $($.uniform.elements);
}

$(elem).each(function(){
if($(this).is(":checkbox")){
//unwrap from span and div
Expand All @@ -489,6 +481,9 @@ Enjoy!
$(this).siblings("span").remove();
//unwrap parent div
$(this).unwrap();
}else if($(this).is("button, :submit, a")){
//unwrap from span and div
$(this).unwrap().unwrap();
}

//unbind events
Expand All @@ -501,7 +496,7 @@ Enjoy!
var index = $.inArray($(elem), $.uniform.elements);
$.uniform.elements.splice(index, 1);
});
}
};

function storeElement(elem){
//store this element in our global array
Expand Down Expand Up @@ -604,9 +599,19 @@ Enjoy!
}else{
divTag.removeClass(options.disabledClass);
}
}else if($e.is(":submit") || $e.is("button") || $e.is("a")){
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){
Expand Down
2 changes: 1 addition & 1 deletion jquery.uniform.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c3c38da

Please sign in to comment.