1<html> 2 <head> 3 <script src="/lws-common.js"></script> 4 <script src="lwsgt.js"></script> 5 <style> 6 .body { font-size: 12 } 7 .gstitle { font-size: 24; text-align:center } 8 .group1 { vertical-align:middle;text-align:center;background:#f0f0e0; 9 padding:12px; -webkit-border-radius:10px; 10 -moz-border-radius:10px;border-radius:10px; } 11 .group2 { vertical-align:middle; font-size: 18;text-align:center; 12 margin:auto; align:center; 13 background-color: rgba(255, 255, 255, 0.8); padding:12px; 14 display:inline-block; -webkit-border-radius:10px; 15 -moz-border-radius:10px; border-radius:10px; } 16 17 .lwsgt_title { font-size: 24; text-align:center } 18 .lwsgt_breadcrumbs { font-size: 18; text-align:left } 19 .lwsgt_table { font-size: 14; padding:12px; margin: 12px; align:center } 20 .lwsgt_hdr { font-size: 18; text-align:center; 21 background-color: rgba(40, 40, 40, 0.8); color: white } 22 .lwsgt_tr { padding: 10px } 23 .lwsgt_td { padding: 3px } 24 </style> 25 </head> 26 <body> 27 <table> 28 <tr><td class="gstitle"> 29 LWS Generic Table demo 30 </td></tr> 31 <tr><td class="group2"> 32 This is a demo of lws generic table, using a protocol plugin 33 "protocol-lws-table-dirlisting". It shows a directory listing, 34 but unlike an oldstyle directory listing done on the 35 server side with a script, this is static html that connects 36 back to the server with a websocket, and gets live JSON from 37 that. 38 <p> 39 Actually the static html is extremely simple, since it uses 40 lwsgt, LWS Generic Table, JS include on the client-side that 41 handles all the table generation from a template sent in JSON 42 over the ws link. It means there is no custom JS required 43 clientside either. It's just CSS, this text and a call to 44 initialize lwsgt with the appropriate ws protocol. 45 </td></tr> 46 <tr><td><div id="lwsgt1" class="group1"></div></td></tr> 47 <tr><td class="group2"> 48 There's no problem having multiple independent instances per 49 page... 50 </td></tr> 51 <tr><td><div id="lwsgt2" class="group1"></div></td></tr> 52 </table> 53 <div id="debug"></div> 54 55 <script nonce="lwscaro"> 56 var v1 = new lwsgt_initial("Dir listing demo", 57 "protocol-lws-table-dirlisting", 58 "lwsgt1", "lwsgt_dir_click", "v1"); 59 var v2 = new lwsgt_initial("Dir listing 2", 60 "protocol-lws-table-dirlisting", 61 "lwsgt2", "lwsgt_dir_click", "v2"); 62 63function lwsgt_dir_click(gt, u, col, row) 64{ 65 if (u[0] == '=') { /* change directory */ 66 window[gt].lwsgt_ws.send(u.substring(1, u.length)); 67 return; 68 } 69 var win = window.open(u, '_blank'); 70 win.focus(); 71} 72 73 </script> 74 </body> 75</html> 76