利用jQuery实现提示注册进度特效



34 132 45



特效描述:利用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

加群请备注:从官网了解到