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.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology 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 tabs.
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, 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 here.
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.