r2415 - Added functional demos.
Author: powella
Date: Mon Mar 30 14:42:48 2009
New Revision: 2415
Added:
branches/dev/overlay/demos/overlay/default.html
Modified:
branches/dev/overlay/demos/overlay/index.html
Log:
Added functional demos.
Added: branches/dev/overlay/demos/overlay/default.html
==============================================================================
--- (empty file)
+++ branches/dev/overlay/demos/overlay/default.html Mon Mar 30 14:42:48 2009
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Overlay - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.overlay.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(document).ready(function(){
+
+ $('#_ButtonMargin').click(function(){
+ $('#_Margin').overlay();
+ });
+
+ $('#_ButtonFloatMargin').click(function(){
+ $('#_FloatMargin').overlay();
+ });
+
+ $('#_ButtonMessage').click(function(){
+ $('#_Message').overlay({showMessage: true, icon: true, text: 'Hey!
Sample overlay plugin message.'});
+ });
+
+ $('#_ButtonWindow').click(function(){
+ $(window).overlay({disableScrolling: true});
+ });
+
+ $('#_ButtonDocument').click(function(){
+ $(document).overlay();
+ });
+
+ $('#_ButtonBody').click(function(){
+ $(document.body).overlay();
+ });
+
+ $('#_ButtonBodyHidden').click(function(){
+ $(document.body).overlay({disableScrolling: true});
+ });
+
+ $('#_ButtonBodyClick').click(function(){
+ $(document.body).overlay({disableScrolling: true, hideOnClick: true});
+ });
+
+ $('#_ButtonBodyEsc').click(function(){
+ $(document.body).overlay({disableScrolling: true, hideOnEsc: true});
+ });
+
+ $('button').addClass("ui-state-default ui-corner-all");
+
+ });
+ </script>
+
+ <style type="text/css">
+ html, body { margin: 0; }
+ .margin { width: 400px; height: 80px; margin: 10px; border: 10px solid
#cccc33; background: #fff; }
+ .float-margin { width: 400px; height: 80px; float: left; margin: 10px;
border: 10px solid #cccc33; background: #fff; }
+
+ /* Theme CSS */
+ .ui-overlay-back { position: absolute; }
+ .ui-overlay-fore { position: absolute; }
+ .ui-overlay-fore .ui-overlay-fore-content { padding: 6px 14px; overflow:
auto; float: left; }
+ .ui-overlay-fore .ui-overlay-fore-content .ui-overlay-fore-icon { float:
left; margin-right: 0.3em; }
+ .ui-overlay-fore .ui-overlay-fore-content .ui-overlay-fore-text { float:
left; margin-top: 1px; }
+ </style>
+
+</head>
+<body>
+
+<div class="demo">
+
+ <h2>Margin Test</h2>
+ <div>
+ <div id="_Margin" class="margin">
+
+ </div>
+ </div>
+ <div><button type="button" id="_ButtonMargin">Margin Test</button></div>
+
+ <h2>Float + Margin Test</h2>
+ <div style="overflow: auto;">
+ <div id="_FloatMargin" class="float-margin">
+
+ </div>
+ </div>
+ <div><button type="button" id="_ButtonFloatMargin">Float + Margin
Test</button></div>
+
+ <h2>Message Test</h2>
+ <div>
+ <div id="_Message" class="margin">
+
+ </div>
+ </div>
+ <div><button type="button" id="_ButtonMessage">Message Test</button></div>
+
+ <h2>Window/Document/Body Test</h2>
+ <div>
+ <button type="button" id="_ButtonWindow">Window Test</button>
+ <button type="button" id="_ButtonDocument">Document Test</button>
+ <button type="button" id="_ButtonBody">Body Test</button>
+ <br/>
+ <button type="button" id="_ButtonBodyHidden">Body (No Scroll)</button>
+ <button type="button" id="_ButtonBodyClick">Body (Hide on Click)</button>
+ <button type="button" id="_ButtonBodyEsc">Body (Hide on Esc)</button>
+ </div>
+
+ <div id="info"></div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+( ... demo description ... )
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: branches/dev/overlay/demos/overlay/index.html
==============================================================================
--- branches/dev/overlay/demos/overlay/index.html (original)
+++ branches/dev/overlay/demos/overlay/index.html Mon Mar 30 14:42:48 2009
@@ -1,8 +1,15 @@
-<html>
+<!doctype html>
+<html lang="en">
<head>
- <title>jQuery UI Overlay Plugin Demo</title>
+ <title>jQuery UI Overlay Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
</head>
<body>
-
+ <div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ </ul>
+ </div>
</body>
</html>