--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+ <title>ScrollPane layout widget Test</title>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:false, isDebug:true"></script>
+ <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
+ <script type="text/javascript" src="../ScrollPane.js"></script>
+ <script language="JavaScript" type="text/javascript">
+ dojo.require("dojo.parser");
+ dojo.require("dijit.layout.LayoutContainer");
+ dojo.require("dijit.layout.ContentPane");
+ dojo.addOnLoad(function(){
+ var i;
+ var node = dojo.byId("cloneMe");
+ dojo.query(".list").forEach(function(n){
+ for(i = 0; i<42; i++){
+ var b = n.appendChild(dojo.clone(node));
+ }
+ });
+ dojo.parser.parse();
+
+ // programatic example:
+ var widget = new dojox.layout.ScrollPane({
+ orientation: "vertical",
+ style:"width:125px; height:300px; border:2px solid #ededed"
+ },"progExample");
+ widget.startup();
+ });
+ </script>
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/themes/dijit.css";
+ @import "../../../dijit/themes/tundra/tundra.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+ @import "../resources/ScrollPane.css";
+
+ #altStyle .dojoxScrollHelper {
+ -moz-border-radius:3pt;
+ background:#b7cdee;
+ border:2px solid #333;
+ width:3px;
+ }
+ table.fooBar td {
+ width:50px;
+ border-right:2px solid #000;
+ padding:20px;
+ }
+
+ #vertList li {
+ cursor:pointer;
+ }
+ .foo { float:left; }
+ </style>
+
+</head>
+<body class="tundra">
+
+
+ <h1 class='testTitle'>dojox.layout.ScrollPane</h1>
+
+ <p>An intuitive UI for lists of data in a confined space. supports horizontal or vertical "scrolling", but not both</p>
+
+ <h2>vertical:</h2>
+ <div style="float:left; padding-right:12px;">
+
+ <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7">
+ <ol class="list" id="vertList">
+ <li id="cloneMe"><a href="#"><span>testItem</span></a></li>
+ </ol>
+ </div>
+ </div>
+ <div id="altStyle" style="float:left; padding-right:12px;">
+
+ <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7">
+ <ol class="list" id="vertList2"></ol>
+ </div>
+
+ </div>
+
+ <br style="clear:both;">
+
+ <h2>horizontal</h2>
+ <div dojoType="dojox.layout.ScrollPane" orientation="horizontal" style="width:600px; height:125px; border:1px solid #b7b7b7" id="horiz">
+ <table class="fooBar">
+ <tr>
+ <td style="padding-left:20px;">LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ <td>LOREM IPSUM</td>
+ </tr>
+ </table>
+ </div>
+
+ <h2>In a layoutContainer:</h2>
+
+ <div dojoType="dijit.layout.LayoutContainer" style="width:401px; height:400px; border:1px solid #b7b7b7;">
+ <div dojoType="dojox.layout.ScrollPane" sizeShare="20" layoutAlign="left" style="width:100px; height:400px; border-right:1px solid #333">
+ <ol class="list"></ol>
+ </div>
+ <div layoutAlign="right" dojoType="dijit.layout.ContentPane" style="width:300px">
+ <p>Foo!</p>
+ </div>
+ </div>
+
+ <h2>Programatically:<h2>
+
+ <div id="progExample">
+ <ol class="list"></ol>
+ </div>
+
+</body>
+</html>
projects / eow / blobdiff