以下是 jquery+html5注册插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8"/>
<title>jq-idealforms</title>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<link href="css/1140.css" rel="stylesheet"/>
<link href="css/normalize.css" rel="stylesheet"/>
<link href="css/jquery-ui.css" rel="stylesheet"/>
<link href="css/jquery.idealforms.min.css" rel="stylesheet" media="screen"/>
<link href="css/styles.css" rel="stylesheet" media="all"/>
</head>
<body>
<header>
<div class="container clearfix">
<div class="row">
<div class="twelvecol last">
<h1 id="title"></h1>
</div>
</div>
</div>
</header>
<div id="main">
<div class="container clearfix">
<div class="row">
<div class="fourcol content">
<h1>Ideal Forms</h1>
<p>Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms.</p>
<h2>Features:</h2>
<ul>
<li>Fully responsive</li>
<li>Keyboard support</li>
<li>Customizable input types <code>select</code>, <code>radio</code>, <code>checkbox</code> and <code>file</code></li>
<li>Custom datepicker using jQuery UI (with fallback)</li>
<li>"On the spot" validation</li>
<li>Localization</li>
<!--<li>HTML5 <code>placeholder</code> polyfill</li>-->
</ul>
<h2>Support:</h2>
<ul>
<li><strong>Browsers: </strong>IE8+, Webkit, Firefox, Opera, iOS5+, Android 4.0+</li>
<li><strong>jQuery: </strong>1.7+, UI 1.8+</li>
<li><strong>License: </strong>GPL or MIT</li>
</ul>
</div>
<div class="eightcol last">
<!-- Begin Form -->
<form id="my-form">
<section name="Step 1">
<div>
<h2>Essential:</h2>
<p>What? Custom file inputs? Oh yeah!</p>
</div>
<div><label>Username:</label><input id="username" name="username" type="text"/></div>
<div><label>Password:</label><input id="pass" name="password" type="password"/></div>
<div><label>E-Mail:</label><input id="email" name="email" data-ideal="required email" type="email"/></div>
<div><label>Date:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="mm/dd/yyyy"/></div>
<div><label>Image:</label><input id="file" name="file" multiple type="file"/></div>
<div><label>Website:</label><input name="website" data-ideal="url" type="text"/></div>
</section>
<section name="Step 2">
<div>
<h2>Options:</h2>
<p>Wow, nice radios and checkboxes!</p>
</div>
<div id="languages">
<label>Languages:</label>
<label><input type="checkbox" name="langs[]" value="English"/>English</label>
<label><input type="checkbox" name="langs[]" value="Chinese"/>Chinese</label>
<label><input type="checkbox" name="langs[]" value="Spanish"/>Spanish</label>
<label><input type="checkbox" name="langs[]" value="French"/>French</label>
</div>
<div><label>Radios:</label>
<label><input type="radio" name="radio" checked/>One</label>
<label><input type="radio" name="radio"/>Two</label>
<label><input type="radio" name="radio"/>Three</label>
</div>
</section>
<section name="Step 3">
<div>
<h2>Contact:</h2>
<p>What about that handsome select!</p>
</div>
<div><label>Phone:</label><input type="tel" name="phone" data-ideal="phone"/></div>
<div><label>State:</label>
<select id="states" name="states">
<option value="default">– Select a State –</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div><label>Zip:</label><input type="text" name="zip" data-ideal="zip"/></div>
<div><label>Comments:</label><textarea id="comments" name="comments"></textarea></div>
</section>
<div><hr/></div>
<div>
<button type="submit">Submit</button>
<button id="reset" type="button">Reset</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
</div>
</div><! -- End Main -->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.idealforms.js"></script>
<script>
var options = {
onFail: function() {
alert( $myform.getInvalid().length +' invalid fields.' )
},
inputs: {
'password': {
filters: 'required pass',
},
'username': {
filters: 'required username',
data: {
//ajax: { url:'validate.php' }
}
},
'file': {
filters: 'extension',
data: { extension: ['jpg'] }
},
'comments': {
filters: 'min max',
data: { min: 50, max: 200 }
},
'states': {
filters: 'exclude',
data: { exclude: ['default'] },
errors : {
exclude: 'Select a State.'
}
},
'langs[]': {
filters: 'min max',
data: { min: 2, max: 3 },
errors: {
min: 'Check at least <strong>2</strong> options.',
max: 'No more than <strong>3</strong> options allowed.'
}
}
}
};
var $myform = $('#my-form').idealforms(options).data('idealforms');
$('#reset').click(function(){ $myform.reset().fresh().focusFirst() });
$myform.focusFirst();
</script>
</body>
</html>
JS代码(html5shiv.js):
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;
(function(window,document){
/** Preset options */
var options = window.html5 ||{
}
;
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE (this list can be shortend) **/
var saveClones = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function(){
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume,that the browser supports HTML5 Styles | this fails in Chrome 8 supportsHtml5Styles = ('hidden' in a);
//if we are part of Modernizr,we do an additional test to solve the Chrome 8 fail if(supportsHtml5Styles && typeof injectElementWithStyles == 'function'){
injectElementWithStyles('#modernizr{
}
',function(node){
node.hidden = true;
supportsHtml5Styles = (window.getComputedStyle ? getComputedStyle(node,null):node.currentStyle).display == 'none';
}
);
}
supportsUnknownElements = a.childNodes.length == 1 || (function(){
// assign a false positive if unable to shiv try{
(document.createElement)('a');
}
catch(e){
return true;
}
var frag = document.createDocumentFragment();
return ( typeof frag.cloneNode == 'undefined' || typeof frag.createDocumentFragment == 'undefined' || typeof frag.createElement == 'undefined' );
}
());
}
());
/*--------------------------------------------------------------------------*/
/** * Creates a style sheet with the given CSS text and adds it to the document. * @private * @param{
Document}
ownerDocument The document. * @param{
String}
cssText The CSS text. * @returns{
StyleSheet}
The style element. */
function addStyleSheet(ownerDocument,cssText){
var p = ownerDocument.createElement('p'),parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild,parent.firstChild);
}
/** * Returns the value of `html5.elements` as an array. * @private * @returns{
Array}
An array of shived element node names. */
function getElements(){
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' '):elements;
}
/** * Shivs the `createElement` and `createDocumentFragment` methods of the document. * @private * @param{
Document|DocumentFragment}
ownerDocument The document. */
function shivMethods(ownerDocument){
var cache ={
}
,docCreateElement = ownerDocument.createElement,docCreateFragment = ownerDocument.createDocumentFragment,frag = docCreateFragment();
ownerDocument.createElement = function(nodeName){
//abort shiv if(!html5.shivMethods){
return docCreateElement(nodeName);
}
var node;
if(cache[nodeName]){
node = cache[nodeName].cloneNode();
}
else if(saveClones.test(nodeName)){
node = (cache[nodeName] = docCreateElement(nodeName)).cloneNode();
}
else{
node = docCreateElement(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because // * Attributes like `name` or `type` cannot be set/changed once an element // is inserted into a document/fragment // * Link elements with `src` attributes that are inaccessible,as with // a 403 response,will cause the tab/window to crash // * Script elements appended to fragments will execute when their `src` // or `text` property is set return node.canHaveChildren && !reSkip.test(nodeName) ? frag.appendChild(node):node;
}
;
ownerDocument.createDocumentFragment = Function('h,f','return function(){
' + 'var n=f.cloneNode(),c=n.createElement;
' + 'h.shivMethods&&(' + // unroll the `createElement` calls getElements().join().replace(/\w+/g,function(nodeName){
docCreateElement(nodeName);
frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}
) + ');
return n}
' )(html5,frag);
}
/*--------------------------------------------------------------------------*/
/** * Shivs the given document. * @memberOf html5 * @param{
Document}
ownerDocument The document to shiv. * @returns{
Document}
The shived document. */
function shivDocument(ownerDocument){
var shived;
if (ownerDocument.documentShived){
return ownerDocument;
}
if (html5.shivCSS && !supportsHtml5Styles){
shived = !!addStyleSheet(ownerDocument,// corrects block display not defined in IE6/7/8/9 'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
' + // corrects audio display not defined in IE6/7/8/9 'audio{
display:none}
' + // corrects canvas and video display not defined in IE6/7/8/9 'canvas,video{
display:inline-block;
*display:inline;
*zoom:1}
' + // corrects 'hidden' attribute and audio[controls] display not present in IE7/8/9 '[hidden]{
display:none}
audio[controls]{
display:inline-block;
*display:inline;
*zoom:1}
' + // adds styling not present in IE6/7/8/9 'mark{
background:#FF0;
color:#000}
' );
}
if (!supportsUnknownElements){
shived = !shivMethods(ownerDocument);
}
if (shived){
ownerDocument.documentShived = shived;
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/** * The `html5` object is exposed so that more elements can be shived and * existing shiving can be detected on iframes. * @type Object * @example * * // options can be changed before the script is included * html5 ={
'elements':'mark section','shivCSS':false,'shivMethods':false}
;
*/
var html5 ={
/** * An array or space separated string of node names of the elements to shiv. * @memberOf html5 * @type Array|String */
'elements':options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',/** * A flag to indicate that the HTML5 style sheet should be inserted. * @memberOf html5 * @type Boolean */
'shivCSS':!(options.shivCSS === false),/** * A flag to indicate that the document's `createElement` and `createDocumentFragment` * methods should be overwritten. * @memberOf html5 * @type Boolean */
'shivMethods':!(options.shivMethods === false),/** * A string to describe the type of `html5` object ("default" or "default print"). * @memberOf html5 * @type String */
'type':'default',// shivs the document according to the specified `html5` object options 'shivDocument':shivDocument}
;
/*--------------------------------------------------------------------------*/
// expose html5 window.html5 = html5;
// shiv the document shivDocument(document);
}
(this,document));
CSS代码(1140.css):
/* ==================================================================================================================== */
/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com */
/* ==================================================================================================================== */
.container{padding-left:20px;padding-right:20px;}
.row{width:100%;max-width:1140px;min-width:755px;margin:0 auto;/* overflow:hidden;*/
}
.onecol,.twocol,.threecol,.fourcol,.fivecol,.sixcol,.sevencol,.eightcol,.ninecol,.tencol,.elevencol{margin-right:3.8%;float:left;min-height:1px;}
.row .onecol{width:4.85%;}
.row .twocol{width:13.45%;}
.row .threecol{width:22.05%;}
.row .fourcol{width:30.75%;}
.row .fivecol{width:39.45%;}
.row .sixcol{width:48%;}
.row .sevencol{width:56.75%;}
.row .eightcol{width:65.4%;}
.row .ninecol{width:74.05%;}
.row .tencol{width:82.7%;}
.row .elevencol{width:91.35%;}
.row .twelvecol{width:100%;float:left;}
.last{margin-right:0px;}
img,object,embed{max-width:100%;}
img{height:auto;}
/* Smaller screens */
@media only screen and (max-width:1023px){body{font-size:0.8em;line-height:1.5em;}
}
/* Mobile */
@media handheld,only screen and (max-width:767px){body{font-size:16px;-webkit-text-size-adjust:none;}
.row,body,.container{width:100%;min-width:0;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;}
.row .onecol,.row .twocol,.row .threecol,.row .fourcol,.row .fivecol,.row .sixcol,.row .sevencol,.row .eightcol,.row .ninecol,.row .tencol,.row .elevencol,.row .twelvecol{width:auto;float:none;margin-left:0px;margin-right:0px;padding-left:20px;padding-right:20px;}
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{clear:both;}
/* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem.*/
.clearfix{zoom:1;}
CSS代码(styles.css):
body{font:normal 15px/1.5 Arial,Helvetica,Free Sans,sans-serif;color:#222;background:#333;overflow-y:scroll;}
#main{background:url(img/pattern.png);padding:60px 0;}
header{padding:15px 0;background:#285E85;box-shadow:inset 0 -1px 5px rgba(0,0,0,.3);}
.content h1,h2,h3,h4{margin:0;padding:0;margin-bottom:.5em;line-height:1;}
.content h1{font-size:30px;}
.content p{margin:.5em 0 1em 0;}
.content ul{margin:0 0 1.5em 0;padding:0;list-style:none;}
.content li{margin:.5em 0;padding-left:1.5em;background:url(img/bullet.png) 0 2px no-repeat;}
.content a:link,.content a:visited{color:#2680BF;text-decoration:none;border-bottom:1px solid #2680BF;font-weight:bold;}
.content code{font-family:Menlo,Consolas,Courier New,monospaced;background:white;padding:.2em .5em;font-size:85%;border-radius:3px;}
footer{padding:40px 0;background:#333;color:white;box-shadow:inset 0 5px 5px rgba(0,0,0,.3);}
footer a:link,footer a:visited{color:white;border-color:white;}
#fork{float:right;margin:0;}
#copy{display:inline-block;margin:0;}
#title{color:white;font-size:18px;display:inline-block;margin:0;line-height:34px;}
#title img{vertical-align:middle;}
#calltoaction{float:right;margin:0 2em;line-height:34px;color:white;}
#download{float:right;background:white;padding:.5em 1.6em;color:#285E85;text-decoration:none;font-weight:bold;box-shadow:0 0 5px rgba(0,0,0,.5);border-radius:3px;}
#download:active{position:relative;top:1px;box-shadow:none;}
.mycol{padding-top:14px;}
#donate{margin-top:15px;}
/* Form * ------------------------------------------------ */
#my-form{border:1px solid #ccc;padding:3em;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.2);}
#comments{width:350px;height:100px;}
/* Labels on top */
/*.ideal-field{clear:both;margin-top:1em;}
*/
/*.ideal-error{margin-top:3em;}
*/
/*.stack .ideal-field{margin:auto;}
*/
/* Responsive * ------------------------------------------------ */
@media all and (max-width:768px){#main{padding:30px 0;}
#my-form{padding:1.5em;margin-top:30px;}
#calltoaction{float:left;margin:0;}
#download,#title,#calltoaction{float:left;clear:both;}
#download{float:left;margin-top:.8em;}
}
分享到QQ
分享到微博
微信扫一扫
