/tags/1.2/src/main/webapp/example/echo.html
HTML | 50 lines | 48 code | 2 blank | 0 comment | 0 complexity | 4d1963b3051a05fece36e9dfc5a63e16 MD5 | raw file
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Echo</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 $(function() { 12 $.stream("echo", { 13 open: function() { 14 $("#textfield").removeAttr("disabled").focus(); 15 }, 16 message: function(event) { 17 $("<p />").text(event.data).prependTo("#content"); 18 }, 19 error: function() { 20 $("#textfield").attr("disabled", "disabled"); 21 }, 22 close: function() { 23 $("#textfield").attr("disabled", "disabled"); 24 } 25 }); 26 27 $("#textfield").keyup(function(event) { 28 if (event.which === 13 && $.trim(this.value)) { 29 $.stream().send({message: this.value}); 30 this.value = ""; 31 } 32 }); 33 }); 34 </script> 35 <style> 36 body {padding: 0; margin: 0; font-family: 'Trebuchet MS','Malgun Gothic'; font-size: 62.5%; color: #333333} 37 #editor {margin: 15px 25px;} 38 #textfield {width: 100%; height: 28px; line-height: 28px; font-family: 'Trebuchet MS','Malgun Gothic'; 39 border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;} 40 #content {height: 100%; overflow-y: auto; padding: 0 25px;} 41 #content p {margin: 0; padding: 0; font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;} 42 </style> 43 </head> 44 <body> 45 <div id="editor"> 46 <input id="textfield" type="text" disabled="disabled" /> 47 </div> 48 <div id="content"></div> 49 </body> 50</html>