使用jQuery插件開發(fā)一個完整驗證功能的超酷動態(tài)留言版系統(tǒng)

今天是情人節(jié)，這里我們將創(chuàng)建一個超酷的動態(tài)留言板來幫助大家度過這個情人節(jié)，可能大家使用過很多的評論或者留言系統(tǒng)，基本都是靜態(tài)輸入的形式，今天我們創(chuàng) 建的這個留言板靈感來自于一些超棒的網(wǎng)頁設計，在用戶輸入過程中，會動態(tài)的顯示輸入框，產(chǎn)生類似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
    });
});

以上代碼分別使用不同的效果來動態(tài)展示輸入效果。

輸入內容提示，及其表單驗證如下：

$(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>

posted @ 2012-02-15 14:29 igeekbar 閱讀(2175) 評論(3) 收藏舉報

刷新頁面返回頂部

使用jQuery插件開發(fā)一個完整驗證功能的超酷動態(tài)留言版系統(tǒng)

jQuery插件

Javascript代碼

HTML

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱