blob: c8014ec31ad076f52d4264441c2891150acecdce (
plain)
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
|
<!doctype html>
<html>
<head>
<title>jQuery UI Dialog Static Markup Test Page</title>
<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="static_helpers.js"></script>
<script type="text/javascript">
//overlay sample plugin ( to become part of positionTo )
$.fn.overlay = function(){
var that = this;
//overlay widget markup
var overlay = $('<div class="ui-overlay">'+
'<iframe class="ui-helper-zfix" src="#" frameborder="0"></iframe>'+
'<div class="ui-widget-overlay"></div>'+
'<div class="ui-widget-shadow ui-corner-all"></div>'+
'</div>');
//ui-widget-shadow gets set to exact widget dims and offset (TL). Shadow appearance/thickness is handled in ui.theme.css through margins and padding
overlay.find('.ui-widget-shadow')
.width( $(that)[0].offsetWidth )
.height( $(that)[0].offsetHeight )
.css({
position: 'absolute',
left: $(that)[0].offsetLeft,
top: $(that)[0].offsetTop
});
$(that).before(overlay);
return this;
};
//call overlay
$(function(){
$('.ui-dialog').overlay();
});
</script>
</head>
<body style="font-size: 62.5%;">
<!-- ui-dialog -->
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 300px; top: 200px; width: 300px; ">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title">This is my title</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" style="height: 13em;">
<p>I'm in a dialog!</p>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
<button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
<button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
</div>
<div class="ui-resizable-n ui-resizable-handle"></div>
<div class="ui-resizable-s ui-resizable-handle"></div>
<div class="ui-resizable-e ui-resizable-handle"></div>
<div class="ui-resizable-w ui-resizable-handle"></div>
<div class="ui-resizable-ne ui-resizable-handle"></div>
<div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
<div class="ui-resizable-sw ui-resizable-handle"></div>
<div class="ui-resizable-nw ui-resizable-handle"></div>
</div>
</body>
</html>
|
