IMHO the greatest thing in JQuery is the possibility to add plugins (pretty obvious uh?). There are tons of open source plugins out there (http://plugins.jquery.com/) , I just have to look for the right one!
In this pill : I will add a droppable object and I will animate the menu to allow only one group to be visible at once.
Well, the HTML in this case is pretty simple! It’s just a div…
<div id="dropArea" class="drop">
</div>
All the work is carried out by JQuery.
Again, I will point to this object selecting it by style class, and then I’ll define the droppable behavior. In fact, the code has already been written in the previous post but let’s refresh it:
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: dropAction
});
function dropAction(ev, ui) {
var lid = $(ui.draggable).clone();
$(lid).addClass('block_dropped');
var removeLink = document.createElement("img");
$(removeLink).attr("src", "img/delete_icon.png");
$(removeLink).attr('title', 'remove');
$(removeLink).css('cursor', 'pointer');
removeLink.onclick = function() {
$(this).parent().remove();
}
$(lid).prepend(removeLink);
$(this).append(lid);
}
in the “ready” event of document, the selector $(“.drop”) gets my droppable area (the div), and adds to it the droppable plugin. This is part of the jquery-ui standard package. What happens when the code is executed is that, whenever a draggable object (that has the block style class) is dropped on my div, the function dropAction is triggered (I really hate this text editor!).
Now I want to animate my toolbox. Again, JQuery will to all the job.
function prepareToolbox() {
$("#accordion div[name*='menuItem']").css('display', 'none');
$("#accordion div:first").show('fast');
$("#accordion h3").click(function() {
if ($(this).next().css('display') == 'none') {
$("#accordion div[name*='menuItem']").hide('fast');
$(this).next().show('fast');
}
});
}
Line 1 : selects all the div, children of accordion, where the attribute name contains menuItem, and manipulate their visibility.
Line 2 : gets the first child div of accordion and shows it, making the animation fast!
Line 3 : defines the event handler to hide/show menuItems when the user clicks the header.
This function has to be called in the body of the ready event for the page.
There’s a widget called accordion in the standard jquery-ui library, but unfortunately it’s not working well when I have to drag objects from there.
Have a look at: http://www.jqueryui.com/
In the next pill: I’ll add a button that creates droppable elements that will be placed in a wider area.
