ajax php用户登录实例 jQuey_Login

<!-- 这是一款简单实例的ajax php教程用户登录实例代码

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ajax php用户登录实例 jquey_login by http://www.zzzyk.com</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<script type="text/网页特效" 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教程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>
</head>
<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>
</html>

效果预览地址
http://g.226511.cn/javascript/js/20100830/jquery%20制作一个ajax带状态提示的登录按钮
实例下载
http://down.zzzyk.com/down/code/jquery/2010/0830/20529.html

补充：网页制作,jquery