| 1 | <!doctype html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <title>jQuery UI Dialog Static Markup Test Page</title>
|
|---|
| 5 | <link rel="stylesheet" href="../../themes/base/ui.base.css" type="text/css" />
|
|---|
| 6 | <link rel="stylesheet" href="../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
|
|---|
| 7 | <script type="text/javascript" src="../../jquery-1.4.1.js"></script>
|
|---|
| 8 | <script type="text/javascript" src="static.js"></script>
|
|---|
| 9 | <script type="text/javascript">
|
|---|
| 10 |
|
|---|
| 11 | //overlay sample plugin ( to become part of positionTo )
|
|---|
| 12 | $.fn.overlay = function(){
|
|---|
| 13 | var that = this;
|
|---|
| 14 | //overlay widget markup
|
|---|
| 15 | var overlay = $('<div class="ui-overlay">'+
|
|---|
| 16 | '<iframe class="ui-helper-zfix" src="#" frameborder="0"></iframe>'+
|
|---|
| 17 | '<div class="ui-widget-overlay"></div>'+
|
|---|
| 18 | '<div class="ui-widget-shadow ui-corner-all"></div>'+
|
|---|
| 19 | '</div>');
|
|---|
| 20 | //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
|
|---|
| 21 | overlay.find('.ui-widget-shadow')
|
|---|
| 22 | .width( $(that)[0].offsetWidth )
|
|---|
| 23 | .height( $(that)[0].offsetHeight )
|
|---|
| 24 | .css({
|
|---|
| 25 | position: 'absolute',
|
|---|
| 26 | left: $(that)[0].offsetLeft,
|
|---|
| 27 | top: $(that)[0].offsetTop
|
|---|
| 28 | });
|
|---|
| 29 | $(that).before(overlay);
|
|---|
| 30 | return this;
|
|---|
| 31 | };
|
|---|
| 32 |
|
|---|
| 33 | //call overlay
|
|---|
| 34 | $(function(){
|
|---|
| 35 | $('.ui-dialog').overlay();
|
|---|
| 36 | });
|
|---|
| 37 |
|
|---|
| 38 | </script>
|
|---|
| 39 | </head>
|
|---|
| 40 | <body style="font-size: 62.5%;">
|
|---|
| 41 |
|
|---|
| 42 |
|
|---|
| 43 |
|
|---|
| 44 |
|
|---|
| 45 | <!-- ui-dialog -->
|
|---|
| 46 | <div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 40px; top: 40px; ">
|
|---|
| 47 | <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
|
|---|
| 48 | <span class="ui-dialog-title">Dialog Title</span>
|
|---|
| 49 | <a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
|
|---|
| 50 | </div>
|
|---|
| 51 | <div class="ui-dialog-content ui-widget-content" style="height: 13em;">
|
|---|
| 52 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|---|
| 53 | </div>
|
|---|
| 54 | <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
|
|---|
| 55 | <button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
|
|---|
| 56 | <button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
|
|---|
| 57 | <button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
|
|---|
| 58 | </div>
|
|---|
| 59 | <div class="ui-resizable-n ui-resizable-handle"></div>
|
|---|
| 60 | <div class="ui-resizable-s ui-resizable-handle"></div>
|
|---|
| 61 | <div class="ui-resizable-e ui-resizable-handle"></div>
|
|---|
| 62 | <div class="ui-resizable-w ui-resizable-handle"></div>
|
|---|
| 63 | <div class="ui-resizable-ne ui-resizable-handle"></div>
|
|---|
| 64 | <div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
|
|---|
| 65 | <div class="ui-resizable-sw ui-resizable-handle"></div>
|
|---|
| 66 | <div class="ui-resizable-nw ui-resizable-handle"></div>
|
|---|
| 67 | </div>
|
|---|
| 68 |
|
|---|
| 69 | </body>
|
|---|
| 70 | </html>
|
|---|
