/tags/1.2/src/main/webapp/example/chat.html
HTML | 83 lines | 76 code | 7 blank | 0 comment | 0 complexity | e5e8019c06d84634925653ba6c24ad29 MD5 | raw file
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Chat</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="../jquery.js"></script> 7 <script type="text/javascript" src="../jquery.stream.js"></script> 8 <script type="text/javascript"> 9 $.stream.setup({enableXDR: true}); 10 11 var chat = { 12 lastUsername: "Donghwan Kim", 13 username: $.trim(window.prompt("Username?")) || "Anonymous" + $(window).width() 14 }; 15 16 $(function() { 17 18 $.stream("chat", { 19 dataType: "json", 20 context: $("#content")[0], 21 open: function() { 22 $("#editor .message").removeAttr("disabled").focus(); 23 $.stream().send({username: chat.username, message: "Hello"}); 24 }, 25 message: function(event) { 26 if (chat.lastUsername !== event.data.username) { 27 $("<p />").addClass("user").text(chat.lastUsername = event.data.username).appendTo(this); 28 } 29 30 $("<p />").addClass("message").text(event.data.message).appendTo(this); 31 this.scrollTop = this.scrollHeight; 32 }, 33 error: function() { 34 $("#editor .message").attr("disabled", "disabled"); 35 }, 36 close: function() { 37 $("#editor .message").attr("disabled", "disabled"); 38 } 39 }); 40 41 $("#editor .user").text(chat.username); 42 $("#editor .message").keyup(function(event) { 43 if (event.which === 13 && $.trim(this.value)) { 44 $.stream().send({username: chat.username, message: this.value}); 45 this.value = ""; 46 } 47 }); 48 49 $(window).resize(function() { 50 $("#content") 51 .height($(window).height() - $("#editor").outerHeight(true) - 15) 52 .each(function() { 53 this.scrollTop = this.scrollHeight; 54 }); 55 }).resize(); 56 57 }); 58 </script> 59 <style> 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 .content {height: 100%; overflow-y: auto; padding: 14px 15px 0 25px;} 62 .content p {margin: 0; padding: 0;} 63 .content .user {font-size: 1.8em; color: #3e3e3e; font-weight: bold; letter-spacing: -1px; margin-top: 0.5em;} 64 .content .message {font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;} 65 .editor {margin: 0 25px 15px 25px;} 66 .editor .user {font-size: 1.5em; display: inline-block; margin: 1em;} 67 .editor input {font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif;} 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 </style> 70 </head> 71 <body> 72 <div id="content" class="content"> 73 <p class="user"><span>Donghwan Kim</span></p> 74 <p class="message">Welcome to jQuery Stream!</p> 75 </div> 76 <div id="editor" class="editor"> 77 <p class="user"></p> 78 <form action="#" onsubmit="return false;"> 79 <input class="message" type="text" disabled="disabled" /> 80 </form> 81 </div> 82 </body> 83</html>