| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<marquee
behavior="alternate"
direction="right">
<xp:repeat
value="#{viewDocuments}"
var="thisDocument"
disableOutputTag="true">
<xp:text
style="display: inline-block; width: 150px; border: 1px solid #999; padding: 4px; margin-right: 4px;"
value="#{thisDocument.title}" />
</xp:repeat>
</marquee>
Pretty useless really.. let's try something from the Dojo library.
<xp:div
dojoType="dojox.widget.Rotator"
style="height: 100px; border: 1px solid #999; overflow: hidden;">
<xp:this.dojoAttributes>
<xp:dojoAttribute
name="transition"
value="dojox.widget.rotator.slide">
</xp:dojoAttribute>
<xp:dojoAttribute
name="continuous"
value="true">
</xp:dojoAttribute>
<xp:dojoAttribute
name="quick"
value="true">
</xp:dojoAttribute>
<xp:dojoAttribute
name="duration"
value="500">
</xp:dojoAttribute>
<xp:dojoAttribute
name="data-dojo-id"
value="carousel">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
<xp:repeat
value="#{viewDocuments}"
var="thisDocument"
disableOutputTag="true">
<xp:text
tagName="div"
styleClass="pane"
value="#{thisDocument.title}" />
</xp:repeat>
</xp:div>
<xp:button
id="button1"
value="Previous">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[carousel.prev();]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button
value="Next"
id="button2">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[carousel.next();]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Much better! This at least gives me some options... But let's try another Dojo library control I stumbled onto.
<xp:div
id="carouselAuto"
dojoType="dojox.widget.AutoRotator"
style="height: 100px; border: 1px solid #999; overflow: hidden;">
<xp:this.dojoAttributes>
<xp:dojoAttribute
name="transition"
value="dojox.widget.rotator.slide">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
<xp:repeat
value="#{viewDocuments}"
var="thisDocument"
disableOutputTag="true">
<xp:text
tagName="div"
styleClass="pane"
value="#{thisDocument.title}" />
</xp:repeat>
</xp:div>
<xp:button
id="button3"
value="Previous">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dojo.publish('#{id:carouselAuto}/rotator/control', ['prev'])]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button
value="Next"
id="button4">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dojo.publish('#{id:carouselAuto}/rotator/control', ['next'])]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Wow - I really like this version! This thing SCREAMS "carousel"... and looking at the configuration-friendly properties of the dojox.widget.AutoRotator, it also screams "Custom Control"!