Duration: 19 minutes
Summary: In this video, we continue the jQuery UI discussion. We already talked about some jQuery UI widgets. Today, we will discuss the dialog. As we do in these videos, we will look at a simple page with a div and a paragraph. Then, we will use jQuery to get the div with a specific id. And we will apply the dialog function on it. After that, we will start discussing the options one at a time. We will add the option and preview the page to see the impact. The options we will be talking about are: disabled, closeOnEscape, draggable, height, maxHeight, maxWidth, modal, position, width, resizable, show, title. In the next video we will talk more about the dialog widget.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, dialog, disabled, closeOnEscape, draggable, height, maxHeight, maxWidth, modal, position, width, resizable, show, title.
Transcript: Welcome back, everybody. This is Ayad Boudiab. I'm a Senior Data Application Developer. In this series of videos, we are discussing jQuery UI. As you notice in the previous videos, we discuss some of the UI widgets. Normally the procedure that we follow is that we present one widget at a time, we discuss its options (one option at a time), and we look at some methods and events that could be associated with this specific widget (one example at a time).
In today's video, I'd like to talk about the dialogue. So, we need to show a dialogue to the user. Then, we need to turn some of those options for the dialogue on and off. Also, try to see how we can associate the events related to a specific dialogue, so we can see how it works. As you notice, in every page basically I have some references. I have a reference to the cascading style sheet. This reference goes to the folder archive, within I have the jQuery UI custom CSS.
If you watch the first video, you would know how we were able to get to the jQuery UI website and how we chose the style that we would like. We downloaded it and currently saved it in the directory where the file is, where the file dialog [tested] HDMS. Within the folder archive, I have the custom CSS. Of course, in order for me to work with jQuery, I have to reference the jQuery (the minimized version). Also, I need to reference the minimized version of jQuery UI. Be careful here. When we say just the minimized version, I'm not saying that you have to have this version. It's just that since it is minimized, the spaces are trimmed off and basically loads faster.
So, we are referencing these two jQuery UI files. They are both under the GS folder and the current folder where this file is. So, I have an archive folder with a CSS. I have a JS folder with a minimized version of jQuery and the minimized version of jQuery UI. Now, I am having all of my pages here. In the new script, I have the jQuery ready function. This basically says when the [ROM] is ready, what do you want to do? This is where you put your functionality.
Below here, in the body, I have a DIV that contains the idea of the DIV. We named it "dialogue", but of course we can name it anything you want. It does not have to have the name "dialogue". We gave it a specific title. Then, we have a paragraph within that DIV. That paragraph simply references the text of a previous video that I talked about when I discussed a Accordion.
So, if you go over to this page and try to preview it in the browser, you notice it is just a simple HTML paragraph that contains some text. If I need to turn this one into a dialogue, I need to use jQuery UI. Now, basically I have the DIV that has ID dialogue. When I work with jQuery, I know that in order for me to reference a specific element I use either jQuery or the dollar sign. In this case, we use the dollar sign and reference that ID. In order for me to reference an ID, I need to use the pound sign.
So, pound dialogue, gives me the reference to that specific DIV that you see below in the body. Then, I call a function dialogue on it. Again, if you are working with object oriented programming, this simply calling a constructor of a specific object. Calling dialogue on this specific element, on this specific DIV named "dialogue". Let's go ahead and save, and try to preview that in the browser. You will notice now that I have a dialogue instead of paragraph, using the custom CSS for that archive.
So, if you are using a different style you would see the dialogue differently. You will notice that the dialogue can be re-sized. From here as well. You will notice that automatically we have the scrolling. I have a close button and I also have the title that you saw earlier. Now, I can close the dialogue and it's gone. This is simply done by calling the dialogue function on that specific dialogue. Now, of course there are some options that I can use to work with the dialogue.
As you've seen with the previous jQuery widgets, or jQuery UI widgets, that we have discussed, we passed those in the curly braces and that's where I list my options. It can become a separated list, but in this case some of those we will be discussing one option at a time. So, one option for example, to work with the dialogue could be to disable it, like we have done with other jQuery UI widgets. Another option would, for example, be to close on escape. So, basically as the name implies, close the dialogue when the user hits the escape key. So, I can say "close on escape" and set that equal to true.
So, now when the user hits the escape key, the dialogue should be gone. So, let's go ahead and preview that in the browser. I have the dialogue here. By the way, I can move it back and forth. I need to hit the escape key. I hit the escape key and the dialogue is gone. That is the close on escape. Of course, you can turn this one into false and the dialogue would not be displaced if you hit the escape key.
Now, one option that you've seen also is that I can work with the dialogue. So, I can basically move it around, I can close it, it has a title, and I can resize it. So, one of the options is drag. So, I can make that dialogue draggable on the screen. This is basically, when I try to preview it, here is my dialogue and I can drag it. One option maybe you can see better, if I try to resize it you notice that I can drag the dialogue around the screen. We were able to do that earlier, but since it was bigger in size it was just moving left and right. I just need to show you that I can drag it around the page.
Of course, I cannot take it outside the boundaries of the page, but I can drag it around the page. Now, I can turn this one into a false and I cannot drag the dialogue on the screen. That is straight forward. Also, some of the options that I can work with is that I can specify the height of that specific dialogue. So, height is given a specific value. For example, the height of this dialogue is three hundred. Right-click, view in the browser, and now I have a dialogue with a height of three hundred. Since it is not enough for the text, I got the scrolling with the dialogue.
Again, I only specified the height, but I can drag it. I can close it. Some of those properties are provided to me by default; I don't have to provide that specific value for them. Since I have the height, I should be able to specify the width, or the maximum height, or maximum width. So for this specific one, for example, I can give it a maximum height. I can also give it a maximum width. For example, let's keep the maximum height at four hundred and I can give it a maximum width also of four hundred. That is the maximum height and maximum width for this specific dialogue.
See, I can shrink it, but if I try to expand the width I stop at a certain part. I cannot do that anymore; the maximum height for that specific dialogue was given. I can shrink it down. Now, I cannot take it any further. So, I have a maximum height and maximum width for that specific dialogue. Now, there is an option of making it a model dialogue.
Sometimes, you want to allow the user to do things behind the dialogue. Sometimes, you want the user to not be able to take any action while the dialogue is open. So, deal with the dialogue and when you are done you can do whatever you want to do on the page. That is one option. The other option, while the dialogue is showing up you can do other stuff on the page. Think about it as when you are working with Microsoft Word and you are doing a search. The dialogue would show up for you to do the search. While you are searching, you can still interact with the Word document.
So, how can we do something like this when we are working with a dialogue in jQuery UI. Well, this option is called model. So, let's take this one out. Here is the model and let's set that to false. Let's start with the value false. Try to preview that in the browser. You notice that I can see the page behind. Right now I don't have anything on the page HTML that I can interact with that page because the model is set to false. It is not clear what I mean, but let's go ahead and turn this one into true and see the difference.
That's a model dialogue set to true, [inaudible 11:20] preview that in the browser. You notice that the background page is great. I can move this one around, but I have to interact with the dialogue. Once the dialogue is dismissed, then I can work with the page behind the dialogue. So, this is model being set to true. Earlier, when model was set to false, the page behind was not grayed out. It was all white, which means that basically I can interact with that page while the dialogue is open. So, that's your choice which one you want to go with.
Now, we've set the model dialogue. What else can we do? Can we position that specific dialogue? Let's work with the position option. Position is set to top. I want to set that to top. I also want to give it a width of six hundred. Give it a width of six hundred and position on the top. So, let's preview that. The dialogue with a width of six hundred is positioned on top of the page. Now, can I also provide different options? Yes, I can. For example, position, instead of simply saying top, I can give it an array of values.
Of course, with array we use square brackets. Those two values for the position could be two hundred and two hundred. That is the position of this specific dialogue. Position: two hundred, two hundred for the dialogue. Now, what other thing can I do? Also, within the array, instead of giving the value two hundred, two hundred, I can make this one on the left. Also, for this specific value I can make it top or bottom. In this case, I will go with top. I can make it left, top as the actual position of the dialogue. So, let's go ahead and view that in the browser. Left and top, it's in the top, left corner of the page. I can do this by providing numbers. I can do this by providing actual values within the strain. It's my choice.
Now, sometimes you don't want the user to be able to re-size your dialogue. I want to give a specific size; I don't want the user to re-size it. So, I can make this one resizable to be false. Resizing that dialogue is false. View in the browser. You will notice, the dashes that you had here in the bottom corner are gone. I cannot re-size that specific dialogue. I specified the width, but I cannot re-size it. Of course I can move it, but I cannot re-size it. This is with the resizable option for the dialogue.
Now, let's look at some other fun stuff that we can work with. How about if we give it a title. You've seen that the dialogue already has a title. The dialogue title goes here, but of course you can put your own title for the dialogue. I specified my title here by saying recording video because that's the video we use when discussing recording. So, we give it a title of "recording video". When I try to preview that in the browser, I have the recording video right now and here is the text of it.
Now, if I need to show that specific dialogue, what options do I have? I want to show the dialogue on the screen, but also with some specific values. Show will be the actual option that I want to work with. So, let's do show. Not shoe. Then, what options do I have? For showing the dialogue, I can use the option: pulsate. It's like a pulse. Then, I can try to preview that. That is one option I can work with. That is to bring the user's attention to something. So, pulsate with a specific value. How about other values? One option is scrolling from top to bottom? How about clip? Now, how about drop? Well, there are many of them. It is fun to work with them. That's drop.
Then, we have the option of explode. Maybe that is something that you will see later when you need dismiss the dialogue, especially when you are working with something that is interactive with the user. The option here is explode. Here, it exploded and was brought in together. Now, of course, we can also make it fold. I promise I will be done with those soon. They are fun to work with, aren't they? Here is folding. Then, there is the puff. That's the puff. Then, you have the slide. Also, we have the scale and size. Those are also the other two options that you can work with.
So, you notice that when you are showing the dialogue, you have some animation that you can work with. Then, the user can see how you can experiment and show the dialogue to the user. There is some more functionality that I would like to talk about for the dialogue. I will be discussing this in the upcoming videos. Please, stay tuned for the information. Thank you very much for listening. I am Ayad Boudiab and you take care.