/tags/1.2/src/main/webapp/example/echo.html

http://jquery-stream.googlecode.com/ · HTML · 50 lines · 48 code · 2 blank · 0 comment · 0 complexity · 4d1963b3051a05fece36e9dfc5a63e16 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="../jquery.js"></script>

    7. 

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

    8. 

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

    9. 

  9. 		$.stream.setup({enableXDR: true});

    10. 

  10. 

    11. 

  11. 		$(function() {

    12. 

  12. 			$.stream("echo", {

    13. 

  13. 				open: function() {

    14. 

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

    15. 

  15. 				},

    16. 

  16. 				message: function(event) {

    17. 

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

    18. 

  18. 				},

    19. 

  19. 				error: function() {

    20. 

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

    21. 

  21. 				},

    22. 

  22. 				close: function() {

    23. 

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

    24. 

  24. 				}

    25. 

  25. 			});

    26. 

  26. 			

    27. 

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

    28. 

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

    29. 

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

    30. 

  30. 					this.value = "";

    31. 

  31. 				}

    32. 

  32. 			});

    33. 

  33. 		});

    34. 

  34. 		</script>

    35. 

  35. 		<style>

    36. 

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

    37. 

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

    38. 

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

    39. 

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

    40. 

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

    41. 

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

    42. 

  42. 		</style>

    43. 

  43. 	</head>

    44. 

  44. 	<body>

    45. 

  45. 		<div id="editor">

    46. 

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

    47. 

  47. 		</div>

    48. 

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

    49. 

  49. 	</body>

    50. 

  50. </html>
    51.