![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
You can read a breaf tutorial here.
With CodeThatForm you can
Windows created as layers are draggable and resizable. The content within may be scrolled if it overflows window boundaries.
To create layered form you should create instance of CLrWindow class with the following parameters: new CLrWindow ( w, // width h, // height y, // top-left corner y position // on the screen x, // top-left corner x position // on the screen title, // window title html, // inner HTML, that's usually // inserted between // tags bgc, // background color bgi, // URL of background image css, // CSS class for if required btn, // array of window buttons cpt, // title properties brd, // window border cssf, // path to linked css file scr, // whether or not we use scrolling // at the window // (true or 1 if scrollable, false // or 0 otherwise) sz, // whether or not window is resizable // (true or 1 if sizeable, false or // 0 otherwise) z, //z-index flt // filter (transparency, shadow, etc.) ) // array of window buttons // every button can be skipped by 'null' replacement btn [ /* minimize */ { w:int, // button image width h:int, // button image height src:url, // button image source over:url // button over-image source }, { w:int,h:int,src:url,over:url }, /* maximize */ { w:int,h:int,src:url,over:url }, /* close */ { w:int,h:int,src:url,over:url } /* restore */ ] // title properties cpt { bgc:color, h:int, bgi:url, css:class } // window border brd { color:'black', width:2 } For example, code for layered form creation may look like this: <script src="codethatsdk.js"></script> <script src="layered.js"></script> <script> var w; var html = "<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=80%>"+ "<h4>This is</h4> a test `window` created as a box.<center>It is a layer that allows any HTML code within."+ " You can drag it by title</td>"+ '</tr></table>'; function wincreate () { w = new CLrWindow( 300,200,100,100,'Test window',html,'#AADDEE','','', [//buttons {w:16,h:14,src:'img/min.gif',over:'img/minovr.gif'}, //min {w:16,h:14,src:'img/max.gif',over:'img/maxovr.gif'}, //max {w:16,h:14,src:'img/close.gif',over:'img/closeovr.gif'},// close {w:16,h:14,src:'img/rest.gif', over:'img/restovr.gif'}//restore ],{ bgc:'yellow',h:25 }, {color:'black',width:2}, 1, 1, 2, 'Alpha(Opacity=80)'); w.create(); } </script>
To create simple window you should create instance of CWindow class with the following parameters: new CWindow ( w, h, y, x, title, html, bgc, bgi, css, cssf, // path to linked css file scr, sz ) As you can see many parameters are similar to CLrWindow. But some of parameters are missed. So, you can't change the window buttons appearence and so on. For example, code for simple window creation may look like this: <script src="codethatsdk.js"></script> <script src="codethatform_windowed.js"></script> <script> var w; var html = "<table border=0 cellpadding=0 cellspacing=0 width=100%>"+ "<tr><td width=80%><h4>This is</h4> a test window created "+ "as a kind of message box.<br><center>It is a usual browser "+ "window that allows any HTML code within.</td>"+ '<td align=center bgcolor="#AADDCC"><form><input type=button '+ 'value=close onclick="window.close()"></form></td></tr></table>'; function wincreate () { w = new CWindow(300,150,100,200,'Message window',html,'#AADDEE','','','',1,1); w.create(); } </script> See the first example of layered form window and simple window. Learn more about properties description and window's actions. Read more about CodeThatForm >>
|