利用jQuery實現提示注冊進度特效



24 93 32



特效描述:利用jQuery實現 提示注冊進度,利用jQuery實現提示注冊進度特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<link href="css/progression.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/progression.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

3. HTML代碼

<h3 class="demo" id="demo">Demo</h3>
<p class="demointro">Tab or click through the form fields to see helpful hinters 
and your form progress</p>
<form id="myform">
	<p><label for>Click on a field</label>
	<input data-progression type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value placeholder>
	</p>
	<p><label for>Helps provide a better user experience</label>
	<input data-progression type="text" data-helper="Tracks users progress when filling in forms" name="email" value placeholder>
	</p>
	<p class="left"><label for>Example Field</label>
	<input data-progression type="text" data-helper="The tooltip is fully customisable" name="mytel" value placeholder>
	</p>
	<p class="right"><label for>Another Sample Field</label>
	<input data-progression type="text" data-helper="And can be positioned left or right" name="mytel" value placeholder>
	</p>
	<p><label for>A text area</label>
	<textarea data-progression name data-helper="Either the helper text or progress bar can be turned off"></textarea>
	</p>
	<p><input type="submit" class="button" name value="Lets Go!" placeholder>
	</p>
</form>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 提示框/彈出層 文本框 text文本框 注冊框 表單提交 進度條 進度條插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表