1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<html>
<head>
<link href="../themes/default.css" rel="stylesheet" type="text/css"/>
<link href="../themes/alphacube.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../javascripts/prototype.js"> </script>
<script type="text/javascript" src="../javascripts/effects.js"> </script>
<script type="text/javascript" src="../javascripts/window.js"> </script>
<script type="text/javascript" src="../javascripts/window_effects.js"> </script>
<script type="text/javascript" src="../javascripts/debug.js"> </script>
<script type="text/javascript">
function win1()
{
var win = new Window({id: "win1", className: "alphacube", title: "Sample", width:250, height:150, top:0, left: 1, parent:$('container')});
win.getContent().innerHTML = "<h1>Constraint inside a div !!</h1>constraint: {left:10, right:20}<br><a href='#' onclick='Windows.getWindow(\"win1\").maximize()'>Maximize me</a>";
win.setDestroyOnClose();
win.show();
win.setConstraint(true, {left:10, right:20})
win.toFront();
}
function win2()
{
var win = new Window({id: "win2", className: "alphacube", title: "Sample", width:200, height:150});
win.getContent().innerHTML = "<h1>Constraint inside page !!</h1>constraint: {top: 30, bottom:10}<br><a href='#' onclick='Windows.getWindow(\"win2\").maximize()'>Maximize me</a>";
win.setDestroyOnClose();
win.showCenter();
win.setConstraint(true, {left:0, right:0, top: 30, bottom:10})
win.toFront();
}
function win3()
{
var win = new Window({id: "win3", className: "alphacube", title: "Sample", width:250, height:150, wiredDrag: true});
win.getContent().innerHTML = "<h1>No Constraint</h1>Wired mode<br><a href='#' onclick='Windows.getWindow(\"win3\").maximize()'>Maximize me</a>";
win.setDestroyOnClose();
win.setLocation(10, 500);
win.show();
win.toFront();
}
</script>
<style>
body {
background: #363636;
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:500px;
border: 1px solid #000;
overflow:hidden;
}
#container {
position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
overflow:hidden;
background:#DAEE9B;
z-index:0;
}
</style>
</head>
<body>
<div id="border">
<div id="container"></div>
</div>
<script>
win1();
win2();
win3();
</script>
</body></html>
|
