Duration: 17 minutes
Summary: In this video, we start our jQuery UI course. This course will discuss the details of working with jQuery UI, how to download the files and get you started. Then, we will talk about every widget and its functionality. I start in this video by showing you an example on how a page will look like before using jQuery UI, then how it looks after applying the jQuery tab widget. I discuss the files that need to be referenced in your page for the widgets to work properly. From that point I guide you to the jQuery UI web site where you can download the files that you need to get started. We also discuss the theme roller and how helpful it is in creating nice looking web sites.
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
I will start with a small example first and then go into the features of what we need in order to get jQuery UI working on our desktop. Let's start with a small HTML page. As you noticed on that page I have an H2 element that has a certain class associated with it, and then I have a div. Within the div, I have unordered lists and a few divs. A few things I would notice that in the unordered lists, I have three list items. Every one of them has an anchor. The HUF of this anchor, for example, in this case is class 1 refereeing to that div with ID class one. Class two, referring to the div with ID class two, and the same thing for class three. So unordered lists with list items, every one of those list items is referencing a certain div with text inside of it. That's just a simple HTML page that's part of the body, and when I right click on the page, and by the way I'm using Visual Studio 2010 here to write my pages, so when I right click and I save UM browser, I would notice that I have the HD that says tabs, three list items in unordered lists, first, second and third, and then the text that came within the div. Now that's very much it. That's what we expected to see from a HTML page like so.
Now let me make a minor modification and then preview the page, and then we'll be able to go back and see how we got there. Let me go up to the top of the page here and uncomment those three lines of code, save, and then preview the page in the browser. And, by the way, I am using Google Chrome, and you notice that I have in here tabs and then first, second and third. I can hover over them, you notice. I can switch between one tab and the next, and I can see the content within those tabs. So, I'm not talking about unordered lists anymore, and I'm not talking about a div. Now we start seeing that we're working with tabs.
So, how did we get here? How were we able to build a tab just by creating those divs and the unordered lists? Well, that's what jQuery UI will help us with. The code that I uncommented in here is part of jQuery. You'll notice in here that I have the script tag. Within the script, I have the DOM ready function, and by the way, I'm referring here to some jQuery functionality that I already discussed in a jQuery course. I think that was about a couple years ago when we had the jQuery course on Mr. Bool's webside. You can refer to those videos and learn more about jQuery, but I will introduce more features about jQuery once we're done with this jQuery UI course. If you need to learn more about the functionality that I'm referring to or some more details about how jQuery works, you can go back to those videos and you can learn more about them and then come back and continue with our jQuery UI course.
Scroll up a little bit and you notice that in here I have some scripts that are referring to some source code. The first one, as we scroll up in here, I have the link first before the actual scripts. The link is referring to a CSS style sheet that's called "Dark Hive." Within Dark Hive, I have jQuery UI 1.8.17.custom.CSS. So I'm referring to some CSS, and then I will go in and I have some scripts that I'm working with. Now, these scripts are in that order, the first one, the first jQuery, and this, the minimized version of jQuery because, for faster download, we have the minimized version, but it pretty much just contains everything that you need for jQuery. And you notice that this one shows up before I refer to the second script, which is the jQuery UI.
You notice that the jQuery UI and jQuery are within the JS folder, and then I have the Dark Hive that contains the CSS that I need for this page. Well, where do I have those? Let's see where I can have those pages. If I go back to my project, that's where I have the tab tasks, that HTML page that I just showed you. I have the JS folder. Within the JS folder, we have the jQuery minimized version 1.7.1, and then I have the jQuery UI 1.8.17.custom.net. So I have the jQuery and the jQuery UI within my folder, within JS, that's why we reference them in here by saying JS/slash and then the name of the JS files.
Having known that so far, then where did we get all this? How did we get to this point? So let's just go back a second here and let's load the jQuery UI website. I have jqueryUI.com, and I don't have to go to down load. You just simply jqueryui.com and it takes you to the jQuery UI page. On the JQuery UI, they have the details of what you need. They have the documentation, downloads, and the themes and so on. So if I need to get where I was, the place where I showed you, in terms of having the jQuery and jQuery UI files and the Dark Hive and the CSS and all this, let's go to the download tab. On the download tab I'm able to download the components that make up all of this. If you notice, I can deselect all of the components and show only the ones that I'm interested in. For example, if I need to work with accordion, I can select accordion and so on, or I can just select all of them and they will all get selected, 31 of 31 selected, and I can download that.
You'll notice they are divided by functionality. They have in here the UI core. Then you have the draggable and the droppable and the resizable, we'll talk about those later, and also the widgets that I'm interested in and the effects and that's about it. So that's basically all that I need, and as you noticed, we select them all and on the right-hand side you have the download. So you click on download. It gives you the Zip file and they can unzip that and end up with what I showed you pretty much over here. So you can copy them into the correct folder that you're interested in and then make sure that you have the correct references for jQuery and jQuery UI in your page.
Now you say, "Well, how did you get the Dark Hive?" Let's go back in here for a second and look for other stuff. It says in here's there demo documentation. Okay, we can view the documentation. We'll deal with that later, but let's look at themes. Under the themes page, you'll notice there's something called Theme Roller. On the right-hand side, you have the accordion and the tabs and so on. You'll notice that they are just working functionality, that you can work with, open a dialog. Here's the dialog and so on. Basically, they took all the widgets that you can work with and they put them here on the page, and then on the left-hand side, what they did is they placed for you the themes that you can change. For example, you can change the font. You can change the highlight. You can change the error and so. You can change all that and then see it in effect what's happening there. You can change the text. So instead of having this much red, I can have the text all the way to blue, and that is happening for the error. You'll notice now the error has the red around it but blue text.
You can see this happening, and then you can take that specific theme and download it. You can name it anything you want, that's your theme, and that's the advisable way to go because basically they have everything in here structured properly as far as CSS is concerned, and it's very powerful. You can take all of these tabs, edit them based on your needs, and then download that specific theme and use it within your pages. That's one way to go.
Another way is you can go to the gallery. Within the gallery, you can choose predefined themes. These themes are just, for example, UI Darkness, UI Lightness, Smoothness. You click on one and it shows you the effect on the right-hand side. Whenever you select one, now here's the Start one, and you can work with this theme. If you like this theme, you can just download it, and then you can go down the list and select which theme you're interested in. The one that I like is Dark Hive. So when I clicked on that, it showed me the theme and how my widgets would look. I decided, "Well, this is kind of neat." So I will use that Dark Hive. So I went and I downloaded it. I downloaded the Dark Hive, and I brought that over to my page where I'm doing my work, and that's why you see the Dark Hive folder and what I'm interested in as far as the Dark Hive is concerned. I'm interested in the images and the actual CSS. So I put those within the Dark Hive folder, because that's the one that I downloaded, and then when I came to my page, I referred to Dark Hive slash because they are all on the same page. Under Dark Hive, you will see the CSS that you need, and within that same folder I have the images that the CSS would need. So I've got the images there, and then within the JS, I have the minimized version of jQuery and the same one for jQuery UI.
Having done so, now I can use jQuery to call the functionality that I'm interested in. In this case I was interested in tabs. To build a tab you need the unordered list and the divs. The unordered lists will defer to those divs. So when you click on one, it loads the specific divs that it is related to based on the ID, and then CSS would do its magic and you end up with something like that. So that's how I can work with jQuery UI.
Let me just do a quick summary on what we have done. We went to the jQuery UI website. We downloaded jQuery, and if you notice on the right-hand side in here, you can choose which theme you are interested in, or you can go to the themes folder and build your own or use the predefined ones and download them. You get the jQuery. You get the themes and also the images folder, that's what you get with that, with the CSS. You select which widgets you will need to be working with, in addition, of course, to the effects and the directions and UI code and all that. Mostly what I did is I just select them all and download them, and now you are ready to go to build your jQuery UI enabled websites.
This is a quick intro on what jQuery is and how we can work with it. Now that we downloaded it and we are starting with a quick example by doing the tabs, by showing you the tabs, we will continue based on this and add more functionality and see how tabs work and explore them in more detail. Again, if you have any questions, you can always drop us a line on Mr. Bool's website. Thank you very much for listening. I'm Ayad Boudiab, and you have a good day.