Updated
This commit is contained in:
167
master/examples/test_DragPane.html
Normal file
167
master/examples/test_DragPane.html
Normal file
@@ -0,0 +1,167 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user