source: Dev/trunk/src/client/dojox/widget/tests/test_Roller.html

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

Added Dojo 1.9.3 release.
File size: 5.9 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4
5        <style type="text/css">
6                @import "../../../dijit/tests/css/dijitTests.css";
7        </style>
8
9        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10        <title>Testing the Roller / Slider / Exploder</title>
11       
12        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
13        <script type="text/javascript" src="../Roller.js"></script>
14        <script type="text/javascript">
15        dojo.require("dojo.parser");
16        dojo.require("dojox.data.GoogleFeedStore");
17       
18        var request;
19        var makeDojoDataExample = function(){
20
21                // an entirely programatic one, from a DataStore. First make the store:
22                var store = new dojox.data.GoogleFeedStore();
23                // then the widget
24                var roller = new dojox.widget.Roller({
25                        autoStart: false,
26                        delay: 6000
27                });
28                // and put it in the dom somewhere
29                dojo.byId("wrapper").appendChild(roller.domNode);
30                               
31                var insertItem = function(item){
32                        // for each feed result, make a simple link, then add it to the widget
33                        var htmlPiece = "<div class='exTitle'>" +
34                                "<p><a href='" + item.link + "'>" + item.title + "</a></p>" + //" - <span class='exAuthor'>by: " + item.author + "</span></p>" +
35                                "<div class='exSummary'>" + item.summary + "" +
36                                "</div></div>";
37                               
38                        roller.items.push(htmlPiece);
39                }
40
41                var sourceIdx = 0,
42                        sources = [
43                                "http://twitter.com/statuses/user_timeline/14572071.rss",
44                                "http://dojocampus.org/content/category/dojo-cookies/feed/",
45                                "http://www.dojotoolkit.org/aggregator/rss"
46                        ]
47                ;
48                var source = function(){ return sources[sourceIdx++]; }
49               
50                var start = 0;
51                // send off a store request
52                request = {
53                        query: {
54                                // we'll get the campus cookie feed
55                                url: source(),
56                                count: 10,
57                                start: start
58                        },
59                        onItem: insertItem,
60                        onComplete: function(){
61                                // once we have das data, start it up
62                                console.log('oncomplete fired');
63                               
64                                var s = source();
65                                if(s){
66                                        request.query.url = s + "";
67                                        setTimeout(dojo.hitch(store, "fetch", request), 5000);
68                                }
69                               
70                                // make sure she's running:
71                                roller.start();
72                               
73                        },
74                        onError: function(e){
75                                // stub for debugging:
76                                console.warn(e);
77                        }                       
78                };
79                store.fetch(request);
80
81        }
82       
83        dojo.addOnLoad(function(){
84               
85                var dasroller = new dojox.widget.Roller({ delay: 3000 }, "dasroller");
86                dojo.connect(dasroller.domNode, "onmouseenter", dasroller, "stop");
87                dojo.connect(dasroller.domNode, "onmouseleave", dasroller, "start");
88               
89                var items = ["one","two","three","four","five"];
90                new dojox.widget.Roller({ delay: 1000, items: items }, "roller2");
91                new dojox.widget.RollerSlide({ delay: 2000, items: items }, "rollerslide");
92               
93                // programatic google-store fed roller:
94                makeDojoDataExample();
95               
96        })
97        </script>
98       
99        <style type="text/css">
100                body {
101                        font-family: Arial;
102                }
103                .dojoxRoller {
104                        list-style:none;
105                        margin:0; padding:7px;
106                }
107                .dj_ie6 ul.dojoxRoller li {
108                        float:left;
109                }
110                div ul.dojoxRoller li {
111                        padding:4px;
112                        text-align:center;
113                }
114                #wrapper .dojoxRoller {
115                        padding:0; margin:0;
116                }
117                #wrapper .exSummary,
118                #wrapper .exAuthor {
119                        font-size:10pt;
120                        padding:6px;
121                }
122                #wrapper p {
123                        padding:4px;
124                        margin-top:4px;
125                }
126        </style>
127</head>
128<body>
129               
130        <h1 class="testTitle">dojox.widget.Roller</h1>
131       
132        <div id="googleStore">
133                <h2>Powered by dojo.data (by way of <a href="http://google.com">google</a>):</h2>
134                <div id="wrapper" style="border:2px dashed #666; background:#dedede; width:500px; height:120px; overflow:hidden;"></div>
135        </div>
136
137        <h2>A Simple UL: (progressive)</h2>
138        <p>start/stop onhover</p>
139        <div id="ex1" style="background:#ededed; width:175px;">
140                <ul id="dasroller">
141                        <li>First Item</li>                     
142                        <li>Second Item</li>
143                        <li>items added 1</li>
144                        <li>items added 2</li>
145                        <li>items added 3</li>
146                        <li>items added 4</li>
147                        <li>items added 5</li>
148                        <li>items added 6</li>
149                        <li>items added 7</li>
150                        <li>items added 8</li>
151                        <li>items added 9</li>
152                        <li>items added 0</li>
153                </ul>
154        </div>
155
156        <h2>An empty UL, programatic from Array</h2>
157        <div style="background:#ededed; width:175px;">
158                <ul id="roller2"></ul>
159        </div>
160
161        <h2>An empty UL, programatic Slider from Array</h2>
162        <div style="background:#ededed; width:175px; height:42px">
163                <ul id="rollerslide"></ul>
164        </div>
165       
166        <h2>and a dojoType one</h2>
167        <div style="background:#ededed; width:375px;">
168                <ul id="foo" dojoType="dojox.widget.Roller" delay="5000">
169                        <li>Today's episode of random widget</li>
170                        <li>brought to you by <a href="http://dojotoolkit.org">Dojo</a></li>
171                        <li>(really just testing simple markup)</li>
172                        <li>enjoy.</li>
173                        <li>&nbsp; <!-- left blank for fake delay --></li>
174                        <li>wow that was 10 seconds</li>
175                </ul>
176        </div>
177
178        <h2>One with embedded LI's</h2>
179        <div>
180                <ul id="embedded" dojoType="dojox.widget.Roller">
181                        <li>one: <ul><li>inner</li><li>inner</li></ul></li>
182                        <li>one: <ul><li>inner</li><li>inner</li></ul></li>
183                        <li>one: <ul><li>inner</li><li>inner</li></ul></li>
184                </ul>
185        </div>
186       
187        <h2>Customer RollerHover</h2>
188        <div>
189                <ul id="customType">
190                        <li>test 1</li>
191                        <li>test 2</li>
192                        <li>test 3</li>
193                        <li>test 4</li>
194                </ul>
195        </div>
196
197        <script type="text/javascript">
198                dojo.addOnLoad(function(){
199                        // taking advantage of the _RollerHover mixin:
200                        dojo.declare("a.custom.Roller", [dojox.widget.RollerSlide, dojox.widget._RollerHover], {});
201                        new a.custom.Roller({}, "customType");
202                });
203        </script>
204       
205        <!-- disabled because of styling mishaps :)
206        <h2>programatic Exploder:</h2>
207        <div id="ex1" style="background:#ededed; width:175px;">
208                <ul id="exploder">
209                        <li>First Item</li>
210                        <li>Second Item</li>
211                        <li>items added 1</li>
212                        <li>items added 2</li>
213                        <li>items added 3</li>
214                        <li>items added 4</li>
215                        <li>items added 5</li>
216                        <li>items added 6</li>
217                        <li>items added 7</li>
218                        <li>items added 8</li>
219                        <li>items added 9</li>
220                        <li>items added 0</li>
221                </ul>
222        </div>
223        -->
224
225</body>
226</html>
Note: See TracBrowser for help on using the repository browser.