-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
100 lines (92 loc) · 4.36 KB
/
demo.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
<title>iWin JS Library Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.winb {
overflow: visible;
position: fixed;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
color: #222;
}
.winbt {
display: block;
border: solid #000;
border-width: 0px 0px 1px 0px;
font-size: 15px;
cursor: move;
padding: 0 5px;
line-height: 21px;
}
.winbt span:first-child {color: #E00; float: left; cursor:default}
.winbb {display:table;width:100%; border:solid #000; border-width:0px 0px 1px 0px; font-size:15px; text-align: center;}
.winbbt {display:table-cell;padding:0 2px; line-height:19px; white-space:nowrap; border:solid #000; border-width: 0px 1px 0px 0px; cursor:pointer}
.winbbt:last-child {border: none;}
.winbbt.open {background:#E6ECF2}
.winbc {display:block; white-space:nowrap; position:relative;}
.winr {position:absolute;}
.winr.tl{cursor:nwse-resize;width:14px;height:14px;left:-7px;top:-7px;}
.winr.tt{cursor:ns-resize;width:-webkit-calc(100% - 14px);width:calc(100% - 14px);height:10px;left:7px;top:-7px;}
.winr.tr{cursor:nesw-resize;width:14px;height:14px;right:-7px;top:-7px;}
.winr.bl{cursor:nesw-resize;width:14px;height:14px;left:-7px;bottom:-7px;}
.winr.bb{cursor:ns-resize;width:-webkit-calc(100% - 14px);width:calc(100% - 14px);height:10px;left:7px;bottom:-7px;}
.winr.br{cursor:nwse-resize;width:14px;height:14px;right:-7px;bottom:-7px;}
.winr.ll{cursor:ew-resize;height:-webkit-calc(100% - 14px);height:calc(100% - 14px);width:10px;left:-7px;top:7px}
.winr.rr{cursor:ew-resize;height:-webkit-calc(100% - 14px);height:calc(100% - 14px);width:10px;right:-7px;top:7px}
/* .nse is set to body on drag and resize */
.nse{-moz-user-select:-moz-none;-moz-user-select:none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
</style>
<script type="text/javascript" src="iWin.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(e) {
iWin.init({
onSetTitle:function(wID, obj, title)
{
obj.innerHTML = '<span>[X]</span><span>'+ title+ '</span>';
// Capture phase second
iWin.addEvent(iWin.win[wID].obj.children[0].children[0], 'press', function(e) {
var evt = e || window.event;
evt.preventDefault();
iWin.win[wID].onClose(wID, e);
(e.stopPropagation)? e.stopPropagation(): e.cancelBubble = true;
}, true);
}
});
});
function createDemoWindow()
{
var wID = 'iDemo' + new Date().getTime(); // each window must have unique id
/*
Call iWin.create which will create the window.
The first argumnent is an object containing parameters.
They can be changed later by calling various methods.
Second Argument is window id (wId). It should be unique.
*/
iWin.create({title: 'Window Title', onClose:function(){iWin.destroy(wID)}}, wID);
/*
Set contents of the window.
Second argument indicates that we want window to be automatically resized to fit the content
*/
iWin.setContent('Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>'+
'Nulla varius justo tellus, ac aliquam lorem maximus ut. Suspendisse fermentum<br>'+
'purus euismod quam consequat interdum. Maecenas eget ultrices ligula, sed fringilla<br>'+
'nisl. Ut eu leo non sem ultricies interdum. Nam et porta metus, sed efficitur felis.<br>'+
'Proin et mauris magna. Fusce et condimentum dui, id finibus lorem. Nunc volutpat, neque<br>'+
'nec tincidunt auctor, risus dui congue felis, vel tristique ipsum sapien sed lorem.<br>'+
'Maecenas tempor vestibulum nunc vel maximus. Nulla varius finibus velit, in aliquet<br>'+
'felis dignissim in. Pellentesque ut commodo metus. Sed suscipit erat non mauris finibus<br>'+
'pretium. Phasellus dignissim sem turpis, id suscipit magna suscipit ut. ', wID);
iWin.setContentDimensions(null, wID);
iWin.setPosition(60, (window.innerWidth / 2) - 20, wID);
// Show the Window
iWin.show(wID);
return true;
}
</script>
</head>
<body>
<button onclick="createDemoWindow()">Create New window</button>
</body>
</html>