diff options
| author | Scott Jehl <scott@scottjehl.com> | 2008-12-11 00:03:51 +0000 |
|---|---|---|
| committer | Scott Jehl <scott@scottjehl.com> | 2008-12-11 00:03:51 +0000 |
| commit | 8c7f9f31dab0c1f5ce31736bce114e89f3d3231a (patch) | |
| tree | e7b6086a8ed60943ce00cb083a5f3185abaa367a /tests | |
| parent | 4fdb6a132a504000984e5fc836b891d264de80c0 (diff) | |
| download | jquery-ui-8c7f9f31dab0c1f5ce31736bce114e89f3d3231a.tar.gz jquery-ui-8c7f9f31dab0c1f5ce31736bce114e89f3d3231a.zip | |
- added overlay.html static demo to demonstrate the positionTo iframefix + shadow markup. It's actually not static, but a js demo with our markup recommendations, since we found it easier to communicate our recommendation that way.
- edited ui-widget-overlay and ui-widget-shadow in theme.css
- added ui-helper-zfix to core.css for iframe fix needs
Comment tokens and TR levers for the overlay classes will be added tomorrow.
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/static/overlay.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/tests/static/overlay.html b/tests/static/overlay.html new file mode 100644 index 000000000..c8014ec31 --- /dev/null +++ b/tests/static/overlay.html @@ -0,0 +1,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> |