Does this thing actually work? Here's a unit test page to find out. We
simply added some src="image.png" attribs to the AccordionContainer
children in Dijit's AccordionContainer test page.
You will need to add your own image.png to dojoc/widgets/images, or change the path.
Here there are three 3 simple
ImageAccordion's all 200px x 26px.
Add in some basic CSS for the classes we changed, and voila:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojoc.widget.ImageAccordion Test
</title>
<style type="text/css">
/* several CSS files you probably want: */
@import "dojo/dojo/resources/dojo.css";
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/dijit/themes/dijit.css";
/* this one is just for Dojo tests, but we'll use it in
hopes they will accept our code */
@import "dojo/dijit/tests/css/dijitTests.css";
.dojocImageAccordion .dojocImageAccordionBody {
background: #fff; margin:0; padding:0;
}
.dojocImageAccordion { border-right:1px solid #ededed; }
.dojocImageAccordionTitle { cursor:pointer; }
p { padding:2px; margin-top:2px; }
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js"
djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
// Comment this out to use the Declarative Version
dojo.require("dojoc.widget.ImageAccordion");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
<div><!-- The Declarative version goes here. --></div>
<h1>dojoc.widget.ImageAccordion
</h1>
It's poorly named, I know. An "ImageAccordion" would be an
AccordionContainer of "ImagePane"'s (but one does not exist).
This is an example of an AccordionContainer, with Images
exclusively as their Titles, named "dojoc.widget.ImageAccordion".
<div dojoType="dijit.layout.AccordionContainer" duration="300"
style="width:200px; height:400px; background:#fff; ">
<div dojoType="dojoc.widget.ImageAccordion" title="Node 1"
selected="selected" src="images/title1.png">
Hello World
</div>
<div dojoType="dojoc.widget.ImageAccordion" title="Node 2"
src="images/title2.png">
Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
quam.
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</div>
<div dojoType="dojoc.widget.ImageAccordion" title="Third Pane"
src="images/title3.png">
The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
</div>
<!-- filler text to show HTML-after -->
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</body>