一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单。这款提交表单的的效果是以动画的形式依次列表所需填写的信息。效果非常不错,效果图如下:
实现的代码。
html代码:
<div align="center">
<form id="myform">
<div id="bloc_recherche_couleur">
<div id="etape0_recherche" style="color: #ffffff;">
<br />
<div class="titre">
WELCOME IN MY JUNGLE</div>
<br />
I want to know you, could you please say me more about you ?<br />
<br />
<div class="btn_noir etape_suivante" etape="0">
Begin...</div>
<br />
<br />
</div>
<div id="etape1_recherche" class="div_cache" style="display: none; text-align: center;">
<br />
<div class="titre">
Do you speak english ?</div>
<br />
<input type="text" name="" id="" value="" placeholder="Speak english ?" class="champtxt" /><br />
<br />
<div class="btn_noir etape_precedente" etape="1">
PREVIOUS</div>
<div class="btn_noir etape_suivante" etape="1">
NEXT</div>
</div>
<div id="etape2_recherche" class="div_cache" style="display: none; text-align: center;">
<br />
<div class="titre">
Do you have a british accent ?</div>
<br />
<input type="text" name="" id="" value="" placeholder="British accent ?" class="champtxt" /><br />
<br />
<div class="btn_noir etape_precedente" etape="2">
PREVIOUS</div>
<div class="btn_noir etape_suivante" etape="2">
NEXT</div>
</div>
<div id="etape3_recherche" class="div_cache" style="display: none; text-align: center;">
<br />
<div class="titre">
Do you like barbecues ?</div>
<br />
<input type="text" name="" id="" value="" placeholder="Bbq ?" class="champtxt" /><br />
<br />
<div class="btn_noir etape_precedente" etape="3">
PREVIOUS</div>
<div class="btn_noir etape_suivante" etape="3">
NEXT</div>
</div>
<div id="etape4_recherche" class="div_cache" style="display: none; color: #ffffff;">
<br />
<div class="titre">
Thanks !
</div>
<br />
Now I know you...<br />
<br />
<div class="btn_noir etape_precedente" etape="4">
PREVIOUS</div>
<div class="btn_noir" id="terminer">
SAVE & CLOSE</div>
</div>
</div>
<div id="btn_recherche" statut="ferme">
BEGIN THE QUIZ</div>
</form>
</div>
css代码:
.titre
{
color: #ffffff;
font-size: 24px;
} .btn_noir
{
font-size: 14px;
cursor: pointer;
padding: 8px;
border-radius: 2px;
background-color: #333333;
color: #ffffff;
display: inline-block;
margin: 8px;
font-weight:;
width: 100px;
} .champtxt
{
width: 300px;
font-size: 16px;
padding: 5px;
margin: 0px;
} .btn_noir:hover
{
background-color: #000000;
} #bloc_recherche_couleur
{
background-color: #ffbe40;
width: 100%;
height: 200px;
display: none;
} #btn_recherche
{
background-color: #ffbe40;
width: 400px;
margin-bottom: 20px;
color: #ffffff;
font-weight:;
text-align: center;
padding: 10px;
border-radius: 0px 0px 3px 3px;
cursor: pointer;
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/10226
一款基于jquery ui的动画提交表单的更多相关文章
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 一款基于jquery的喜欢动画按钮
今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <p class='heading'> C ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- 【表单验证】基于jQuery的高度灵活的表单验证(无UI)
表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...
- jquery来跨域提交表单
说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
随机推荐
- servlet 服务器HTTP响应头设置示例(response用法)
1,Location 用于重定向,和返回状态码302结合使用. 代码示例: response.setStatus(302); response.setHeader("location&quo ...
- java 内省(Introspector)
开发框架时,经常需要使用java对象的属性来封装程序的数据,每次都使用反射技术完成此类操作过于麻烦,所以sun公司开发了一套API,专门用于操作java对象的属性. 当然你也可以用反射来操作JavaB ...
- 140730暑期培训.txt
1.大数加减法 思路分析: 1.将数据当做字符串输入(gets(s)) 2.将字符型转换为整型,逆着存 char? int i=0,j ...
- 解决sitemesh3装饰页面不能使用freemarker标签问题
如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: <servlet> ...
- Xshell和Xftp5配置连接阿里云服务器
配置Xftp5 配置成功后 配置Xshell 记住用户名和密码 连接成功
- hduoj---Tempter of the Bone
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- C#搞工控的一些代码
首先工控项目都会用到: using System.Runtime.InteropServices; 1.字节转化为单精度浮点数 2.单精度转成字节 3.使用结构体 4.使用动态链接库 5.ASCCII ...
- Jsp通过Filter实现UrlRewriter原理
web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...
- C#代码规范 程序员必备的秘笈
1.引言 本文是一套面向C# programmer和C# developer进行开发所应遵循的开发规范 按照此规范来开发C#程序可带来以下益处: 代码的编写保持一致性,提高代码的可读性和可维护性,在团 ...
- OAF_OAF编译代码至应用详解(案例)
201-06-01 Created By BaoXinjian