jQuery Embedded in Dojo Accordion Panes

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library

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 UI 1.6: The User Interface Library for jQuery

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 UI 1.6: The User Interface Library for jQuery

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

jQuery UI 1.6: The User Interface Library for jQuery

jQuery code embedded in the Dojo accordion panes

In order to test if there are any interactions that may arise out of jquery code being placed inside a Dojo object, the two API codes from jQuery were inserted into the panes as shown in the following code. Some slight alterations were also made to the title with some styling applied as shown in the style tags.

Listing 4: jquery code embedded in Dojo Accordion panes jQueryInAccordion.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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: 300px; overflow: scroll">
<!-- Pane 1 Content -->
<div dojoType="dijit.layout.AccordionPane" selected="true" title="Hodentek"
style="color:red;overflow: scroll; background-color:#FFFF80;">
<p ><a href="http://hodentek.blogspot.com">My Blog</a></p >
</div>

<!-- Pane 2 Content -->
<div dojoType="dijit.layout.AccordionPane" title="JQuery:Selector"
style="overflow: scroll;background-color:#FFFF80;">
<!--jquery:Selector goes here-->
<script language="JavaScript" src="http://localhost/JayQuery/jquery-1.3.min.js">
</script>
<h1>Jquery inside a DOJO Accordion Pane</h1>
<script language="JavaScript">
$(document).ready(function(){
$("h1").css("color", "green");
});
</script>
<!--end jquery-->

</div>

div dojoType="dijit.layout.AccordionPane" title="JQUERY:Slideup() effect"
style="color:magenta;overflow: scroll; background-color:#FFFF80;">

<!--jquery:effect goes here-->
<p style="width:300; height:300; background-color:palegreen;
color:darkgreen;">Test</p>
<script type="text/JavaScript">
$("p").click(function () {
$(this).slideUp();
});
</script>

<!--end jquery-->
</div>
</div>
</body>
</html>

Figure 4 shows the rendering of the above page in Opera browser. Except for Google Chrome all other browsers rendered this page the same way and the accordion panes behaved the same way. The sensitive area when clicked slid up even in Google Chrome although the panes themselves were rendered flat (all panes displayed in the open position, Figure 6).

Figure 4

jQuery UI 1.6: The User Interface Library for jQuery

When the third pane was clicked, the slideUp() effect was active in all browsers as shown in Figure 5 including the Google Chrome (although the accordion was poorly rendered, see Figure 6).

Figure 5

jQuery UI 1.6: The User Interface Library for jQuery

This was a surprise as a (300 x 300) area expected [seen earlier] in the JQUERY:Slideup() pane failed to render. The sensitive area had shrunk to the size shown in Figure 5. The reasons (guess at this point) for this could be in how CSS that gets prioritized (cascaded!!!), Dojo Toolkit or jQuery. However, if you were to put up a p selector styling in the <head/> of the HTML page the full area gets rendered.

Figure 6: Page rendering in Google Chrome 1.0.154.43

jQuery UI 1.6: The User Interface Library for jQuery

Summary

The article described the result of embedding jQuery code in a HTML page with an accordion using the Dojo Toolkit 123. For the simple code used, jQuery and Dojo 123 displayed similarly in all tested browsers. The Accordion was however rendered poorly in Google Chrome. Also using the http://o.aolcdn.com/dojo/1.2.3/dojo/dojo.xd.js instead of the ..dojo/1.0.0 file all browsers including Google Chrome rendered the page correctly but the pane with the slideUp() did not change.

Books to Consider

comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free