You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
5.3 KiB
191 lines
5.3 KiB
<!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> |
|
|
|
<!-- required: a default theme file --> |
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css"> |
|
<link rel="stylesheet" href="../resources/ScrollPane.css"> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script> |
|
|
|
<!-- do not use! only for testing dynamic themes --> |
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script language="JavaScript" type="text/javascript"> |
|
|
|
dojo.require("dojox.layout.ScrollPane"); |
|
dojo.require("dojo.parser"); |
|
dojo.require("dijit.layout.BorderContainer"); |
|
dojo.require("dijit.layout.ContentPane"); |
|
dojo.require("dijit.layout.TabContainer"); |
|
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"); |
|
|
|
}); |
|
</script> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.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; } |
|
p.special { width:800px; } |
|
</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 BorderContainer:</h2> |
|
|
|
<div dojoType="dijit.layout.BorderContainer" style="width:401px; height:400px; border:1px solid #b7b7b7;"> |
|
<div dojoType="dojox.layout.ScrollPane" region="left" style="width:100px;"> |
|
<ol class="list"></ol> |
|
</div> |
|
<div dojoType="dijit._Widget" region="top" style="height:15px" splitter="true">boo</div> |
|
<div region="center" dojoType="dijit.layout.ContentPane"> |
|
<p>Foo! Seems you need explicit height on ScrollPane's in a BorderContainer. 100% seems to suffice.</p> |
|
</div> |
|
<!--div region="top" dojoType="dojox.layout.ScrollPane" orientation="horiztonal" style="height:75px;"> |
|
<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--> |
|
<div dojoType="dojox.layout.ScrollPane" region="right" splitter="true" style="width:100px;"> |
|
<ol class="list"></ol> |
|
</div> |
|
</div> |
|
|
|
<h2>Programatically:</h2> |
|
|
|
<div id="progExample"> |
|
<ol class="list"></ol> |
|
</div> |
|
|
|
<h2>Tabs:</h2> |
|
|
|
<div id="tabber" dojoType="dijit.layout.TabContainer" style="height:6em; width:200px"> |
|
<div dojoType="dojox.layout.ScrollPane" title="tab1" orientation="horizontal"> |
|
<p class='special'>Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
</p> |
|
</div> |
|
<div dojoType="dojox.layout.ScrollPane" title="tab2" orientation="horizontal"> |
|
<p class='special'>Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
Lorem, ipsum Dolor |
|
</p> |
|
</div> |
|
</div> |
|
<div dojoType="dojox.layout.ScrollPane" style="width:600px; height:125px; border:1px solid #b7b7b7" id="noscroll"> |
|
not enough content to make it scroll |
|
</div> |
|
</body> |
|
</html>
|
|
|