创建交互式博客——jquery （3）

本篇文章主要介绍用jquery创建一个状态更新框，类似于新浪微博和facebook中的update boxes。也就是在update box里面输入想要呈现的信息，点击“post”，该信息就会呈现在你的个人网页里面。

在html中，status update box可以通过“status-box” class访问，“Post” button可以通过"btn"来访问，新的信息状态填加新element到网页“<ul class="posts">....</ul>”。代码如下：

var main = function() {
    $('.btn').click(function() {
            var post = $('.status-box').val();
            $('<li>').text(post).prependTo('.posts');
        });
    };
$(document).ready(main);

这里.var() 与.text()功能一样，都是填加文本信息。效果如下，在update box里面输入“succeed”，单击“post”，"succeed"就会出现在头条。

可以看到，即便按了“post”按钮，"succeed"仍然保留在update box里面，所以我们需要clear已提交信息。由于更新状态的字数不能超过140字，在update box下方同时要显示余下的字数；并且提交后，字数恢复到140。当字数小于0或者为空时，不能提交信息。完整代码如下：

var main = function() {
    $('.btn').click(function() {
            var post = $('.status-box').val();
            $('<li>').text(post).prependTo('.posts');
            $('.status-box').val('');
            $('.counter').text('140');
            $('.btn').addClass('disabled'); // disable the Post when the update box is empty.
        });
    $('.status-box').keyup(function() {
            var postLength = $(this).val().length;
            var charactersLeft = 140 - postLength; // update the remaining numbers.
            $('.counter').text(charactersLeft);
            if (charactersLeft < 0) {
                    $('.btn').addClass('disabled');
                }
            else if (charactersLeft === 140) {
                    $('.btn').addClass('disabled');
                }
            else {
                    $('.btn').removeClass('disabled');
                }
        });
    $('.btn').addClass('disabled'); // disable when it's empty.
    };
$(document).ready(main);