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

http://jquery-stream.googlecode.com/ · HTML · 83 lines · 76 code · 7 blank · 0 comment · 0 complexity · e5e8019c06d84634925653ba6c24ad29 MD5 · raw file 

    

  1. <!DOCTYPE html>

    2. 

  2. <html>

    3. 

  3. 	<head>

    4. 

  4. 		<title>Chat</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. 		var chat = {

    12. 

  12. 			lastUsername: "Donghwan Kim",

    13. 

  13. 			username: $.trim(window.prompt("Username?")) || "Anonymous" + $(window).width()

    14. 

  14. 		};

    15. 

  15. 				

    16. 

  16. 		$(function() {

    17. 

  17. 			

    18. 

  18. 			$.stream("chat", {

    19. 

  19. 				dataType: "json",

    20. 

  20. 				context: $("#content")[0],

    21. 

  21. 				open: function() {

    22. 

  22. 					$("#editor .message").removeAttr("disabled").focus();

    23. 

  23. 					$.stream().send({username: chat.username, message: "Hello"});

    24. 

  24. 				},

    25. 

  25. 				message: function(event) {

    26. 

  26. 					if (chat.lastUsername !== event.data.username) {

    27. 

  27. 						$("<p />").addClass("user").text(chat.lastUsername = event.data.username).appendTo(this);

    28. 

  28. 					}

    29. 

  29. 					

    30. 

  30. 					$("<p />").addClass("message").text(event.data.message).appendTo(this);

    31. 

  31. 					this.scrollTop = this.scrollHeight;

    32. 

  32. 				},

    33. 

  33. 				error: function() {

    34. 

  34. 					$("#editor .message").attr("disabled", "disabled");

    35. 

  35. 				},

    36. 

  36. 				close: function() {

    37. 

  37. 					$("#editor .message").attr("disabled", "disabled");

    38. 

  38. 				}

    39. 

  39. 			});

    40. 

  40. 			

    41. 

  41. 			$("#editor .user").text(chat.username);

    42. 

  42. 			$("#editor .message").keyup(function(event) {

    43. 

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

    44. 

  44. 					$.stream().send({username: chat.username, message: this.value});

    45. 

  45. 					this.value = "";

    46. 

  46. 				}

    47. 

  47. 			});

    48. 

  48. 			

    49. 

  49. 			$(window).resize(function() {

    50. 

  50. 				$("#content")

    51. 

  51. 				.height($(window).height() - $("#editor").outerHeight(true) - 15)

    52. 

  52. 				.each(function() {

    53. 

  53. 					this.scrollTop = this.scrollHeight;

    54. 

  54. 				});

    55. 

  55. 			}).resize();

    56. 

  56. 			

    57. 

  57. 		});

    58. 

  58. 		</script>

    59. 

  59. 		<style>

    60. 

  60. 		body {padding: 0; margin: 0; min-width: 320px; font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif; font-size: 62.5%; color: #333333}

    61. 

  61. 		.content {height: 100%; overflow-y: auto; padding: 14px 15px 0 25px;}

    62. 

  62. 		.content p {margin: 0; padding: 0;}

    63. 

  63. 		.content .user {font-size: 1.8em; color: #3e3e3e; font-weight: bold; letter-spacing: -1px; margin-top: 0.5em;}

    64. 

  64. 		.content .message {font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;}

    65. 

  65. 		.editor {margin: 0 25px 15px 25px;}

    66. 

  66. 		.editor .user {font-size: 1.5em; display: inline-block; margin: 1em;}

    67. 

  67. 		.editor input {font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif;}

    68. 

  68. 		.editor .message {width: 100%; height: 28px; line-height: 28px; border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;}

    69. 

  69. 		</style>

    70. 

  70. 	</head>

    71. 

  71. 	<body>

    72. 

  72. 		<div id="content" class="content">

    73. 

  73. 			<p class="user"><span>Donghwan Kim</span></p>

    74. 

  74. 			<p class="message">Welcome to jQuery Stream!</p>

    75. 

  75. 		</div>

    76. 

  76. 		<div id="editor" class="editor">

    77. 

  77. 			<p class="user"></p>

    78. 

  78. 			<form action="#" onsubmit="return false;">

    79. 

  79. 				<input class="message" type="text" disabled="disabled" />

    80. 

  80. 			</form>

    81. 

  81. 		</div>

    82. 

  82. 	</body>

    83. 

  83. </html>
    84.