Author: ito
Date: Mon Dec 21 14:24:04 2009
New Revision: 892832

URL: http://svn.apache.org/viewvc?rev=892832&view=rev
Log:
CLEREZZA-47: overlay.xhtml added to webguiexamples

Added:
    
incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml

Added: 
incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml
URL: 
http://svn.apache.org/viewvc/incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml?rev=892832&view=auto
==============================================================================
--- 
incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml
 (added)
+++ 
incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml
 Mon Dec 21 14:24:04 2009
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
+
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+<head>
+<title>overlay - example</title>
+
+       <link href="/style/style.css" media="screen" rel="stylesheet" 
type="text/css" />
+    <link href="./style/demo.css" media="screen" rel="stylesheet" 
type="text/css" />
+       <link href="/yui/container/assets/container-core.css" rel="stylesheet" 
type="text/css"/>
+       <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"/>
+       <script src="/yui/yahoo-dom-event/yahoo-dom-event.js" 
type="text/javascript"/>
+       <script src="/yui/element/element-min.js" type="text/javascript"/>
+       <script src="/yui/container/container-min.js" type="text/javascript"/>
+       <script src="/yui/resize/resize-min.js" type="text/javascript"/>
+       <script src="/yui/utilities/utilities.js" type="text/javascript"/>
+       <script src="/scripts/overlay.js" type="text/javascript"/>
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+       <div id="demo">
+       <h3>Description</h3>
+
+       
+               <h3>Overlay</h3>
+               
+        <div>
+               The Overlay behave similarly to an OS window. Unlike true 
browser popup windows,
+               the overlay is floating DHTML elements embedded directly within 
the page context.
+               The Overlay is positioned above the flow of a page and is 
draggable, resizable and has a close button.
+               The Overlay has a method show with arguments body, header, 
width and height, which renders the overlay.
+               The body and the header can be html elements or text.
+               The width (default value: 46em) and height (default value: 
37em) can be defined absolutely or relatively.
+               Furthermore the Overlay has a method close to destroy the 
overlay.
+               <br/>
+               <br/>
+               <div>
+                       <a href="#" 
onclick="Overlay.show('&lt;div&gt;body&lt;/div&gt;', 'header', '20em', 
'10em');">click here to add the overlay.</a> <br/>
+               </div>
+               <br/>
+               <br/>
+
+
+               The following css and scripts have to be included:
+               <pre>
+&lt;link href="/yui/container/assets/container-core.css" rel="stylesheet" 
type="text/css"/&gt;
+&lt;script src="/yui/yahoo-dom-event/yahoo-dom-event.js" 
type="text/javascript"/&gt;
+&lt;script src="/yui/element/element-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/container/container-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/dragdrop/dragdrop-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/resize/resize-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/utilities/utilities.js" type="text/javascript"/&gt;
+&lt;script src="/scripts/overlay.js" type="text/javascript"/&gt;
+               </pre>
+               <br/>
+               <br/>
+               e.g.
+               <pre>
+...
+       &lt;body&gt;
+          &lt;div&gt;
+                &lt;a href="#" 
onclick="Overlay.show('&amp;lt;div&amp;gt;body&amp;lt;/div&amp;gt;', 'header', 
'20em', '10em');"&gt;click here to add the overlay &lt;/a&gt; &lt;br/&gt;
+          &lt;/div&gt;
+       &lt;/body&gt;
+...
+               </pre>
+               </div>
+               
+       </div>
+</div>
+<!-- // content -->
+       
+</body>
+</html>
+


Reply via email to