Basic DOJO 123 accordion
In my earlier article I had used the version of the Toolkit which had the accordion in the Widgets. In the latest version which I am using, the accordion is found in digit/layout. The code is similar to that in the earlier article. Basically you create a accordion container and then place the accordion panes inside the container. In referencing the Dojo library I am using part of the references from the Dojo Toolkit 123 installed on my local IIS and part of the reference from the AOL site (uses the 1.0.0 script).
Listing 1: AccordionOrig.htm: A basic accordion with three panes [DOJO 123]
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Accordion Pane with jQueries</title> <style type="text/css"> @import "http://localhost/Dojo123/dojo123/dijit/themes/tundra/tundra.css"; @import "http://localhost/Dojo123/dojo123/dojo/resources/dojo.css" </style>
<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js”
djConfig=”parseOnLoad: true”></script>
<script type=”text/javascript”>
dojo.require(“dojo.parser”);
dojo.require(“dijit.layout.AccordionContainer”);
</script>
</head>
<body class=”tundra”>
<div dojoType=”dijit.layout.AccordionContainer” duration=”200″
style=”margin-right: 30px; width: 400px; height: 400px; overflow: scroll”>
<!–Pane 1 –>
<div dojoType=”dijit.layout.AccordionPane” selected=”true” title=”Page 1″
style=”color:red;overflow: scroll; background-color:#FFFF80;”>
<!–Pane 1 content–>
<p >Test 1</a></p >
</div>
<!–Pane 2 –>
<div dojoType=”dijit.layout.AccordionPane” title=”Page 2″
style=”overflow: scroll;background-color:#FFFF80;”>
<!–Pane 2 content–>
<p >Test 2</p >
</div>
<!– Pane 3–>
<div dojoType=”dijit.layout.AccordionPane” title=”Page 3″
style=”color:magenta;overflow: scroll;background-color:#FFFF80;”>
<!–Pane 3 content–>
<p >Test 3</a></p >
</div>
</div>
</body>
</html>
This page when browsed to, will display the accordion as shown in Figure 1. This was cross-browser compatible in the following browsers: IE 6.0, Opera 9.1, Firefox 3.0.5, and Safari 3.2.1. The page did not render correctly (all panes completely open) in Google Chrome 1.0.154.43.
Figure 1
jQuery API Components used in the article
jQuery 1.3 downloaded from this site is used as a source for the script. From the API reference only two simple components were chosen to be embedded in the panes – the Selector and the Effects. The slideUp() effect where in, when you click on the code sensitive area the region of the area on the web page slides up.
H1 Selector styled using jQuery
Using jQuery you can selectively apply style to tags, ids, etc. In the example shown in the code that follows the H1 tag is styled using jQuery.
Listing 2: H1SelectorJQry.htm: Tag styling with jQuery
<html>
<head></head>
<body>
<script language="JavaScript"
src="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<script type="text/JavaScript">
$(document).ready(function(){
$("h1").css("color", "magenta");});
</script>
</body>
<html>
In the above, the jQuery code (inside the script tags) renders the h1 tag in the color shown as in Figure 2.
Figure 2
jQuery Effect: slideUp()
The htm page with the listing 3 when browsed to, displays a pale green 300 x 300 square corresponding to the styling of the p tag as shown in Figure 4. When clicked anywhere inside this square, the square slides up and disappears. This is the slideUp() effect.
Listing 3: p_slideUp.htm: Jquery Effect
<html> <head></head> <body> <script language="JavaScript" src="http://localhost/JayQuery/jquery-1.3.min.js"> </script>
<div><p style=”width:300; height:300;
background-color:palegreen; color:darkgreen;”>Test</p></div>
<script type=”text/JavaScript”>
$(“p”).click(function () {
$(this).slideUp();
});
</script>
</body>
<html>
This page gets displayed as shown in Figure 3. When you click anywhere in the pale green area the “P” region slides up.
Figure 3
