![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
The following "8 steps" instruction will guide you step by step through the CodeThatForm configuration process. | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
For free version (STD) download use this link. If you'd like to buy full version (PRO) use this link. Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type. Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
| ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
Your file may look as following: <html> <head> <link href="common_codethat.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="jsform/layered.js"></script> </head> <body> </body> </html> At the example above we're about to create Layered JSForm. In case you'd like to create Simple Window write <script language="javascript1.2" src="jsform/layered.js"></script> instead of <script language="javascript1.2" src="jsform/codethatform_windowed.js"></script> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant. To create new JSForm use function wincreate() as at the example below: <script language="javascript1.2"> var w; var html = "<table border=0 cellpadding=4 cellspacing=2 width=100%><tr><td>"+ "<p class=title><img src='img/alarm.gif' align=left valign=bottom> It's time to wake up!</td></tr></table>"; function wincreate () { w = new CLrWindow( 384, 256, 150, 10,' <font size="2pt" color="#F9B800"><b>CodeThatForm - layered</b></font>',html,'#F0DCA3','','', [//buttons {w:16,h:14,src:'img/orange/min.gif',over:'img/orange/minovr.gif'}, //min {w:16,h:14,src:'img/orange/max.gif',over:'img/orange/maxovr.gif'},//max {w:16,h:14,src:'img/orange/close.gif',over:'img/orange/closeovr.gif'},// close {w:16,h:14,src:'img/orange/rest.gif', over:'img/orange/restovr.gif'}//restore ],{ bgc:'#761500',h:22, bgi:'', css:'title' }, {color:'#F9B800',width:1}, 0, 0, 2, 'Alpha(Opacity=80)'); w.create(); } </script> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<form> <p>Press this button to Create New Layered Form <input class=btn type=button onclick="wincreate()" value="Create New Box"> <p>Change background color for your new form - <select class=formlist name=bgcolor onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.bgColor(bgcolor.value)"> <option value="#16731A" selected> Green <option value="#000000"> Black <option value="#F0DCA3"> Yellow </select> <p>Change window title for your new form - <select class=formlist name=win_title onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.Title(win_title.value)"> <option value=" <font size='2pt' color='#F9B800'><b> CodeThatForm - layered</b></font>" selected>CodeThatForm - layered <option value=" <font size='2pt' color='#F9B800'><b> My favorite example</b></font>"> My favorite example <option value=" <font size='2pt' color='#F9B800'><b> Small form</b> </font>">Small form </select> <p>Add adition HTML-code to your new form - <select class=formlist name=html onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.appHTML(html.value)"> <option value="<tr><td><p class=title2> <img src='img/deal.gif' align=left valign=bottom> And do many important things.</td></tr>" selected>And do many important things. <option value="<tr><td><p class=title3> <img src='img/alarm.gif' align=left valign=bottom> It's time to wake up!</td></tr>"> It's time to wake up! </select> <p><input class=btn type=button onclick=" if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.Caption({bgc:'#000000',h:22, bgi:'', css:'title'})" value="Change Caption Style"> </form> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<form> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Press this button to Create New Simple Window Form <input class=btn type=button onclick="wincreate()" value="Create New Box"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Change window coordinate <p> <b>x</b> <input class=formlist style="width: 50px" name=x value=300> <b>y</b> <input class=formlist style="width: 50px" name=y value=200> <input type=button value="Move" class="btn" onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else if (x.value == null) alert('You should enter x-coordinate.'); else if (y.value == null) alert('You should enter y-coordinate.'); else w.move(x.value, y.value)"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Change window size <p> <b>width</b> <input class=formlist style="width: 50px" name=win_width value=400> <b>height</b> <input class=formlist style="width: 50px" name=win_height value=100> <input type=button value="Resize" class="btn" onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else if (win_width.value == null) alert('You should enter width.'); else if (win_height.value == null) alert('You should enter height.'); else w.resize(win_width.value, win_height.value)"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Load URL <p> <input name=url maxlength=1024 size=30 value='http://www.codethat.com'> <input type=button class=btn onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else w.loadURL(this.form.url.value)" value="Load"> </form> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
<HTML> <HEAD> <link href="/common_codethat.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="jsform/layered.js"></script> <script language="javascript1.2"> var w_l; var html_layer = "<table border=0 cellpadding=4 "+ "cellspacing=2 width=100%><tr><td>"+ "<p class=title><img src='img/alarm.gif' "+ "align=left valign=bottom> It's time "+ "to wake up!</td></tr>"; function layercreate () { w_l = new CLrWindow( 384, 256, 150, 10,' <font size="2pt" color="#F9B800"> <b>CodeThatForm - layered</b></font>', html_layer,'#16731A','','', [//buttons {w:16,h:14,src:'img/orange/min.gif', over:'img/orange/minovr.gif'}, //min {w:16,h:14,src:'img/orange/max.gif', over:'img/orange/maxovr.gif'},//max {w:16,h:14,src:'img/orange/close.gif', over:'img/orange/closeovr.gif'},// close {w:16,h:14,src:'img/orange/rest.gif', over:'img/orange/restovr.gif'}//restore ],{ bgc:'#761500',h:22, bgi:'', css:'title' }, {color:'#F9B800',width:1}, 0, 0, 2, 'Alpha(Opacity=80)'); w_l.create(); } </script> </head> <body> <form> <p>Press this button to Create New Layered Form <input class=btn type=button onclick="wincreate()" value="Create New Box"> <p>Change background color for your new form - <select class=formlist name=bgcolor onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.bgColor(bgcolor.value)"> <option value="#16731A" selected> Green <option value="#000000"> Black <option value="#F0DCA3"> Yellow </select> <p>Change window title for your new form - <select class=formlist name=win_title onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.Title(win_title.value)"> <option value=" <font size='2pt' color='#F9B800'><b> CodeThatForm - layered</b></font>" selected>CodeThatForm - layered <option value=" <font size='2pt' color='#F9B800'><b> My favorite example</b></font>"> My favorite example <option value=" <font size='2pt' color='#F9B800'><b> Small form</b> </font>">Small form </select> <p>Add adition HTML-code to your new form - <select class=formlist name=html onclick="if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.appHTML(html.value)"> <option value="<tr><td><p class=title2> <img src='img/deal.gif' align=left valign=bottom> And do many important things.</td></tr>" selected>And do many important things. <option value="<tr><td><p class=title3> <img src='img/alarm.gif' align=left valign=bottom> It's time to wake up!</td></tr>"> It's time to wake up! </select> <p><input class=btn type=button onclick=" if (w_l == null) alert('You should create at least one Layered Form. Press Create New Box button.'); else w_l.Caption({bgc:'#000000',h:22, bgi:'', css:'title'})" value="Change Caption Style"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Press this button to Create New Simple Window Form <input class=btn type=button onclick="wincreate()" value="Create New Box"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Change window coordinate <p> <b>x</b> <input class=formlist style="width: 50px" name=x value=300> <b>y</b> <input class=formlist style="width: 50px" name=y value=200> <input type=button value="Move" class="btn" onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else if (x.value == null) alert('You should enter x-coordinate.'); else if (y.value == null) alert('You should enter y-coordinate.'); else w.move(x.value, y.value)"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Change window size <p> <b>width</b> <input class=formlist style="width: 50px" name=win_width value=400> <b>height</b> <input class=formlist style="width: 50px" name=win_height value=100> <input type=button value="Resize" class="btn" onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else if (win_width.value == null) alert('You should enter width.'); else if (win_height.value == null) alert('You should enter height.'); else w.resize(win_width.value, win_height.value)"> <P class=title3> <IMG height=15 src="img/arrow_light.gif" width=13> Load URL <p> <input name=url maxlength=1024 size=30 value='http://www.codethat.com'> <input type=button class=btn onclick="if (w == null) alert('You should create at least one Windowed Form. Press Create New Box button.'); else w.loadURL(this.form.url.value)" value="Load"> </form> </body> | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
To make your life easier we do plan to supply you with on and off line JSForm builders in the nearest time. | ||||||||||
![]() | ||||||||||
![]() | ||||||||||
![]() |