Duration: 18 minutes
Summary: In this video, we continue our discussion of jQuery UI. In the
previous video, I showed you how to download jQuery UI and set the scripts
properly to get your functionality to work. Here we are continuing our
discussion of tabs. Normally when you are learning about a jQuery UI widget,
there are three items you need to learn: options, events, and methods. I will
go over every one of them and show you the syntax needed. There are many
options you can change for a tab. For example: disabled, collapsible, event,
and fx. For the methods and events, I will show you examples for create,
select, ad remove.
of the development of example: Good coding standard
and simplified design to illustrate the key points.
Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, function, tab, disabled,
collapsible, event, fx, alert, create, select.
Transcript: Welcome back, everyone. This is Ayad Boudiab. I am a Senior .Net
Application Developer, and we are continuing our course on jQuery UI. In
the previous video, we went through the steps. I started by an example of
loading a tab, and then I went backwards to explain to you what we need in
order to get jQuery UI working with our files, our projects, or what have
you. In that video, I explained to you what I need as far as the scripts,
for example, the jQuery and the jQuery UI, and I also showed you why we
need the CSS and how we can build CSS from the jQuery UI website using the
ThemeRoller, and I loaded a tab.
So up to that point, I called the dollar sign pound in here to get the
specific element named Tabs, which is down here, and then I called tabs
functionality on it. Now, if you scroll down here, you will notice that I
have a div with ID tabs, unordered lists, and every one of those list items
is referencing the div underneath. By simply having this, I can load that,
and now I have a tab using the theme that I chose, and I can switch between
the tabs on my screen.
Now let's take that a step further and discuss more details about the tabs.
What functionality do tabs provide for me? After all, there must be some
options to allow me to turn things on and off. There must be some events
that could be triggered, for example, when the tab is created or when a
specific tab is selected. Also, what methods I can call, for example, can I
remove a tab? So these functionalities are provided to us, and you can find
them all in the jQuery UI documentation, but they are provided to us, and
we will go through them in this video and see how we can work with them.
So let's scroll up here for a second and let's look at the tabs. Now there
are some options that I can provide to the tab functionality. Those options
are provided within curly braces. So I create open and close curly braces,
and I provide options to the tabs. For example, by default, the tab is
enabled. Of course, I was able to click on the tabs and go through them
like I showed you earlier. But I have an option of disabling a tab. So
let's see what we can do here. Disable, true. I made the tabs disabled.
Right click, view in browser. Now it is disabled. It shows me all three
tabs at once, and I cannot click on them. Nothing is happening. Although,
if you watch up here in the URL, you'll notice when I click on first, I get
class one, when I click on second, class two, and the third one, class
three. But nothing is happening, right? All the tabs are being displayed,
and I am not able to switch between them. That is because the tabs are
disabled. That's one of the options I can provide for the tabs.
What other options can I provide? I can make that tab collapsible. So I can
say something like collapsible true. Right click and view in browser. I can
switch through the tabs, but the tabs should be in that case collapsible.
When the tabs are loaded, you notice nothing different. I can switch
between one tab and the next. But let's say I'm clicking on the third.
Click on the third again, and again, now you see that a specific tab is
collapsible. So that's also one of the options that I can provide to the
Let's take out the option collapsible and keep it to the way it was. Right
click on it and view in browser. You'll notice that when I'm hovering over
them, I see some of the CSS is changing. But I click on second to load the
second tab, I click on third to load the third tab, and the same thing on
the first. So by clicking, I'm loading a specific tab.
Now the question is what option I can provide to make that tab show up not
by clicking on it but by hovering over it. So let's see how we can do that.
Going back to the tabs, I have the options here provided within the curly
braces, and then I can say the event that I need in this case is, and the
event name is provided through string, you can use double codes in
that I'm interested in this case is mouseover, because the mouseover event
will allow me to hover over a specific tab instead of clicking on it. So
let's right click on that and preview in the browser. You'll notice that
I'm not clicking, I'm just switching my mouse over the tabs, and they're
switching from one to the next. That's the mouseover event that gets
triggered instead of the click event to open a specific tab. So that's the
mouseover option that I can have for that specific tab.
Now, what other functionality do I have? I can add some animation for the
hiding and showing of the tab panels. Where is that available? Again, I'm
looking through the documentation that provided me all this functionality.
So I have the backup and I have to go through the documentation and figure
out what the functionality available is for a specific widget, in this case
the tab, and try to work with this functionality to see what I can do with
it. For example, one of the options is the FX option. That FX option will
help me do some animation. So let's see how that's going to happen.
Now the FX option is a little bit involved. In this case when I said to
provide the open and close curly braces, and I provide FX, now I need to
provide the options available for FX. So I have to put a colon in there,
and also do an open and close curly brace. What are the options that I have
in there? For example, I have the opacity, that's one of the options I can
have, and I need that to be toggled. So toggle the opacity. Also the
height, I want that to toggle. Also, the width, I want that to be toggled.
Then I have the FX with its options, and then I have the FX as an option
within the tabs. Let's go ahead and load that, view in browser, and you'll
notice when I click on a specific tab, how that's happening in terms of
toggling the opacity you see the opacity being toggled? And also, the width
and the height being toggled.
Now let's go back and take that a step further. For the FX in this case,
let's remove this option. For the FX, I want to provide an array of two
things - one set of features for hiding and one set of features for
showing. So I provide this within the square brackets, it's an array after
all, right? So I have one set of options, comma, another set of options.
Now, the first set of options is for hiding, and the second set of options
is for showing. So again, now I can provide my options. Go back to opacity.
I want opacity to toggle. Then I want the duration to be slow. That's for
the first set. So for the first one, which is hiding, I provided the
opacity to toggle and the duration to be slow. For the second set I also
want to provide the same set of features, little bit different in terms of
value, but in this case I will have opacity to be toggled, and then the
duration to be something like fast. That's for showing. So in this case,
then I have the opacity and the duration, one of them is to hide, one of
them is to show, with different value as far as the duration is concerned.
So now let's go ahead and preview that in the browser. It's hiding slow but
it's showing fast. When I click over the tabs, this is the animation that
is happening. That's as far as these options are concerned. Of course,
there are more options than I'm showing you here, but it's just some of the
options that you can work with.
So let me go ahead and remove this and take it back to the way it was. Now,
let me show you a couple of events and one method before we move on to the
other widgets. So in the case of events, I want to provide a specific event
that happens when we create the tabs. This is handy, by the way, you can
use the alert for example, when you're trying to test stuff. Within the
tabs, I'm providing a set of features. Since I'm providing those options, I
will have opening and closing. By the way, events are like options, so I
put the opening and closing braces, and then I will have, for example, the
create function, when the tabs are created, I want to provide the create
event. When this event happens, what do you want to do? Normally, if you're
working with options, you provide your options here. But since this is an
event that is happening, it is the creation of the tabs, you need to
provide a function. In this case, the function takes a couple parameters -
the event, and the UI, the actual event that's happening and the UI that's
been affected by the event. So in this case then, you have to write a
function. That function takes event and UI, and then you provide your
functionality for that function.
The functionality in here that I have is, for example, alert. Within alert,
I say tabs have been created. Save that and then preview in the browser,
and you'll notice that as soon as the tabs loaded was created, I get the
event tabs has been created. Now, going back here, instead of create, how
about select when the user selects a tab. For selecting the tab, it's the
same thing, I'm going to provide a function that takes an event in the UI,
and I will have an alert that says, for example, a tab has been selected.
Doing so, I can load the page and nothing happened right now. Select a tab,
you get your alert. So that's how we can work with those events. We provide
the event name and we provide the actual function. I didn't need a comma
One thing that you need to be careful about though is when you misspell
something, it just will not work. So you don't have those compiler messages
telling you that you misspelled something. You just kind of have to be
careful when you're typing the actual event names and so on.
Now, one more thing I can do that I'd like to show you with tabs is
basically how we can call a function. Let's remove this, and then I'm going
to keep my opening and closing curly braces, and inside here for the
creation, when the tab is created, I want to have a function. You've seen
that, right? And then event, and then UI, and then you need some code to
happen in this case. Now, the code that I want is to call the remove
function to remove a certain index or to remove a certain tab that is. So I
can refer to my tab and then call the remove function. In this case, then,
I still need to reference back my tabs by ID using the pound sign. That
will be the tabs. Dot tabs. Then inside of here, I can provide the name of
the function with the parameters that I'm interested in. In this case then,
I need the remove function to remove, and then say, for example, one, the
element of the tab at location one. So when I'm calling create, when the
tab's being created, I'm calling a function. That function goes back and
gets that tab, that's the tabs referenced by ID, then tabs, calling the
tabs function, providing it the name of the method that I want to call, in
this case remove, and then providing one, which is the parameter for
removing a specific tab that you want to remove. Right click, view in
browser. You will notice that this has first, third. The second tab, which
is because tabs are indexed from zero, the second tab, which is in this
case second, has been removed. When did it happen? It happened on creation
of the tab.
These are some of the functionality available to you working with tabs. I'm
going to proceed to other widgets and other functionality for jQuery UI, so
please stay tuned on upcoming videos. Thank you very much for listening,
I'm Ayad Boudiab, and you take care.