/tags/1.1/src/main/webapp/echo.html

http://jquery-stream.googlecode.com/ · HTML · 48 lines · 47 code · 1 blank · 0 comment · 0 complexity · 3f022404ec8ecca8c71dfd9595cebdcc MD5 · raw file 

    

  1. <!DOCTYPE html>

    2. 

  2. <html>

    3. 

  3. 	<head>

    4. 

  4. 		<title>Echo</title>

    5. 

  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    6. 

  6. 		<script type="text/javascript" src="./js/jquery-1.4.1.js"></script>

    7. 

  7. 		<script type="text/javascript" src="./js/jquery.stream.js"></script>

    8. 

  8. 		<script type="text/javascript">

    9. 

  9. 		$(function() {

    10. 

  10. 			$.stream("./echo", {

    11. 

  11. 				open: function() {

    12. 

  12. 					$("#textfield").removeAttr("disabled").focus();

    13. 

  13. 				},

    14. 

  14. 				message: function(event) {

    15. 

  15. 					$("<p />").text(event.data).prependTo("#content");

    16. 

  16. 				},

    17. 

  17. 				error: function() {

    18. 

  18. 					$("#textfield").attr("disabled", "disabled");

    19. 

  19. 				},

    20. 

  20. 				close: function() {

    21. 

  21. 					$("#textfield").attr("disabled", "disabled");

    22. 

  22. 				}

    23. 

  23. 			});

    24. 

  24. 			

    25. 

  25. 			$("#textfield").keyup(function(event) {

    26. 

  26. 				if (event.which === 13 && $.trim(this.value)) {

    27. 

  27. 					$.stream().send({message: this.value});

    28. 

  28. 					this.value = "";

    29. 

  29. 				}

    30. 

  30. 			});

    31. 

  31. 		});

    32. 

  32. 		</script>

    33. 

  33. 		<style>

    34. 

  34. 		body {padding: 0; margin: 0; font-family: 'Trebuchet MS','Malgun Gothic'; font-size: 62.5%; color: #333333}

    35. 

  35. 		#editor {margin: 15px 25px;}

    36. 

  36. 		#textfield {width: 100%; height: 28px; line-height: 28px; font-family: 'Trebuchet MS','Malgun Gothic'; 

    37. 

  37. 					border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;}

    38. 

  38. 		#content {height: 100%; overflow-y: auto; padding: 0 25px;}

    39. 

  39. 		#content p {margin: 0; padding: 0; font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;}

    40. 

  40. 		</style>

    41. 

  41. 	</head>

    42. 

  42. 	<body>

    43. 

  43. 		<div id="editor">

    44. 

  44. 			<input id="textfield" type="text" disabled="disabled" />

    45. 

  45. 		</div>

    46. 

  46. 		<div id="content"></div>

    47. 

  47. 	</body>

    48. 

  48. </html>
    49.