source: Dev/trunk/src/client/dojox/layout/tests/test_ScrollPane.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.3 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4
5        <title>ScrollPane layout widget Test</title>
6
7        <!-- required: a default theme file -->
8        <link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
9        <link rel="stylesheet" href="../resources/ScrollPane.css">     
10
11        <!-- required: dojo.js -->
12        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script>
13
14        <!-- do not use! only for testing dynamic themes -->
15        <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
16
17        <script language="JavaScript" type="text/javascript">
18               
19                dojo.require("dojox.layout.ScrollPane");
20                dojo.require("dojo.parser");
21                dojo.require("dijit.layout.BorderContainer");
22                dojo.require("dijit.layout.ContentPane");
23                dojo.require("dijit.layout.TabContainer");
24                dojo.addOnLoad(function(){
25                        var i;
26                        var node = dojo.byId("cloneMe");
27                        dojo.query(".list").forEach(function(n){
28                                for(i = 0; i<42; i++){
29                                        var b = n.appendChild(dojo.clone(node));
30                                }
31                        });
32
33                        dojo.parser.parse();
34                       
35                        // programatic example:
36                        var widget = new dojox.layout.ScrollPane({
37                                orientation: "vertical",
38                                style:"width:125px; height:300px; border:2px solid #ededed"
39                        },"progExample");
40                                               
41                });
42        </script>
43        <style type="text/css">
44                @import "../../../dojo/resources/dojo.css";
45                @import "../../../dijit/tests/css/dijitTests.css";
46
47                #altStyle .dojoxScrollHelper {
48                        -moz-border-radius:3pt;
49                        background:#b7cdee;
50                        border:2px solid #333;
51                        width:3px;
52                }
53                table.fooBar td {
54                        width:50px;
55                        border-right:2px solid #000;
56                        padding:20px;
57                }
58
59                #vertList li {
60                        cursor:pointer;
61                }
62                .foo { float:left; }
63                p.special { width:800px; }
64        </style>
65
66</head>
67<body class="tundra">
68
69        <h1 class='testTitle'>dojox.layout.ScrollPane</h1>
70
71        <p>An intuitive UI for lists of data in a confined space. supports horizontal or vertical "scrolling", but not both</p>
72       
73        <h2>vertical:</h2>
74        <div style="float:left; padding-right:12px;">
75
76                <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7">
77                        <ol class="list" id="vertList">
78                                <li id="cloneMe"><a href="#"><span>testItem</span></a></li>
79                        </ol>
80                </div>
81               
82        </div>
83        <div id="altStyle" style="float:left; padding-right:12px;">
84
85                <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7">
86                        <ol class="list" id="vertList2"></ol>
87                </div>
88       
89        </div>
90
91        <br style="clear:both;">       
92
93        <h2>horizontal</h2>
94        <div dojoType="dojox.layout.ScrollPane" orientation="horizontal"  style="width:600px; height:125px; border:1px solid #b7b7b7" id="horiz">
95        <table class="fooBar">
96                <tr>
97                        <td style="padding-left:20px;">LOREM IPSUM</td>
98                        <td>LOREM IPSUM</td>
99                        <td>LOREM IPSUM</td>
100                        <td>LOREM IPSUM</td>
101                        <td>LOREM IPSUM</td>
102                        <td>LOREM IPSUM</td>
103                        <td>LOREM IPSUM</td>
104                        <td>LOREM IPSUM</td>
105                        <td>LOREM IPSUM</td>
106                        <td>LOREM IPSUM</td>
107                        <td>LOREM IPSUM</td>
108                        <td>LOREM IPSUM</td>
109                        <td>LOREM IPSUM</td>
110                        <td>LOREM IPSUM</td>
111                        <td>LOREM IPSUM</td>
112                        <td>LOREM IPSUM</td>
113                        <td>LOREM IPSUM</td>
114                        <td>LOREM IPSUM</td>
115                        <td>LOREM IPSUM</td>
116                </tr>
117        </table>
118        </div>
119
120        <h2>In a BorderContainer:</h2>
121
122        <div dojoType="dijit.layout.BorderContainer" style="width:401px; height:400px; border:1px solid #b7b7b7;">
123                <div dojoType="dojox.layout.ScrollPane" region="left" style="width:100px;">
124                        <ol class="list"></ol>
125                </div>
126                <div dojoType="dijit._Widget" region="top" style="height:15px" splitter="true">boo</div>
127                <div region="center" dojoType="dijit.layout.ContentPane">
128                        <p>Foo! Seems you need explicit height on ScrollPane's in a BorderContainer. 100% seems to suffice.</p>
129                </div>
130                <!--div region="top" dojoType="dojox.layout.ScrollPane" orientation="horiztonal" style="height:75px;">
131                        <table class="fooBar">
132                                <tr>
133                                        <td style="padding-left:20px;">LOREM IPSUM</td>
134                                        <td>LOREM IPSUM</td>
135                                        <td>LOREM IPSUM</td>
136                                        <td>LOREM IPSUM</td>
137                                        <td>LOREM IPSUM</td>
138                                        <td>LOREM IPSUM</td>
139                                        <td>LOREM IPSUM</td>
140                                        <td>LOREM IPSUM</td>
141                                        <td>LOREM IPSUM</td>
142                                        <td>LOREM IPSUM</td>
143                                        <td>LOREM IPSUM</td>
144                                        <td>LOREM IPSUM</td>
145                                        <td>LOREM IPSUM</td>
146                                        <td>LOREM IPSUM</td>
147                                        <td>LOREM IPSUM</td>
148                                        <td>LOREM IPSUM</td>
149                                        <td>LOREM IPSUM</td>
150                                        <td>LOREM IPSUM</td>
151                                        <td>LOREM IPSUM</td>
152                                </tr>
153                        </table>
154                </div-->
155                <div dojoType="dojox.layout.ScrollPane" region="right" splitter="true" style="width:100px;">
156                        <ol class="list"></ol>
157                </div>
158        </div>
159
160        <h2>Programatically:<h2>
161       
162        <div id="progExample">
163                <ol class="list"></ol>
164        </div>
165
166        <h2>Tabs:</h2>
167       
168        <div id="tabber" dojoType="dijit.layout.TabContainer" style="height:6em; width:200px">
169                <div dojoType="dojox.layout.ScrollPane" title="tab1" orientation="horizontal">
170                        <p class='special'>Lorem, ipsum Dolor
171                                Lorem, ipsum Dolor
172                                Lorem, ipsum Dolor
173                                Lorem, ipsum Dolor
174                                Lorem, ipsum Dolor     
175                        </p>
176                </div>
177                <div dojoType="dojox.layout.ScrollPane" title="tab2" orientation="horizontal">
178                        <p class='special'>Lorem, ipsum Dolor
179                                Lorem, ipsum Dolor
180                                Lorem, ipsum Dolor
181                                Lorem, ipsum Dolor
182                                Lorem, ipsum Dolor
183                                Lorem, ipsum Dolor
184                        </p>
185                </div>
186        </div>
187        <div dojoType="dojox.layout.ScrollPane" style="width:600px; height:125px; border:1px solid #b7b7b7" id="noscroll">
188                not enough content to make it scroll
189        </div>
190</body>
191</html>
Note: See TracBrowser for help on using the repository browser.