dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
165 lines (152 loc) • 8.34 kB
HTML
<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 ; }
.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>