diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/layout/tests/test_ScrollPane.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/layout/tests/test_ScrollPane.html')
| -rw-r--r-- | includes/js/dojox/layout/tests/test_ScrollPane.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/includes/js/dojox/layout/tests/test_ScrollPane.html b/includes/js/dojox/layout/tests/test_ScrollPane.html new file mode 100644 index 0000000..53a4a26 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ScrollPane.html @@ -0,0 +1,129 @@ +<!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> |