jQuery Tutorial - 32 - Double click Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in the last video we looked at the
jQuery click event handler however in
this tutorial we're going to look at the
double click event handler now this is
going to be triggered when an element is
clicked twice with the mouse as you
would normally double click on for
example an icon on your desktop now the
reason I am talking about double click
is if you were to create a jQuery
website that had for example icons that
you might want to double click on for
example a simulation of a desktop
environment or something
you might want to use the double click
functionality you might also want to
create say an image and say double click
on the image to edit it or open it up or
retrieve some more information there's a
variety of applications this can have
however I'm going to be demonstrating it
in this tutorial with a link so the
first thing we're going to do is we look
at the script we've included first of
all and we've included obviously jQuery
and then we've included this click j/s
file as well and this is here and it
currently has nothing in it so let's go
ahead and create a link I'm going to
call this menu and the href is going to
be hash and the ID is going to be menu
so essentially what I want to happen is
when the user double clicks on this link
I want a div to appear with some more
menu options so let's go ahead and
create a div and I'm going to give this
an ID of let's just say menu link for
this one I've changed the name to menu
underscore link and the ID here is going
to be menu so inside of here what we can
do is create a few more options and
obviously this can be tiered so if the
user was to for example click on the
menu double click on the menu they might
have then a list of other options that
they can also double click on and you
can add all these event handlers to
click
yes so this is going to be for example
programs and settings and log off so we
have all of these menu options inside a
div now I'm going to again use inline
styling which I don't recommend but I
don't really have the time to go ahead
and create a style sheet so I'm going to
give this style of display:none so this
menu will be hidden basically okay so
let's go ahead and just start this a bit
better we're going to use breaks after
each link and now this should display
just the menu link on the page so now we
have the menu link when we click it
obviously nothing happens we're going to
have jQuery handle this for us so we've
got the clicked at Jas file included so
now what we can do is use this to
reference the double click of the menu
link and then to display this menu so
let's go over to click j/s and start
writing the jQuery code so we're going
to use a dollar dollar sign and inside
of some brackets the menu the link
element we're then going to say instead
of dot click we're going to say dot dbl
click and then in bracket again we need
to include a function that allows us to
run a block of code based on this event
so function we create out block and a
function as we usually would define it
but we bring this down so we can start
writing our code in here so now once
this menu link has been double clicked
we want to display the rest of this menu
so the div is called menu so we can
reference that with hash menu so we use
our dollar sign and inside hash menu dot
show or we could use another animation
effect but we're going to be looking at
them a bit later on in the series so
essentially now when we double click on
this link the menu should show so let's
go ahead to our browser and refresh
click on it nothing happens if I
double-click on it you can see that the
menu has been displayed ok so hopefully
now you can start to see the
functionality behind this and why you
might have to use it or my what may want
to use it in a more I guess operating
system like web application because
jQuery is really powerful in this way
you could essentially create something
that was a bit more you know app had a
more application feel to it rather than
a web page so the double-click function
can be extremely useful when you want to
show this kind of functionality