jQuery表单UI美化特效插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery表单UI美化特效插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
<link rel="stylesheet" type="text/css" href="regForm.css">
<title>jQuery UI Progress Bar</title>
</head>
<body>
<div class="form-container ui-helper-clearfix ui-corner-all" style="clear:both; margin:0 auto; text-align:center;">
  <h1>Registration Form</h1>
  <p>Progress:</p>
  <div id="progress"></div>
  <label id="amount">0%</label>
  <form action="serverScript.php">
    <div id="panel1" class="form-panel">
      <h2>Personal Details</h2>
      <fieldset class="ui-corner-all">
        <label>Name:</label>
        <input type="text">
        <label>D.O.B:</label>
        <input type="text">
        <label>Choose password:</label>
        <input type="password">
        <label>Confirm password:</label>
        <input type="password">
      </fieldset>
    </div>
    <div id="panel2" class="form-panel ui-helper-hidden">
      <h2>Contact Details</h2>
      <fieldset class="ui-corner-all">
        <label>Email:</label>
        <input type="text">
        <label>Telephone:</label>
        <input type="text">
        <label>Address:</label>
        <textarea rows="3" cols="25"></textarea>
      </fieldset>
    </div>
    <div id="thanks" class="form-panel ui-helper-hidden">
      <h2>Registration Complete</h2>
      <fieldset class="ui-corner-all">
        <p>Thanks for registering!</p>
      </fieldset>
    </div>
    <button id="next">Next &gt;</button>
    <button id="back" disabled="disabled">&lt; Back</button>
  </form>
</div>


<script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script> 
<script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script> 
<script type="text/javascript">
		  $(function() {
			  
				//call progress bar constructor
			  $("#progress").progressbar({ change: function() {
				
				  //update amount label when value changes
				  $("#amount").text($("#progress").progressbar("option", "value") + "%");
				} });
				
				//set click handler for next button
				$("#next").click(function(e) {
				  
					//stop form submission
					e.preventDefault();
				  
					//look at each panel
				  $(".form-panel").each(function() {
					  
						//if it's not the first panel enable the back button
            ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "");
																		
						//if the panel is visible fade it out
					  ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
						  
							//add hidden class and show the next panel
							$(this).addClass("ui-helper-hidden").next().fadeIn("fast", function() {
							  
								//if it's the last panel disable the next button
    						($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "disabled");	
																
								//remove hidden class from new panel
								$(this).removeClass("ui-helper-hidden");
								
								//update progress bar
								$("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") + 50);
							});
						});
					});
				});			
				
				//set click handler for back button
				$("#back").click(function(e) {
				  
					//stop form submission
					e.preventDefault();
					
					//look at each panel
				  $(".form-panel").each(function() {
					  					
					  //if it's not the last panel enable the next button
						($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "");
					  
						//if the panel is visible fade it out
					  ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
						  
							//add hidden class and show the next panel
							$(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function() {
							
							  //if it's the first panel disable the back button
    						($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "disabled");
										
								//remove hidden class from new panel
								$(this).removeClass("ui-helper-hidden");
								
								//update progress bar
								$("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") - 50);
							});
						});
					});
				});					
			});
		</script>
</body>
</html>

CSS代码(regForm.css):

h1,h2{font-family:Georgia;font-size:140%;margin-top:0;}
h2{font-size:100%;margin:20px 0 10px;text-align:left;}
.form-container{width:400px;margin:0 auto;position:relative;font-family:Verdana;font-size:80%;padding:20px;background-color:#e0e3e2;border:3px solid #abadac;}
.form-panel{width:400px;height:241px;}
.form-panel fieldset{width:397px;height:170px;margin:0 auto;padding:22px 0 0;border:1px solid #abadac;background-color:#ffffff;}
.form-panel label{width:146px;display:block;float:left;text-align:right;padding-top:2px;margin-right:10px;}
.form-panel input,.form-panel textarea{float:left;width:200px;margin-bottom:13px;}
.form-container button{float:right;}
p{margin:0;font-size:75%;position:absolute;left:30px;top:60px;font-weight:bold;}
#amount{position:absolute;right:30px;top:60px;font-size:80%;font-weight:bold;}
#thanks{text-align:center;}
#thanks p{margin-top:48px;font-size:160%;position:relative;left:0;top:0;}

附件:下载该文件资源,减少时间成本(增值服务)