Hi, I'm having a really hard time understanding Dojo and how to use the wipeIn/Out effects. I've created some jQuery code to do exactly what I want but cannot seem to figure out how to convert it to Dojo. Can anyone help me with this?
$(document).ready(function(){
$('.main_navigation ul li:has(ul)').hoverIntent({
over: function () { $(this).find("ul:first").slideDown('normal'); },
out: function () { $(this).find("ul:first").slideUp('normal'); },
timeout: 500
});
});
$('.main_navigation ul li:has(ul)').hoverIntent({
over: function () { $(this).find("ul:first").slideDown('normal'); },
out: function () { $(this).find("ul:first").slideUp('normal'); },
timeout: 500
});
});
jQuery to dojo conversion
i've never used jQuery but after some googling, the following page is a quick and dirty conversion to dojo - you should be able to copy and paste this between some html tags and have a working page.
<title>Dojo Toolkit Test Page</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.2/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src='http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js'
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require('dojo.fx');
dojo.require("dojo.NodeList-fx");
dojo.addOnLoad(function(){
// first, wipeOut the nodes quickly
// if i could figure out what state they need to be in to start with
// then you could just style them with css but using wipeOut should
// work across all browsers and then continue to work with wipeIn
dojo.query('.subMenu').wipeOut({duration:2}).play();
dojo.query('.main_navigation ul li:has(ul)')
.connect('onmouseenter', function(){dojo.query('ul:first', this).wipeIn().play();})
.connect('onmouseleave', function(){dojo.query('ul:first', this).wipeOut().play();});
})
/*
$(document).ready(function(){
$('.main_navigation ul li:has(ul)').hoverIntent({
over: function () { $(this).find("ul:first").slideDown('normal'); },
out: function () { $(this).find("ul:first").slideUp('normal'); },
timeout: 500
});
});
*/
</script>
</head>
<body class="tundra">
<div class='main_navigation'>
<ul>
<li>list item 1
<ul class='subMenu'>
<li>item 1 - sub 1</li>
<li>item 1 - sub 2</li>
<li>item 1 - sub 3</li>
</ul>
</li>
<li>list item 2
<ul class='subMenu'>
<li>item 2 - sub 1</li>
<li>item 2 - sub 2</li>
</ul>
</li>
<li>list item 3 - no ul</li>
</ul>
</div>
</body>
also, here's a quick explanation of my best understanding of the translation:
// is comparable to
$(document).ready(function(){
// is comparable to
$
refer to http://dojocampus.org/content/2008/03/13/creating-your-own/ for a more thorough comparison
as far as i know, dojo doesn't have an equivalent to the hoverIntent plugin so the nearest equivalent is to connect to the onmouseover and onmouseout events. you can pass parameters to wipeIn and wipeOut if you don't like the default behaviour. refer to http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.fx to see what kind of args you can pass - although, in this instance we are actually using wipeIn and wipeOut from http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.NodeList