| ||||||||||
|
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 >>
| ||||||||||