You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@clerezza.apache.org by it...@apache.org on 2009/12/21 15:24:04 UTC
svn commit: r892832 - /incubator/clerezza/issues/CLEREZZA-47/org.apache.clerezza.app.webguiexamples/src/main/resources/org/apache/clerezza/app/webguiexamples/staticweb/overlay.xhtml

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>
+