SimpleFormUI
Light-weight jQuery plugin to insert (semantic-inspired) functional elements around elements that usually are difficult to style cross-browser. The plugin includes basic CSS to create it's functionality, but you're supposed to do your styling yourself. However, example styling is included. Currently supported elements are: select, input[type="radio"] & input[type="checkbox"].
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Plugin - SimpleFormUI</title>
<link rel="shortcut icon" href="http://ljd.dk/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form class="group">
<h1>SimpleFormUI</h1>
<label for="name">Name</label>
<div class="textbox">
<input name="name" type="text" id="name" placeholder="Name" />
</div>
<label for="email">E-mail</label>
<div class="textbox">
<input name="email" type="email" id="email" placeholder="E-mail" />
</div>
<fieldset class="group">
<legend>Please select your gender, if applicable</legend>
<label for="male">
<input id="male" name="gender" type="radio" value="male" checked="checked" />
Male
</label>
<label for="female">
Female
<input id="female" name="gender" type="radio" value="female" />
</label>
</fieldset>
<select name="hobby" id="hobby" name="hobby" class="hobby">
<option selected="selected" value="0" class="highlight">Select a hobby</option>
<option value="1">Knitting</option>
<option value="2">Mountainbiking</option>
<option value="3">Croquis</option>
<option value="4">Web Front-end Development</option>
<option value="5">Scooba diving</option>
</select>
<select name="hobby" id="hobby" name="hobby">
<option selected="selected" value="0" class="default">Select a hobby</option>
<option value="1" class="highlight">Knitting</option>
<option...CSS
@charset "utf-8";
/* SimpleFormUI Example CSS - All styles not directly related to the plugin */
/*=RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;} section, article, header, footer, nav, aside, hgroup, video { display:block; }
/*=LAYOUT*/
html {
overflow-y:scroll;
height: 100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
height: 100%;
background-color:#222b3b;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.1, #222b3b), color-stop(0.9, #232C3D));
background-image:-moz-linear-gradient(center bottom, #222b3b 10%, #232C3D 90%);
background-repeat: no-repeat;
color:#1e2736;
}
form, section {
background-color:#eee;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.1, rgb(219,219,219)), color-stop(0.9, rgb(246,246,246)));
background-image:-moz-linear-gradient(center bottom, rgb(219,219,219) 10%, rgb(246,246,246) 90%);
-webkit-background-clip: padding-box;
border:1px solid #fff;
-o-border-radius:1.2em;
-moz-border-radius:1.2em;
-webkit-border-radius:1.2em;
border-radius:1.2em;
width:32em;
padding:2em;
margin:5em auto;
-o-box-shadow:0 0 1em rgba(0,0,0,0.4);
-moz-box-shadow:0 0 1em rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 1em rgba(0,0,0,0.4);
box-shadow:0 0 1em rgba(0,0,0,0.4);
}
h1 {
font-size:4.8em;
font-family:"Lobster", Arial, Helvetica, sans-serif;
-o-text-shadow:0.021em 0.021em 0.021em #fff, -0.021em -0.021em 0.021em #ccc;
-moz-text-shadow:0.021em 0.021em 0.021em #fff, -0.021em -0.021em 0.021em #ccc;
...JavaScript
/*************************************************
** jQuery simpleFormUI version 0.3.1
** Copyright Laust Deleuran, licensed GNU GPL v3
** http://dev.ljd.dk/simpleformui
**************************************************/
(function($) {
$.fn.disableTextSelect=function() {
return this.each(function() {
$(this).css({
'MozUserSelect': 'none'
}).select(function() {
return false;
}).mousedown(function() {
return false;
});
});
};
$.fn.enableTextSelect=function() {
return this.each(function() {
$(this).css({
'MozUserSelect': ''
}).select(function() {
return true;
}).mousedown(function() {
return true;
});
});
};
$.fn.simpleFormUI=function(options) {
// Settings
var settings={
cssClass: 'simpleFormUI',
inheritClasses: true,
inlineStyles: true,
keyboardSupport: true,
hideStyles: { 'visibility': 'hidden','position': 'absolute','left': '-9999em','outline': 'none none'} // {'position':'absolute','left':'-20000px'} // { 'display':'none' } IE doesnt seem to change state on none-displayed elements
};
if(options) {
$.extend(settings,options);
}
var cssClassSelector=settings.cssClass?'.'+settings.cssClass:'';
var sfui={
selectOption: function(link,selector,$active) {
if($(link).attr('id')) {
var $link=$(link);
var $origin=$link.closest(selector+'.select');
var val=$link.attr('id').split('select-')[1];
var $option=$origin.find('option[value="'+val+'"]');
$origin.find('li').removeClass('selected');
$link.addClass('selected');
$origin.find('option').removeAttr('selected');
$option.attr('selected','selected').parent().trigger('change');
$active.text($option.text()).removeAttr('class').attr('class',$link.attr('data-cssclass'));
}
}
}
// Loop and return object...