dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
226 lines (196 loc) • 6 kB
HTML
<html>
<head>
<style type="text/css">
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing the Roller / Slider / Exploder</title>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
<script type="text/javascript" src="../Roller.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.data.GoogleFeedStore");
var request;
var makeDojoDataExample = function(){
// an entirely programatic one, from a DataStore. First make the store:
var store = new dojox.data.GoogleFeedStore();
// then the widget
var roller = new dojox.widget.Roller({
autoStart: false,
delay: 6000
});
// and put it in the dom somewhere
dojo.byId("wrapper").appendChild(roller.domNode);
var insertItem = function(item){
// for each feed result, make a simple link, then add it to the widget
var htmlPiece = "<div class='exTitle'>" +
"<p><a href='" + item.link + "'>" + item.title + "</a></p>" + //" - <span class='exAuthor'>by: " + item.author + "</span></p>" +
"<div class='exSummary'>" + item.summary + "" +
"</div></div>";
roller.items.push(htmlPiece);
}
var sourceIdx = 0,
sources = [
"http://twitter.com/statuses/user_timeline/14572071.rss",
"http://dojocampus.org/content/category/dojo-cookies/feed/",
"http://www.dojotoolkit.org/aggregator/rss"
]
;
var source = function(){ return sources[sourceIdx++]; }
var start = 0;
// send off a store request
request = {
query: {
// we'll get the campus cookie feed
url: source(),
count: 10,
start: start
},
onItem: insertItem,
onComplete: function(){
// once we have das data, start it up
console.log('oncomplete fired');
var s = source();
if(s){
request.query.url = s + "";
setTimeout(dojo.hitch(store, "fetch", request), 5000);
}
// make sure she's running:
roller.start();
},
onError: function(e){
// stub for debugging:
console.warn(e);
}
};
store.fetch(request);
}
dojo.addOnLoad(function(){
var dasroller = new dojox.widget.Roller({ delay: 3000 }, "dasroller");
dojo.connect(dasroller.domNode, "onmouseenter", dasroller, "stop");
dojo.connect(dasroller.domNode, "onmouseleave", dasroller, "start");
var items = ["one","two","three","four","five"];
new dojox.widget.Roller({ delay: 1000, items: items }, "roller2");
new dojox.widget.RollerSlide({ delay: 2000, items: items }, "rollerslide");
// programatic google-store fed roller:
makeDojoDataExample();
})
</script>
<style type="text/css">
body {
font-family: Arial;
}
.dojoxRoller {
list-style:none;
margin:0; padding:7px;
}
.dj_ie6 ul.dojoxRoller li {
float:left;
}
div ul.dojoxRoller li {
padding:4px;
text-align:center;
}
#wrapper .dojoxRoller {
padding:0; margin:0;
}
#wrapper .exSummary,
#wrapper .exAuthor {
font-size:10pt;
padding:6px;
}
#wrapper p {
padding:4px;
margin-top:4px;
}
</style>
</head>
<body>
<h1 class="testTitle">dojox.widget.Roller</h1>
<div id="googleStore">
<h2>Powered by dojo.data (by way of <a href="http://google.com">google</a>):</h2>
<div id="wrapper" style="border:2px dashed #666; background:#dedede; width:500px; height:120px; overflow:hidden;"></div>
</div>
<h2>A Simple UL: (progressive)</h2>
<p>start/stop onhover</p>
<div id="ex1" style="background:#ededed; width:175px;">
<ul id="dasroller">
<li>First Item</li>
<li>Second Item</li>
<li>items added 1</li>
<li>items added 2</li>
<li>items added 3</li>
<li>items added 4</li>
<li>items added 5</li>
<li>items added 6</li>
<li>items added 7</li>
<li>items added 8</li>
<li>items added 9</li>
<li>items added 0</li>
</ul>
</div>
<h2>An empty UL, programatic from Array</h2>
<div style="background:#ededed; width:175px;">
<ul id="roller2"></ul>
</div>
<h2>An empty UL, programatic Slider from Array</h2>
<div style="background:#ededed; width:175px; height:42px">
<ul id="rollerslide"></ul>
</div>
<h2>and a dojoType one</h2>
<div style="background:#ededed; width:375px;">
<ul id="foo" dojoType="dojox.widget.Roller" delay="5000">
<li>Today's episode of random widget</li>
<li>brought to you by <a href="http://dojotoolkit.org">Dojo</a></li>
<li>(really just testing simple markup)</li>
<li>enjoy.</li>
<li> <!-- left blank for fake delay --></li>
<li>wow that was 10 seconds</li>
</ul>
</div>
<h2>One with embedded LI's</h2>
<div>
<ul id="embedded" dojoType="dojox.widget.Roller">
<li>one: <ul><li>inner</li><li>inner</li></ul></li>
<li>one: <ul><li>inner</li><li>inner</li></ul></li>
<li>one: <ul><li>inner</li><li>inner</li></ul></li>
</ul>
</div>
<h2>Customer RollerHover</h2>
<div>
<ul id="customType">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
<script type="text/javascript">
dojo.addOnLoad(function(){
// taking advantage of the _RollerHover mixin:
dojo.declare("a.custom.Roller", [dojox.widget.RollerSlide, dojox.widget._RollerHover], {});
new a.custom.Roller({}, "customType");
});
</script>
<!-- disabled because of styling mishaps :)
<h2>programatic Exploder:</h2>
<div id="ex1" style="background:#ededed; width:175px;">
<ul id="exploder">
<li>First Item</li>
<li>Second Item</li>
<li>items added 1</li>
<li>items added 2</li>
<li>items added 3</li>
<li>items added 4</li>
<li>items added 5</li>
<li>items added 6</li>
<li>items added 7</li>
<li>items added 8</li>
<li>items added 9</li>
<li>items added 0</li>
</ul>
</div>
-->
</body>
</html>