以下是 jQuery鼠标移动发出气泡动画代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery鼠标移动发出气泡动画</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style3.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<link rel="stylesheet" type="text/css" href="css/style6.css">
<link rel="stylesheet" type="text/css" href="css/stylelogin.css">
<link rel="stylesheet" type="text/css" href="css/styleload.css" >
<link href="css/jquery.jgrowl.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
div.jGrowl div.manilla {
background-color: #FFF1C2;
color: navy;
}
div.jGrowl div.smoke {
background: url('images/smoke.png') no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width: 298px;
height: 73px;
overflow: hidden;
}
div.jGrowl div.flora {
background: #E6F7D4 url(flora-notification.png) no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
opacity: 1;
filter: alpha(opacity = 100);
width: 270px;
height: 90px;
padding: 0px;
overflow: hidden;
border-color: #5ab500;
}
div.jGrowl div.flora div.message {
padding: 5px;
color: #000;
}
div.jGrowl div.flora div.header {
background: url(flora-header.png) no-repeat;
padding: 5px;
}
div.jGrowl div.flora div.close {
background: url(flora-close.png) no-repeat;
padding: 5px;
color: transparent;
padding: 0px;
margin: 5px;
width: 17px;
}
div.jGrowl div.iphone {
font-family: "Helvetica Neue", "Helvetica";
font-size: 12px;
background: url(iphone.png) no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
opacity: .90;
filter: alpha(opacity = 90);
width: 235px;
height: 137px;
overflow: hidden;
border-color: #5ab500;
color: #fff;
}
div.jGrowl div.iphone .jGrowl-close {
padding-right: 20px;
}
div.jGrowl div.iphone div.message {
padding-top: 0px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
}
div.jGrowl div.iphone div.header {
padding: 7px;
padding-left: 15px;
padding-right: 15px;
font-size: 17px;
}
div.jGrowl div.iphone div.close {
display: none;
}
div#random {
width: 1000px;
background-color: red;
line-height: 60px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script src="js/jquery.jgrowl.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
<script type="text/javascript" src="js/sketch.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script src="js/modernizr.custom.63321.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/PisualFumikaLogin.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body id="body">
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#test2').jGrowl("Trying a background image.", {
theme: 'smoke',
closer: false,
life: 999999
});
});
})(jQuery);
</script>
<div id="test2" class="bottom-left"></div>
<div id="Loading" class="demo-3 demo-dark" style="z-index:10002;position:fixed;margin-left:47%;margin-top:9%;display:none;">
<div class="container">
<section class="main">
<!-- the component -->
<ul class="bokeh">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</div>
</div>
<script>
function CloseMouseEffects() {
demo.mousemove = function() {
};
}
function OpenMouseEffects() {
demo.mousemove = function() {
var particle, theta, force, touch, max, i, j, n;
for (i = 0, n = demo.touches.length; i < n; i++) {
touch = demo.touches[i], max = random(1, 4);
for (j = 0; j < max; j++) {
demo.spawn(touch.x, touch.y);
}
}
};
}
function ChangeBackgroundWhite()
{
document.getElementById("body").style.background="#ddd url(images/bg.jpg) repeat top left";
}
function ChangeBackgroundBlack()
{
document.getElementById("body").style.background="#ddd url(images/egg_shell.png) repeat top left";
}
var menu = ui.menu().add('Close Mouse Effects', CloseMouseEffects).add(
'Open Mouse Effects', OpenMouseEffects).add("ChangeBackgroundWhite",ChangeBackgroundWhite).add("ChangeBackgroundBlack",ChangeBackgroundBlack);
menu.on('Add item', function() {
console.log('added an item');
});
oncontextmenu = function(e) {
e.preventDefault();
menu.moveTo(e.pageX, e.pageY).show();
};
</script>
<script>
$.jGrowl("Welcome to Fumika System !!");
$
.jGrowl(
"Connect Servers Stahd By ..<br>Conect Spring security System.... <br>Get ROLE_ANONYMOUS Role ",
{
theme : 'manilla',
speed : 'slow',
animateOpen : {
height : "show"
},
animateClose : {
height : "hide"
}
});
</script>
<div id="test" style=" position:fixed;top:0px;z-index:20;"></div>
<div id="BlackGroung"
style="background: rgba(0,0,0,0.8);z-index:9999;width:100%;height:100%;position:fixed;display:none"
onclick="$('#BlackGroung').fadeOut(400);$('#LoginForm').fadeOut(300);stangbylogin();">
<img src="images/pisuallogo.png" style="margin-left:39%;margin-top:8%">
<script>
function stangbylogin() {
$.jGrowl("Stand By Login..", {
theme : 'manilla',
speed : 'slow',
animateOpen : {
height : "show"
},
animateClose : {
height : "hide"
}
});
}
</script>
</div>
<div class="container">
<header>
<img src="images/fumikaLogo.png" style="top:100px;">
<div class="support-note">
<!-- let's check browser support with modernizr -->
<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
<span class="no-csstransforms">CSS transforms are not
supported in your browser</span>
<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
<span class="no-csstransitions">CSS transitions are not
supported in your browser</span> <span class="note-ie">Sorry, only
modern browsers.</span>
</div>
</header>
<div id="sb-container" class="sb-container">
<div>
<span class="sb-icon icon-cog"></span>
<h4>
<span>All Settings</span>
</h4>
</div>
<div>
<span class="sb-icon icon-flight"></span>
<h4>
<span>User Modes</span>
</h4>
</div>
<div>
<span class="sb-icon icon-eye"></span>
<h4>
<span>Browse All</span>
</h4>
</div>
<div>
<span class="sb-icon icon-install"></span>
<h4>
<span>Install App</span>
</h4>
</div>
<div>
<span class="sb-icon icon-bag"></span>
<h4>
<span>Productivity</span>
</h4>
</div>
<div>
<span class="sb-icon icon-globe"></span>
<h4>
<span>All Options</span>
</h4>
</div>
<div>
<span class="sb-icon icon-picture"></span>
<h4>
<span>User Images</span>
</h4>
</div>
<div>
<span class="sb-icon icon-video"></span>
<h4>
<span>User Videos</span>
</h4>
</div>
<div>
<span class="sb-icon icon-download"></span>
<h4>
<span>Download App</span>
</h4>
</div>
<div>
<span class="sb-icon icon-mobile"></span>
<h4>
<span>Mobile Theme</span>
</h4>
</div>
<div onclick="login();">
<span class="sb-icon icon-camera"></span>
<h4>
<span>Login SYstem</span>
</h4>
</div>
<div>
<h4>
<span>Profile</span>
</h4>
<span class="sb-toggle">Click to open</span>
</div>
</div>
<!-- sb-container -->
</div>
<script>
function login() {
$("#Login").fadeTo(200, 1);
ui.dialog('Overlay time').closable().overlay().showno();
document.getElementById("Login").style.visibility = "visible";
}
</script>
<div id="Login"
style="position:fixed;z-index:999;text-align:center;visibility:hidden;top:20%;left:35%;">
<div>
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Select You Login Method</option>
<option value="1" class="icon-camera">Safe Login Model!</option>
<option value="2" class="icon-diamond">Normel Login Model!</option>
<option value="3" class="icon-rocket">Remote Login Model!</option>
<option value="4" class="icon-star">Login Out!</option>
<option value="5" class="icon-clock">Forget Password</option>
</select>
</div>
</div>
<div id="LoginForm"
style="position:fixed;z-index:10000;top:30%;left:37%;display:none;">
<form class="form-5 clearfix" id="Safelogin">
<p>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" name="password" id="password"
placeholder="Password"> <input type="password"
name="SafeNum" id="password" placeholder="SafeNum">
</p>
<button type="button" name="submit" style="height:153px" onclick="PostJsonAjax('../login')">
<i class="icon-arrow-right"></i> <span>Sign in</span>
</button>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#cd-dropdown').dropdown({
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
});
});
</script>
<script type="text/javascript">
$(function() {
$('#sb-container').swatchbook({
// number of degrees that is between each item
angleInc : 15,
neighbor : 15,
// if it should be closed by default
initclosed : true,
// index of the element that when clicked, triggers the open/close function
// by default there is no such element
closeIdx : 11
});
});
</script>
<script>
// ----------------------------------------
// Particle
// ----------------------------------------
function Particle(x, y, radius) {
this.init(x, y, radius);
}
Particle.prototype = {
init : function(x, y, radius) {
this.alive = true;
this.radius = radius || 10;
this.wander = 0.15;
this.theta = random(TWO_PI);
this.drag = 0.92;
this.color = '#fff';
this.x = x || 0.0;
this.y = y || 0.0;
this.vx = 0.0;
this.vy = 0.0;
},
move : function() {
this.x += this.vx;
this.y += this.vy;
this.vx *= this.drag;
this.vy *= this.drag;
this.theta += random(-0.5, 0.5) * this.wander;
this.vx += sin(this.theta) * 0.1;
this.vy += cos(this.theta) * 0.1;
this.radius *= 0.96;
this.alive = this.radius > 0.5;
},
draw : function(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
ctx.fillStyle = this.color;
ctx.fill();
}
};
// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
'#FF4E50', '#F9D423' ];
var particles = [];
var pool = [];
var demo = Sketch.create({
container : document.getElementById('test')
});
demo.setup = function() {
// Set off some initial particles.
var i, x, y;
// for ( i = 0; i < 20; i++ ) {
x = (demo.width * 0.5) + random(-100, 100);
y = (demo.height * 0.5) + random(-100, 100);
demo.spawn(0, 999);
// }
};
demo.spawn = function(x, y) {
if (particles.length >= MAX_PARTICLES)
pool.push(particles.shift());
particle = pool.length ? pool.pop() : new Particle();
particle.init(x, y, random(5, 40));
particle.wander = random(0.5, 2.0);
particle.color = random(COLOURS);
particle.drag = random(0.9, 0.99);
theta = random(TWO_PI);
force = random(2, 8);
particle.vx = sin(theta) * force;
particle.vy = cos(theta) * force;
particles.push(particle);
};
demo.update = function() {
var i, particle;
for (i = particles.length - 1; i >= 0; i--) {
particle = particles[i];
if (particle.alive)
particle.move();
else
pool.push(particles.splice(i, 1)[0]);
}
};
demo.draw = function() {
demo.globalCompositeOperation = 'lighter';
for ( var i = particles.length - 1; i >= 0; i--) {
particles[i].draw(demo);
}
};
demo.mousemove = function() {
var particle, theta, force, touch, max, i, j, n;
for (i = 0, n = demo.touches.length; i < n; i++) {
touch = demo.touches[i], max = random(1, 4);
for (j = 0; j < max; j++) {
demo.spawn(touch.x, touch.y);
}
}
};
</script>
</body>
</html>
JS代码(form.js):
/* * jQuery form plugin * @requires jQuery v1.1 or later * * Examples at:http://malsup.com/jquery/form/ * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Revision:$Id$ * Version:1.0.3 */
(function($){
/** * ajaxSubmit() provides a mechanism for submitting an HTML form using AJAX. * * ajaxSubmit accepts a single argument which can be either a success callback function * or an options Object. If a function is provided it will be invoked upon successful * completion of the submit and will be passed the response from the server. * If an options Object is provided,the following attributes are supported:* * target:Identifies the element(s) in the page to be updated with the server response. * This value may be specified as a jQuery selection string,a jQuery object,* or a DOM element. * default value:null * * url:URL to which the form data will be submitted. * default value:value of form's 'action' attribute * * type:The method in which the form data should be submitted,'GET' or 'POST'. * default value:value of form's 'method' attribute (or 'GET' if none found) * * beforeSubmit:Callback method to be invoked before the form is submitted. * default value:null * * success:Callback method to be invoked after the form has been successfully submitted * and the response has been returned from the server * default value:null * * dataType:Expected dataType of the response. One of:null,'xml','script',or 'json' * default value:null * * semantic:Boolean flag indicating whether data must be submitted in semantic order (slower). * default value:false * * resetForm:Boolean flag indicating whether the form should be reset if the submit is successful * * clearForm:Boolean flag indicating whether the form should be cleared if the submit is successful * * * The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for * validating the form data. If the 'beforeSubmit' callback returns false then the form will * not be submitted. The 'beforeSubmit' callback is invoked with three arguments:the form data * in array format,the jQuery object,and the options object passed into ajaxSubmit. * The form data array takes the following form:* * [{
name:'username',value:'jresig'}
,{
name:'password',value:'secret'}
] * * If a 'success' callback method is provided it is invoked after the response has been returned * from the server. It is passed the responseText or responseXML value (depending on dataType). * See jQuery.ajax for further details. * * * The dataType option provides a means for specifying how the server response should be handled. * This maps directly to the jQuery.httpData method. The following values are supported:* * 'xml':if dataType == 'xml' the server response is treated as XML and the 'success' * callback method,if specified,will be passed the responseXML value * 'json':if dataType == 'json' the server response will be evaluted and passed to * the 'success' callback,if specified * 'script':if dataType == 'script' the server response is evaluated in the global context * * * Note that it does not make sense to use both the 'target' and 'dataType' options. If both * are provided the target will be ignored. * * The semantic argument can be used to force form serialization in semantic order. * This is normally true anyway,unless the form contains input elements of type='image'. * If your form must be submitted with name/value pairs in semantic order and your form * contains an input of type='image" then pass true for this arg,otherwise pass false * (or nothing) to avoid the overhead for this logic. * * * When used on its own,ajaxSubmit() is typically bound to a form's submit event like this:* * $("#form-id").submit(function(){
* $(this).ajaxSubmit(options);
* return false;
// cancel conventional submit *}
);
* * When using ajaxForm(),however,this is done for you. * * @example * $('#myForm').ajaxSubmit(function(data){
* alert('Form submit succeeded! Server returned:' + data);
*}
);
* @desc Submit form and alert server response * * * @example * var options ={
* target:'#myTargetDiv' *}
;
* $('#myForm').ajaxSubmit(options);
* @desc Submit form and update page element with server response * * * @example * var options ={
* success:function(responseText){
* alert(responseText);
*}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc Submit form and alert the server response * * * @example * var options ={
* beforeSubmit:function(formArray,jqForm){
* if (formArray.length == 0){
* alert('Please enter data.');
* return false;
*}
*}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc Pre-submit validation which aborts the submit operation if form data is empty * * * @example * var options ={
* url:myJsonUrl.php,* dataType:'json',* success:function(data){
* // 'data' is an object representing the the evaluated json data *}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc json data returned and evaluated * * * @example * var options ={
* url:myXmlUrl.php,* dataType:'xml',* success:function(responseXML){
* // responseXML is XML document object * var data = $('myElement',responseXML).text();
*}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc XML data returned from server * * * @example * var options ={
* resetForm:true *}
;
* $('#myForm').ajaxSubmit(options);
* @desc submit form and reset it if successful * * @example * $('#myForm).submit(function(){
* $(this).ajaxSubmit();
* return false;
*}
);
* @desc Bind form's submit event to use ajaxSubmit * * * @name ajaxSubmit * @type jQuery * @param options object literal containing options which control the form submission process * @cat Plugins/Form * @return jQuery */
$.fn.ajaxSubmit = function(options){
if (typeof options == 'function') options ={
success:options}
;
options = $.extend({
url:this.attr('action') || window.location,type:this.attr('method') || 'GET'}
,options ||{
}
);
var a = this.formToArray(options.semantic);
// give pre-submit callback an opportunity to abort the submit if (options.beforeSubmit && options.beforeSubmit(a,this,options) === false) return this;
// fire vetoable 'validate' event var veto ={
}
;
$.event.trigger('form.submit.validate',[a,this,options,veto]);
if (veto.veto) return this;
var q = $.param(a);
//.replace(/%20/g,'+');
if (options.type.toUpperCase() == 'GET'){
options.url += (options.url.indexOf('?') >= 0 ? '&':'?') + q;
options.data = null;
// data is null for 'get'}
else options.data = q;
// data is the query string for 'post' var $form = this,callbacks = [];
if (options.resetForm) callbacks.push(function(){
$form.resetForm();
}
);
if (options.clearForm) callbacks.push(function(){
$form.clearForm();
}
);
// perform a load on the target only if dataType is not provided if (!options.dataType && options.target){
var oldSuccess = options.success;
// || function(){
}
;
callbacks.push(function(data){
$(options.target).attr("innerHTML",data).evalScripts().each(oldSuccess,arguments);
}
);
}
else if (options.success) callbacks.push(options.success);
options.success = function(data,status){
for (var i=0,max=callbacks.length;
i < max;
i++) callbacks[i](data,status,$form);
}
;
// are there files to upload? var files = $('input:file',this).fieldValue();
var found = false;
for (var j=0;
j < files.length;
j++) if (files[j]) found = true;
if (options.iframe || found) // options.iframe allows user to force iframe mode fileUpload();
else $.ajax(options);
// fire 'notify' event $.event.trigger('form.submit.notify',[this,options]);
return this;
// private function for handling file uploads (hat tip to YAHOO!) function fileUpload(){
var form = $form[0];
var opts = $.extend({
}
,$.ajaxSettings,options);
var id = 'jqFormIO' + $.fn.ajaxSubmit.counter++;
var $io = $('<iframe id="' + id + '" name="' + id + '" />');
var io = $io[0];
var op8 = $.browser.opera && window.opera.version() < 9;
if ($.browser.msie || op8) io.src = 'javascript:false;
document.write("");
';
$io.css({
position:'absolute',top:'-1000px',left:'-1000px'}
);
var xhr ={
// mock object responseText:null,responseXML:null,status:0,statusText:'n/a',getAllResponseHeaders:function(){
}
,getResponseHeader:function(){
}
,setRequestHeader:function(){
}
}
;
var g = opts.global;
// trigger ajax global events so that activity/block indicators work like normal if (g && ! $.active++) $.event.trigger("ajaxStart");
if (g) $.event.trigger("ajaxSend",[xhr,opts]);
var cbInvoked = 0;
var timedOut = 0;
// take a breath so that pending repaints get some cpu time before the upload starts setTimeout(function(){
$io.appendTo('body');
// jQuery's event binding doesn't work for iframe events in IE io.attachEvent ? io.attachEvent('onload',cb):io.addEventListener('load',cb,false);
// make sure form attrs are set var encAttr = form.encoding ? 'encoding':'enctype';
var t = $form.attr('target');
$form.attr({
target:id,method:'POST',encAttr:'multipart/form-data',action:opts.url}
);
// support timout if (opts.timeout) setTimeout(function(){
timedOut = true;
cb();
}
,opts.timeout);
form.submit();
$form.attr('target',t);
// reset target}
,10);
function cb(){
if (cbInvoked++) return;
io.detachEvent ? io.detachEvent('onload',cb):io.removeEventListener('load',cb,false);
var ok = true;
try{
if (timedOut) throw 'timeout';
// extract the server response from the iframe var data,doc;
doc = io.contentWindow ? io.contentWindow.document:io.contentDocument ? io.contentDocument:io.document;
xhr.responseText = doc.body ? doc.body.innerHTML:null;
xhr.responseXML = doc.XMLDocument ? doc.XMLDocument:doc;
if (opts.dataType == 'json' || opts.dataType == 'script'){
var ta = doc.getElementsByTagName('textarea')[0];
data = ta ? ta.value:xhr.responseText;
if (opts.dataType == 'json') eval("data = " + data);
else $.globalEval(data);
}
else if (opts.dataType == 'xml'){
data = xhr.responseXML;
if (!data && xhr.responseText != null) data = toXml(xhr.responseText);
}
else{
data = xhr.responseText;
}
}
catch(e){
ok = false;
$.handleError(opts,xhr,'error',e);
}
// ordering of these callbacks/triggers is odd,but that's how $.ajax does it if (ok){
opts.success(data,'success');
if (g) $.event.trigger("ajaxSuccess",[xhr,opts]);
}
if (g) $.event.trigger("ajaxComplete",[xhr,opts]);
if (g && ! --$.active) $.event.trigger("ajaxStop");
if (opts.complete) opts.complete(xhr,ok ? 'success':'error');
// clean up setTimeout(function(){
$io.remove();
xhr.responseXML = null;
}
,100);
}
;
function toXml(s,doc){
if (window.ActiveXObject){
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = 'false';
doc.loadXML(s);
}
else doc = (new DOMParser()).parseFromString(s,'text/xml');
return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc:null;
}
;
}
;
}
;
$.fn.ajaxSubmit.counter = 0;
// used to create unique iframe ids/** * ajaxForm() provides a mechanism for fully automating form submission. * * The advantages of using this method instead of ajaxSubmit() are:* * 1:This method will include coordinates for <input type="image" /> elements (if the element * is used to submit the form). * 2. This method will include the submit element's name/value data (for the element that was * used to submit the form). * 3. This method binds the submit() method to the form for you. * * Note that for accurate x/y coordinates of image submit elements in all browsers * you need to also use the "dimensions" plugin (this method will auto-detect its presence). * * The options argument for ajaxForm works exactly as it does for ajaxSubmit. ajaxForm merely * passes the options argument along after properly binding events for submit elements and * the form itself. See ajaxSubmit for a full description of the options argument. * * * @example * var options ={
* target:'#myTargetDiv' *}
;
* $('#myForm').ajaxSForm(options);
* @desc Bind form's submit event so that 'myTargetDiv' is updated with the server response * when the form is submitted. * * * @example * var options ={
* success:function(responseText){
* alert(responseText);
*}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc Bind form's submit event so that server response is alerted after the form is submitted. * * * @example * var options ={
* beforeSubmit:function(formArray,jqForm){
* if (formArray.length == 0){
* alert('Please enter data.');
* return false;
*}
*}
*}
;
* $('#myForm').ajaxSubmit(options);
* @desc Bind form's submit event so that pre-submit callback is invoked before the form * is submitted. * * * @name ajaxForm * @param options object literal containing options which control the form submission process * @return jQuery * @cat Plugins/Form * @type jQuery */
$.fn.ajaxForm = function(options){
return this.ajaxFormUnbind().submit(submitHandler).each(function(){
// store options in hash this.formPluginId = $.fn.ajaxForm.counter++;
$.fn.ajaxForm.optionHash[this.formPluginId] = options;
$(":submit,input:image",this).click(clickHandler);
}
);
}
;
$.fn.ajaxForm.counter = 1;
$.fn.ajaxForm.optionHash ={
}
;
function clickHandler(e){
var $form = this.form;
$form.clk = this;
if (this.type == 'image'){
if (e.offsetX != undefined){
$form.clk_x = e.offsetX;
$form.clk_y = e.offsetY;
}
else if (typeof $.fn.offset == 'function'){
// try to use dimensions plugin var offset = $(this).offset();
$form.clk_x = e.pageX - offset.left;
$form.clk_y = e.pageY - offset.top;
}
else{
$form.clk_x = e.pageX - this.offsetLeft;
$form.clk_y = e.pageY - this.offsetTop;
}
}
// clear form vars setTimeout(function(){
$form.clk = $form.clk_x = $form.clk_y = null;
}
,10);
}
;
function submitHandler(){
// retrieve options from hash var id = this.formPluginId;
var options = $.fn.ajaxForm.optionHash[id];
$(this).ajaxSubmit(options);
return false;
}
;
/** * ajaxFormUnbind unbinds the event handlers that were bound by ajaxForm * * @name ajaxFormUnbind * @return jQuery * @cat Plugins/Form * @type jQuery */
$.fn.ajaxFormUnbind = function(){
this.unbind('submit',submitHandler);
return this.each(function(){
$(":submit,input:image",this).unbind('click',clickHandler);
}
);
}
;
/** * formToArray() gathers form element data into an array of objects that can * be passed to any of the following ajax functions:$.get,$.post,or load. * Each object in the array has both a 'name' and 'value' property. An example of * an array for a simple login form might be:* * [{
name:'username',value:'jresig'}
,{
name:'password',value:'secret'}
] * * It is this array that is passed to pre-submit callback functions provided to the * ajaxSubmit() and ajaxForm() methods. * * The semantic argument can be used to force form serialization in semantic order. * This is normally true anyway,unless the form contains input elements of type='image'. * If your form must be submitted with name/value pairs in semantic order and your form * contains an input of type='image" then pass true for this arg,otherwise pass false * (or nothing) to avoid the overhead for this logic. * * @example var data = $("#myForm").formToArray();
* $.post( "myscript.cgi",data );
* @desc Collect all the data from a form and submit it to the server. * * @name formToArray * @param semantic true if serialization must maintain strict semantic ordering of elements (slower) * @type Array<Object> * @cat Plugins/Form */
$.fn.formToArray = function(semantic){
var a = [];
if (this.length == 0) return a;
var form = this[0];
var els = semantic ? form.getElementsByTagName('*'):form.elements;
if (!els) return a;
for(var i=0,max=els.length;
i < max;
i++){
var el = els[i];
var n = el.name;
if (!n) continue;
if (semantic && form.clk && el.type == "image"){
// handle image inputs on the fly when semantic == true if(!el.disabled && form.clk == el) a.push({
name:n+'.x',value:form.clk_x}
,{
name:n+'.y',value:form.clk_y}
);
continue;
}
var v = $.fieldValue(el,true);
if (v && v.constructor == Array){
for(var j=0,jmax=v.length;
j < jmax;
j++) a.push({
name:n,value:v[j]}
);
}
else if (v !== null && typeof v != 'undefined') a.push({
name:n,value:v}
);
}
if (!semantic && form.clk){
// input type=='image' are not found in elements array! handle them here var inputs = form.getElementsByTagName("input");
for(var i=0,max=inputs.length;
i < max;
i++){
var input = inputs[i];
var n = input.name;
if(n && !input.disabled && input.type == "image" && form.clk == input) a.push({
name:n+'.x',value:form.clk_x}
,{
name:n+'.y',value:form.clk_y}
);
}
}
return a;
}
;
/** * Serializes form data into a 'submittable' string. This method will return a string * in the format:name1=value1&
name2=value2 * * The semantic argument can be used to force form serialization in semantic order. * If your form must be submitted with name/value pairs in semantic order then pass * true for this arg,otherwise pass false (or nothing) to avoid the overhead for * this logic (which can be significant for very large forms). * * @example var data = $("#myForm").formSerialize();
* $.ajax('POST',"myscript.cgi",data);
* @desc Collect all the data from a form into a single string * * @name formSerialize * @param semantic true if serialization must maintain strict semantic ordering of elements (slower) * @type String * @cat Plugins/Form */
$.fn.formSerialize = function(semantic){
//hand off to jQuery.param for proper encoding return $.param(this.formToArray(semantic));
}
;
/** * Serializes all field elements in the jQuery object into a query string. * This method will return a string in the format:name1=value1&
name2=value2 * * The successful argument controls whether or not serialization is limited to * 'successful' controls (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls). * The default value of the successful argument is true. * * @example var data = $("input").formSerialize();
* @desc Collect the data from all successful input elements into a query string * * @example var data = $(":radio").formSerialize();
* @desc Collect the data from all successful radio input elements into a query string * * @example var data = $("#myForm:checkbox").formSerialize();
* @desc Collect the data from all successful checkbox input elements in myForm into a query string * * @example var data = $("#myForm:checkbox").formSerialize(false);
* @desc Collect the data from all checkbox elements in myForm (even the unchecked ones) into a query string * * @example var data = $(":input").formSerialize();
* @desc Collect the data from all successful input,select,textarea and button elements into a query string * * @name fieldSerialize * @param successful true if only successful controls should be serialized (default is true) * @type String * @cat Plugins/Form */
$.fn.fieldSerialize = function(successful){
var a = [];
this.each(function(){
var n = this.name;
if (!n) return;
var v = $.fieldValue(this,successful);
if (v && v.constructor == Array){
for (var i=0,max=v.length;
i < max;
i++) a.push({
name:n,value:v[i]}
);
}
else if (v !== null && typeof v != 'undefined') a.push({
name:this.name,value:v}
);
}
);
//hand off to jQuery.param for proper encoding return $.param(a);
}
;
/** * Returns the value(s) of the element in the matched set. For example,consider the following form:* * <form><fieldset> * <input name="A" type="text" /> * <input name="A" type="text" /> * <input name="B" type="checkbox" value="B1" /> * <input name="B" type="checkbox" value="B2"/> * <input name="C" type="radio" value="C1" /> * <input name="C" type="radio" value="C2" /> * </fieldset></form> * * var v = $(':text').fieldValue();
* // if no values are entered into the text inputs * v == ['',''] * // if values entered into the text inputs are 'foo' and 'bar' * v == ['foo','bar'] * * var v = $(':checkbox').fieldValue();
* // if neither checkbox is checked * v === undefined * // if both checkboxes are checked * v == ['B1','B2'] * * var v = $(':radio').fieldValue();
* // if neither radio is checked * v === undefined * // if first radio is checked * v == ['C1'] * * The successful argument controls whether or not the field element must be 'successful' * (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls). * The default value of the successful argument is true. If this value is false the value(s) * for each element is returned. * * Note:This method *always* returns an array. If no valid value can be determined the * array will be empty,otherwise it will contain one or more values. * * @example var data = $("#myPasswordElement").fieldValue();
* alert(data[0]);
* @desc Alerts the current value of the myPasswordElement element * * @example var data = $("#myForm:input").fieldValue();
* @desc Get the value(s) of the form elements in myForm * * @example var data = $("#myForm:checkbox").fieldValue();
* @desc Get the value(s) for the successful checkbox element(s) in the jQuery object. * * @example var data = $("#mySingleSelect").fieldValue();
* @desc Get the value(s) of the select control * * @example var data = $(':text').fieldValue();
* @desc Get the value(s) of the text input or textarea elements * * @example var data = $("#myMultiSelect").fieldValue();
* @desc Get the values for the select-multiple control * * @name fieldValue * @param Boolean successful true if only the values for successful controls should be returned (default is true) * @type Array<String> * @cat Plugins/Form */
$.fn.fieldValue = function(successful){
for (var val=[],i=0,max=this.length;
i < max;
i++){
var el = this[i];
var v = $.fieldValue(el,successful);
if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length)) continue;
v.constructor == Array ? $.merge(val,v):val.push(v);
}
return val;
}
;
/** * Returns the value of the field element. * * The successful argument controls whether or not the field element must be 'successful' * (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls). * The default value of the successful argument is true. If the given element is not * successful and the successful arg is not false then the returned value will be null. * * Note:If the successful flag is true (default) but the element is not successful,the return will be null * Note:The value returned for a successful select-multiple element will always be an array. * Note:If the element has no value the return value will be undefined. * * @example var data = jQuery.fieldValue($("#myPasswordElement")[0]);
* @desc Gets the current value of the myPasswordElement element * * @name fieldValue * @param Element el The DOM element for which the value will be returned * @param Boolean successful true if value returned must be for a successful controls (default is true) * @type String or Array<String> or null or undefined * @cat Plugins/Form */
$.fieldValue = function(el,successful){
var n = el.name,t = el.type,tag = el.tagName.toLowerCase();
if (typeof successful == 'undefined') successful = true;
if (successful && (!n || el.disabled || t == 'reset' || t == 'button' || (t == 'checkbox' || t == 'radio') && !el.checked || (t == 'submit' || t == 'image') && el.form && el.form.clk != el || tag == 'select' && el.selectedIndex == -1)) return null;
if (tag == 'select'){
var index = el.selectedIndex;
if (index < 0) return null;
var a = [],ops = el.options;
var one = (t == 'select-one');
var max = (one ? index+1:ops.length);
for(var i=(one ? index:0);
i < max;
i++){
var op = ops[i];
if (op.selected){
// extra pain for IE... var v = $.browser.msie && !(op.attributes['value'].specified) ? op.text:op.value;
if (one) return v;
a.push(v);
}
}
return a;
}
return el.value;
}
;
/** * Clears the form data. Takes the following actions on the form's input fields:* - input text fields will have their 'value' property set to the empty string * - select elements will have their 'selectedIndex' property set to -1 * - checkbox and radio inputs will have their 'checked' property set to false * - inputs of type submit,button,reset,and hidden will *not* be effected * - button elements will *not* be effected * * @example $('form').clearForm();
* @desc Clears all forms on the page. * * @name clearForm * @type jQuery * @cat Plugins/Form */
$.fn.clearForm = function(){
return this.each(function(){
$('input,select,textarea',this).clearFields();
}
);
}
;
/** * Clears the selected form elements. Takes the following actions on the matched elements:* - input text fields will have their 'value' property set to the empty string * - select elements will have their 'selectedIndex' property set to -1 * - checkbox and radio inputs will have their 'checked' property set to false * - inputs of type submit,button,reset,and hidden will *not* be effected * - button elements will *not* be effected * * @example $('.myInputs').clearFields();
* @desc Clears all inputs with class myInputs * * @name clearFields * @type jQuery * @cat Plugins/Form */
$.fn.clearFields = $.fn.clearInputs = function(){
return this.each(function(){
var t = this.type,tag = this.tagName.toLowerCase();
if (t == 'text' || t == 'password' || tag == 'textarea') this.value = '';
else if (t == 'checkbox' || t == 'radio') this.checked = false;
else if (tag == 'select') this.selectedIndex = -1;
}
);
}
;
/** * Resets the form data. Causes all form elements to be reset to their original value. * * @example $('form').resetForm();
* @desc Resets all forms on the page. * * @name resetForm * @type jQuery * @cat Plugins/Form */
$.fn.resetForm = function(){
return this.each(function(){
// guard against an input with the name of 'reset' // note that IE reports the reset function as an 'object' if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType)) this.reset();
}
);
}
;
}
)(jQuery);
CSS代码(common.css):
.cd-dropdown,.cd-select{position:relative;width:500px;margin:20px auto;display:block;}
.cd-dropdown > span{width:100%;height:60px;line-height:60px;color:#999;font-weight:700;font-size:16px;background:#fff;display:block;padding:0 50px 0 30px;position:relative;cursor:pointer;}
.cd-dropdown > span:after{content:'\25BC';position:absolute;right:0px;top:15%;width:50px;text-align:center;font-size:12px;padding:10px;height:70%;line-height:24px;border-left:1px solid #ddd;}
.cd-dropdown.cd-active > span:after{content:'\25B2';}
.cd-dropdown ul{list-style-type:none;margin:0;padding:0;display:block;position:relative;}
.cd-dropdown ul li{display:block;}
.cd-dropdown ul li span{width:100%;background:#fff;line-height:60px;padding:0 30px 0 75px;display:block;color:#bcbcbc;cursor:pointer;font-weight:700;}
.cd-dropdown > span,.cd-dropdown ul li span{-webkit-backface-visibility:hidden;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.cd-dropdown > span span[class^="icon-"],.cd-dropdown > span span[class*=" icon-"]{padding:0 30px 0 45px;}
/* Select fallback styling */
.cd-select{border:1px solid #ddd;}
CSS代码(demo.css):
@font-face{font-family:'icons';src:url("font/icons.eot");src:url(".font/icons.eot?#iefix") format('embedded-opentype'),url("font/icons.woff") format('woff'),url("font/icons.ttf") format('truetype'),url("font/icons.svg#icons") format('svg');font-weight:normal;font-style:normal;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";/* 1 */
display:table;/* 2 */
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
body{font-family:'Open Sans Condensed','Arial Narrow',serif;background:#ddd url(../images/egg_shell.png) repeat top left;font-weight:400;font-size:15px;color:#333;overflow:scroll;overflow-x:hidden;}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;top:100px;}
.clr{clear:both;padding:0;height:0;margin:0;}
.main{margin:0 auto;position:relative;z-index:19;}
.container > header{margin:10px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-size:36px;line-height:36px;margin:0;position:relative;font-weight:300;color:#524f4e;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header h1 span{font-weight:700;}
.container > header h2{font-size:14px;font-weight:300;margin:0;padding:15px 0 5px 0;color:#888;font-family:Cambria,Georgia,serif;font-style:italic;text-shadow:1px 1px 1px rgba(255,255,255,0.9);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.6);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.3);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
/* Demo Buttons Style */
.codrops-demos{text-align:center;display:block;line-height:30px;padding:5px 0px;}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 6px;color:#aaa;line-height:20px;font-size:13px;text-shadow:1px 1px 1px #fff;border:1px solid #fff;background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* IE10+ */
background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#ededed',GradientType=0 );/* IE6-9 */
box-shadow:0 1px 1px rgba(0,0,0,0.1);}
.codrops-demos a:hover{color:#333;background:#fff;}
.codrops-demos a:active{background:#fff;}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{background:#f0f0f0;border-color:#d9d9d9;color:#aaa;box-shadow:0 1px 1px rgba(255,255,255,0.7);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#f6f6f6',GradientType=0 );/* IE6-9 */
}
.support-note span{color:#ac375d;font-size:16px;display:none;font-weight:bold;text-align:center;padding:5px 0;}
.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions{display:block;}
div.jGrowl div.manilla{background-color:#FFF1C2;color:navy;}
div.jGrowl div.smoke{background:url('images/smoke.png') no-repeat;-moz-border-radius:0px;-webkit-border-radius:0px;width:280px;height:55px;overflow:hidden;}
div.jGrowl div.flora{background:#E6F7D4 url(flora-notification.png) no-repeat;-moz-border-radius:0px;-webkit-border-radius:0px;opacity:1;filter:alpha(opacity = 100);width:270px;height:90px;padding:0px;overflow:hidden;border-color:#5ab500;}
div.jGrowl div.flora div.message{padding:5px;color:#000;}
div.jGrowl div.flora div.header{background:url(flora-header.png) no-repeat;padding:5px;}
div.jGrowl div.flora div.close{background:url(flora-close.png) no-repeat;padding:5px;color:transparent;padding:0px;margin:5px;width:17px;}
div.jGrowl div.iphone{font-family:"Helvetica Neue","Helvetica";font-size:12px;background:url(iphone.png) no-repeat;-moz-border-radius:0px;-webkit-border-radius:0px;opacity:.90;filter:alpha(opacity = 90);width:235px;height:137px;overflow:hidden;border-color:#5ab500;color:#fff;}
div.jGrowl div.iphone .jGrowl-close{padding-right:20px;}
div.jGrowl div.iphone div.message{padding-top:0px;padding-bottom:7px;padding-left:15px;padding-right:15px;}
div.jGrowl div.iphone div.header{padding:7px;padding-left:15px;padding-right:15px;font-size:17px;}
div.jGrowl div.iphone div.close{display:none;}
div#random{width:1000px;background-color:red;line-height:60px;}
CSS代码(demoload.css):
分享到QQ
分享到微博
微信扫一扫
