<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
<title>ajax PHP User Login instance Jquey_login by http://www.111cn.net</title>
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<script type= "text/web Effects" src= "Js/jquery-1.3.1.min.js" ></script>
<script type= "Text/javascript" >
/*<! [cdata[*/
$ (document). Ready (function () {
var value = $ (' #button input '). Val ();
var name = $ (' #button input '). attr (' name ');
$ (' #button input '). Remove ();
$ (' #button '). html (' <a href= "#" class= "CSS Tutorial Submitbutton" rel= ' + name + ' > ' + value + ' </a> ");
$ (' #button a '). Live (' click ', function () {
var link = $ (this);
$.ajax ({
URL: ' load.php ',
Data: ',
Type: ' Get ',
Cache: ' False ',
Beforesend:function () {
Link.addclass (' loading ');
},
Success:function () {
Link.removeclass (' loading ');
Alert (' submitted ');
}
});
});
});
/*]]>*/
</script>
<style type= "Text/css" >
Body {
font-family:arial;
font-size:12px;
margin:10px;
Text-align:center;
}
form {
margin:0 Auto;
Text-align:left;
width:270px;
border:1px solid #ccc;
padding:15px;
Background: #fff;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 0 4px #ccc;
-webkit-box-shadow:0 0 4px #ccc;
-moz-box-shadow:0 0 4px #ccc;
}
fieldset {
Overflow:hidden;
border:0;
height:30px;
MARGIN:3PX 0;
}
FieldSet Label {
Display:block;
width:50px;
Float:left;
font-weight:700;
Color: #666;
Line-height:2.2em;
}
FieldSet Input {
Float:left;
border:1px solid #ccc;
height:20px;
padding:3px;
width:190px;
font-size:12px;
}
#button {
margin-top:10px;
padding-right:20px;
Text-align:right;
}
#button Input {
margin:0 Auto;
}
A.csssubmitbutton {
font-size:12px;
Background: #fff no-repeat 4px 5px;
Display:inline-block;
padding:5px 20px 6px;
Color: #333;
border:1px solid #ccc;
Text-decoration:none;
Font-weight:bold;
Line-height:1.2em;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow:0 1px 3px #999;
-webkit-box-shadow:0 1px 3px #999;
position:relative;
Cursor:pointer;
Outline:none;
}
a.csssubmitbutton:visited {}
A.csssubmitbutton:hover {
border:1px solid #333;
}
. Loading {
Background-image:url (' load.gif ')!important;
Color: #ccc!important;
-moz-box-shadow:0 0 0 #fff!important;
-webkit-box-shadow:0 0 0 #fff!important;
}
. Effect {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
<body>
<form method= "POST" action= "Name=" Subscribeform ">
<fieldset>
<label>name: </label><input type= "text" class= "effect" name= "name" >
</fieldset>
<fieldset>
<label>email: </label><input type= "text" class= "effect" name= "Email" >
</fieldset>
<div id= "button" >
<input type= "Submit" value= "subscribe" name= "Subscribeform"/>
</div>
</form>
</body>
Instance Downloads
Http://down.111cn.net/down/code/jquery/2010/0830/20529.html