You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
8.1 KiB
164 lines
8.1 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
|
|
<title>DragPane layout widget Test</title> |
|
|
|
<!-- required: a default theme file --> |
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css"> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> |
|
|
|
<!-- do not use! only for testing dynamic themes --> |
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("dojox.layout.DragPane"); |
|
dojo.require("dojo.parser"); |
|
</script> |
|
|
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
|
|
.fbox { float:left; width:200px; height:200px; margin:0; padding:0; } |
|
.hasHand { cursor:pointer !important; } |
|
.box { width:25px; height:25px; background:#000; position:absolute; } |
|
#br { bottom:5px; right:5px; } |
|
#bl { left:5px; bottom:5px; } |
|
#tl { top:5px; left:5px; } |
|
#tr { top:5px; right:5px; } |
|
.hugetext { |
|
font:22pt Arial,sans-serif; |
|
font-weight:bold; |
|
} |
|
#container0, |
|
#container { |
|
overflow:auto; |
|
width:600px; |
|
height:300px; |
|
border:4px solid #ededed; |
|
background:#ededed; |
|
} |
|
#innerThing { |
|
width:400px; height:400px; |
|
} |
|
</style> |
|
|
|
</head> |
|
<body class="tundra"> |
|
|
|
<h1 class="testTitle">dojox.layout.DragPane</h1> |
|
<p>A simple widget to drag contents around within a sized div</p> |
|
|
|
<h2>Inverted dragging</h2> |
|
<div class="hugetext" id="container" data-dojo-type="dojox.layout.DragPane"> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
</div> |
|
|
|
<h2>Not inverted</h2> |
|
<div class="hugetext" id="container0" data-dojo-props="invert:false" data-dojo-type="dojox.layout.DragPane"> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
<p style="color:#666; padding:8px; margin:0;"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam |
|
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend |
|
sagittis turpis. purus purus in nibh. Phasellus in nunc. |
|
</p> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|