免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

使用jQuery插件开发一个超酷动态留言版系统

时间:02-15 15:42 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  今天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创建的这个留言板

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

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

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

jQuery插件

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

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

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

4. Cufon - 美化字体类库

Javascript代码

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

/* ---------------------------------------------------------------------- */
/* GBin1.com Living form
/* ---------------------------------------------------------------------- */
$(function(){
    $(".input-wrapper").livingElements("img/input-mask-white.png", {
        background: "url('img/living-gradient.png') no-repeat",
        easing: 'linear',
        triggerElementSelector: 'input',
        mainAnimationStartOpacity: 0,
        mainAnimationEndOpacity: 1,
        mainAnimationDuration: 800
    });
   
    $(".textarea-wrapper").livingElements("img/textarea-mask.png", {
        background: "url('img/textarea-gradient.jpg') no-repeat",
        easing: 'linear',
        triggerElementSelector: 'textarea',
        preAnimationStartOpacity: 0,
        mainAnimationFade: false,
        scrollDirection: 'horizontal',
        mainAnimationDuration: 1500,
        mainAnimationStartBackgroundPositionX: -200,
        mainAnimationEndBackgroundPositionX: 0,
        postAnimationEndOpacity: 0
    });
});

以上代码分别使用不同的效果来动态展示输入效果。

输入内容提示,及其表单验证如下:

$(function(){
 Cufon.replace('h1, div, input').CSS.ready(function() {
  $('input[placeholder], textarea[placeholder]').placeholder();

  $("#commentform").validationEngine('attach');
  $("#submit").click(function(){
   if(!$("#commentform").validationEngine('validate')){
    return;
   }
   var mail,name,comments;
   mail = $("#mail").val();
   name = $("#name").val();
   comments = $("#comment").val();
   $("#comments").hide().append("<div class=\"item\">" + name + " (" + mail + "): " + 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>

CSS

@charset "utf-8";

body{
    background: #E8E8E8;
 font-size: 14px;
 font-family: verdana;
}


#container{
 margin: 0 auto;
 background: #fff;
 width: 600px;
 color: #333;
 padding: 15px;
 margin-top: 0;
 height: 100%;
}

h1{
 padding: 0 0 0 25px;
 font-weight: bold;
 font-size: 48px;
 color: #505050;
}

section{
 height: 100%;
}

#comments{
 padding: 10px 5px;
 font-size: 12px;
 color: #808080;
}

.item{
 border-top: 1px dotted #CCC;
 font-size:14px;
 color:#808080;
 padding:20px 0 20px;
}

.itemtxt{
 font-size:12px;
 color:#808080;
 padding:20px 0 20px;
}

*:focus {outline: none;}

.input-wrapper
{
 width:275px;
 height:80px;
 background:url(../img/input-bg.png);
 margin-left:10px;
 float:left;
}

.submit-wrapper
{
 width:250px;
 height:80px;
 margin-left:10px;
 float:left;
}

.input-mask
{
 background:url(../img/input-mask.png);
 width:275px;
 height:80px;
}

.living-input
{
 padding:5px 5px 5px 5px;
 margin:27px 0px 0px 24px;
 width:217px;
 background:none;
 border:none;
 color:#909090;
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:normal;
 float:left;
 box-shadow: 0 0 0 0;
}

.living-submit
{
 padding:15px 5px 15px 12px;
 margin:20px 0px 0px 24px;
 width:217px;
 background: #E1E1E1;
 border: 1px solid #ccc;
 color:#CCCCCC;
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:normal;
 float:left;
 box-shadow: 0 0 0 0;
}

.living-textarea
{
 padding:5px;
 margin:16px 0px 0px 12px;
 width:500px;
 height:160px;
 background:none;
 border:none;
 color:#909090;
 font-size:15px;
 font-family:Arial, Helvetica, sans-serif;
 box-shadow: 0 0 0 0;
}

.textarea-wrapper
{
 width:534px;
 height:206px;
 background:none;
 margin-left:19px;
 float:left;
}

.info-wrapper{
 width: 600px;
 height:206px;
 background:none;
 margin-left:19px;
 float:left;
 padding: 10px 0px;
}

来源:http://www.gbin1.com

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,使用jQuery插件开发一个超酷动态留言版系统对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与使用jQuery插件开发一个超酷动态留言版系统无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈