今天要给大家分享一款基于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 &amp; 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的动画提交表单的更多相关文章

  1. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  2. 分享一款基于jquery的圆形动画按钮

    之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...

  3. 一款基于jquery的喜欢动画按钮

    今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <p class='heading'> C ...

  4. 基于jQuery会员中心安全修改表单代码

    基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  5. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  6. 【表单验证】基于jQuery的高度灵活的表单验证(无UI)

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

  7. jquery来跨域提交表单

    说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...

  8. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  9. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

随机推荐

  1. servlet 服务器HTTP响应头设置示例(response用法)

    1,Location 用于重定向,和返回状态码302结合使用. 代码示例: response.setStatus(302); response.setHeader("location&quo ...

  2. java 内省(Introspector)

    开发框架时,经常需要使用java对象的属性来封装程序的数据,每次都使用反射技术完成此类操作过于麻烦,所以sun公司开发了一套API,专门用于操作java对象的属性. 当然你也可以用反射来操作JavaB ...

  3. 140730暑期培训.txt

    1.大数加减法    思路分析:        1.将数据当做字符串输入(gets(s))        2.将字符型转换为整型,逆着存            char? int      i=0,j ...

  4. 解决sitemesh3装饰页面不能使用freemarker标签问题

    如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: <servlet> ...

  5. Xshell和Xftp5配置连接阿里云服务器

    配置Xftp5 配置成功后 配置Xshell 记住用户名和密码 连接成功

  6. hduoj---Tempter of the Bone

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. C#搞工控的一些代码

    首先工控项目都会用到: using System.Runtime.InteropServices; 1.字节转化为单精度浮点数 2.单精度转成字节 3.使用结构体 4.使用动态链接库 5.ASCCII ...

  8. Jsp通过Filter实现UrlRewriter原理

    web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...

  9. C#代码规范 程序员必备的秘笈

    1.引言 本文是一套面向C# programmer和C# developer进行开发所应遵循的开发规范 按照此规范来开发C#程序可带来以下益处: 代码的编写保持一致性,提高代码的可读性和可维护性,在团 ...

  10. OAF_OAF编译代码至应用详解(案例)

    201-06-01 Created By BaoXinjian