首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

应用jQuery插件开发一个完整验证功能的超酷动态留言版系统

2012-08-29 
使用jQuery插件开发一个完整验证功能的超酷动态留言版系统在线演示? 本地下载 今 天是情人节,这里我们将创

使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

应用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示? 本地下载

今 天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创 建的这个留言板灵感来自于一些超棒的网页设计,在用户输入过程中,会动态的显示输入框,产生类似flash的效果。提高用户的体验。希望大家喜欢!

注:由于使用了Cufon英文字体美化UI界面,所有不支持中文输入,如果你需要输入中文,请将Cufon相关代码移除即可。

jQuery插件

1. jQuery validation engine plugin? -? 表单验证插件

2. jQuery placehoder plugin? -? 输入提示插件

3. jQuery pretty form plugin? -? 美化表单插件

4. Cufon? - 美化字体类库

Javascript代码

以下代码生成输入框和textarea的背景效果:

new Date() + "</div><div class="itemtxt">" + comments+ "</div>").fadeIn(1000); Cufon.refresh(); }); });}); 复制代码

以上代码中,我们判断是否输入,然后,提示用户输入内容。完成后,调用Cufon.refresh()方法来生成界面字体。

HTML
<h1>Super Cool Live Comment Box</h1> <form method="post" id="commentform" style="width:400px">         <div  id="living-effect" class="input-wrapper">         <input class="living-input validate[required,custom[email]]" id="mail" type="text" placeholder="Your email...">     </div>            <div  id="living-effect" class="input-wrapper">         <input class="living-input validate[required]" id="name" type="text" placeholder="Your name...">     </div>            <div  id="living-effect" class="textarea-wrapper">         <textarea class="living-textarea validate[required]" id="comment" type="text" placeholder="Your comments..."></textarea>     </div>                <div  class="submit-wrapper">         <input value="submit" id="submit" class="living-submit" style="color:#808080;padding: 10px 46px 11px;margin-left:15px;font-size:14px" type="button">     </div>         <div  class="info-wrapper">         <div id="comments"></div>     </div> </form>

?

热点排行