168 lines
8.4 KiB
HTML
168 lines
8.4 KiB
HTML
<!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>
|
|
|
|
<!-- for debugging: -->
|
|
<script type="text/javascript" src="../DragPane.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>
|