jQuery学习笔记3——写的状态板简单实例

最新推荐文章于 2020-04-27 10:01:56 发布

Sonictl

最新推荐文章于 2020-04-27 10:01:56 发布

阅读量575

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/sonictl/article/details/45076409

版权

技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://jsfiddle.net & jQuery.com & tutorial: http://w3school.com.cn/ , http://www.codecademy.com/

-------------------------------------------------------------------------------------
Congratulations! You used jQuery events to build a status update tool.

You can type messages and post status updates
A counter keeps track of the number of characters left
The Post button is only enabled when there is a message that is 140 characters or less

Great work! Next let's learn more about how to use jQuery to create animated transitions.

HTML:

<!doctype html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
        </div>
      </form>
      <div class="button-group pull-right">
        <p class="counter">140</p>
        <p class="in-counter">0</p>
        <a href="#" class="btn btn-primary">Post</a>
      </div>
    
      <ul class="posts">
      </ul>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
    
  </body>
</html>

CSS:

html,
body {
  font-family: 'Roboto', sans-serif;
  color: #404040;
  background-color: #eee;
}

.container {
  width: 520px;
  margin-top: 20px;
}

.button-group {
  margin-bottom: 20px;
}

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
}

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.posts li {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  min-height: 42px;
}

Javascript:

var main = function(){
    $('.btn').click(function(){   //a click event handler
        var post;
        post = $('.status-box').val();//.val() is like .text() but to Get or set the value of form elements.
        //1. use $('<li>') to create a new li element;
        //2. use .text(post) to add text to the element
        //3. use .prependTo() to prepend it to the <ul class="posts">...</ul> element.
        $('<li>').text(post).prependTo('.posts');
        //create element -> inject text -> manipulate element
        
        //clear out the status box:
        post = $('.status-box').val('');
        
        //Reset the counter:
        $('.counter').text("140");
        
        $('.btn').addClass('disabled');//这里再来一个disable button
    });        

    //这里要更新剩余字数Count characters left
    $('.status-box').keyup(function(){ //a keyup event handler
        var postLength = $(this).val().length; //store the length of the massage typed in the status box.
        var charactersLeft = 140 - postLength;
        //update the '.counter' to show the left value
        $('.in-counter').text(postLength);
        $('.counter').text(charactersLeft);
      //Disable the Post button if the postLength is illegal
        if (postLength == 0 || postLength >140) 
            $('.btn').addClass('disabled');
        else
            $('.btn').removeClass('disabled');
    });
    $('.btn').addClass('disabled');//这里再来一个disable button
}
    
$(document).ready(main);

Sonictl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记3——写的状态板简单实例

http://jsfiddle.net & jQuery.com & tutorial: http://w3school.com.cn/ , http://www.codecademy.com/-------------------------------------------------------------------------------------Congratulatio
复制链接

扫一扫

专栏目录