jQuery Embedded in Dojo Accordion Panes
The Dojo Toolkit is an Open source JavaScript toolkit which can be used to
develop stunning web pages. I liked it from the very beginning. It is very
fast and provides lots of tools to work with DOM, Animations, AJAX etc. The
base code is lightweight (~26 KB). jQuery, even lighter, also Open Source, is
the write-less, do-more, cross-browser, CSS3 compliant JavaScript library. In
this article by Dr. Jayaram Krishnaswamy, we will experiment
embedding jQuery in DOJO 123’s Accordion widget and try to identify if there
exists any cross-code interactions. The code is also tested for cross-browser
suitability.
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 [DOJO123]
<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
 |
Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
http://www.packtpub.com/user-interface-library-for-jquery/book |
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
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
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
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.
|
Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library
http://www.packtpub.com/user-interface-library-for-jquery/book |
Leave a Reply