|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
|
|
|
|
|
|
|
CODETHATFORM USER MANUAL |
Introduction
With CodeThatForm you can
create your own windows both as a new window or as a box at the existing window
describe window styles by using CSS classes
specify some parameters "in the air"
move and resize your windows, show and hide them
minimize and maximize your windows
Read Standard vs PRO to know the differences between CodeThatForm Standard and PRO.
You can create simple window or layered form that will look like a window at your current window browser.
Windows created as layers are draggable and resizable. The content within may be scrolled if it overflows window boundaries.
Layered Form Creation
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 <body></body>
// tags
bgc, // background color
bgi, // URL of background image
css, // CSS class for <body> 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
},
/* maximize */
{
w : int, h : int, src : url, over : url
},
/* close */
{
w : int, h : int, src : url, over : url
},
/* restore */
{
w : int, h : int, src : url, over : url
}
]
// 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="codethatform_layered.js"></script>
<script language="javascript1.2">
<!--
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();
}
|
Simple Window Creation
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 language="javascript1.2">
<!--
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.
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.