jQuery学习笔记3——写的状态板简单实例
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:
1. <!doctype html>
2. <html>
3. <head>
4. <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
5. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
6. <link href="style.css" rel="stylesheet">
7. </head>
8. <body>
9. <div class="container">
10. <form>
11. <div class="form-group">
12. <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
13. </div>
14. </form>
15. <div class="button-group pull-right">
16. <p class="counter">140</p>
17. <p class="in-counter">0</p>
18. <a href="#" class="btn btn-primary">Post</a>
19. </div>
20.
21. <ul class="posts">
22. </ul>
23. </div>
24.
25. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
26. <script src="app.js"></script>
27.
28. </body>
29. </html>
CSS:
1. html,
2. body {
3. font-family: 'Roboto', sans-serif;
4. color: #404040;
5. background-color: #eee;
6. }
7.
8. .container {
9. width: 520px;
10. margin-top: 20px;
11. }
12.
13. .button-group {
14. margin-bottom: 20px;
15. }
16.
17. .counter {
18. display: inline;
19. margin-top: 0;
20. margin-bottom: 0;
21. margin-right: 10px;
22. }
23.
24. .posts {
25. clear: both;
26. list-style: none;
27. padding-left: 0;
28. width: 100%;
29. }
30.
31. .posts li {
32. background-color: #fff;
33. border: 1px solid #d8d8d8;
34. padding-top: 10px;
35. padding-left: 20px;
36. padding-right: 20px;
37. padding-bottom: 10px;
38. margin-bottom: 10px;
39. word-wrap: break-word;
40. min-height: 42px;
41. }
Javascript:
1. var main = function(){
2. $('.btn').click(function(){ //a click event handler
3. var post;
4. post = $('.status-box').val();//.val() is like .text() but to Get or set the value of form elements.
5. //1. use $('<li>') to create a new li element;
6. //2. use .text(post) to add text to the element
7. //3. use .prependTo() to prepend it to the <ul class="posts">...</ul> element.
8. $('<li>').text(post).prependTo('.posts');
9. //create element -> inject text -> manipulate element
10.
11. //clear out the status box:
12. post = $('.status-box').val('');
13.
14. //Reset the counter:
15. $('.counter').text("140");
16.
17. $('.btn').addClass('disabled');//这里再来一个disable button
18. });
19.
20. //这里要更新剩余字数Count characters left
21. $('.status-box').keyup(function(){ //a keyup event handler
22. var postLength = $(this).val().length; //store the length of the massage typed in the status box.
23. var charactersLeft = 140 - postLength;
24. //update the '.counter' to show the left value
25. $('.in-counter').text(postLength);
26. $('.counter').text(charactersLeft);
27. //Disable the Post button if the postLength is illegal
28. if (postLength == 0 || postLength >140)
29. $('.btn').addClass('disabled');
30. else
31. $('.btn').removeClass('disabled');
32. });
33. $('.btn').addClass('disabled');//这里再来一个disable button
34. }
35.
36. $(document).ready(main);
