软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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插件开发一个超酷动态留言版系统无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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