WEBVTT

00:00:05.850 --> 00:00:12.900
In this video you're going to learn how to use the query UI to create widgets.

00:00:13.160 --> 00:00:21.270
But when we do they will allow us to create a theme of all buttons which will come with pre-built Hova

00:00:21.520 --> 00:00:23.180
and active styles.

00:00:23.830 --> 00:00:24.390
OK.

00:00:24.600 --> 00:00:29.640
So we get it creates a few buttons to start

00:00:32.810 --> 00:00:38.100
and it creates three buttons are going to give each person an ID

00:00:42.180 --> 00:00:51.340
just one person one and then button two and then three.

00:00:51.470 --> 00:00:52.090
OK.

00:00:52.560 --> 00:00:57.660
Now to style a button using the A deck where you are.

00:00:57.960 --> 00:01:05.290
So let's start early so the first doesn't transform into a theme of all Busson using the magic where

00:01:05.290 --> 00:01:05.890
are you.

00:01:06.120 --> 00:01:12.700
What are you going to do going to access the button using its ID.

00:01:12.760 --> 00:01:16.070
They will use a method it's called button.

00:01:16.620 --> 00:01:17.900
Very simple.

00:01:18.650 --> 00:01:19.450
OK.

00:01:19.770 --> 00:01:26.780
So if you do that and refresh so you can see now that's the button style has changed Hold the bus and

00:01:26.790 --> 00:01:28.510
you can see the style.

00:01:28.600 --> 00:01:32.530
And also if you click on the button we can see how the style changes.

00:01:32.580 --> 00:01:33.430
OK.

00:01:33.840 --> 00:01:36.970
If we change the theme we can see.

00:01:36.990 --> 00:01:40.410
So it is go for Blitzer for example.

00:01:41.120 --> 00:01:44.920
You can see that's another stylo.

00:01:45.300 --> 00:01:46.280
OK.

00:01:46.380 --> 00:01:47.820
All right.

00:01:47.820 --> 00:01:52.810
Now let's move to the next button and do the same thing.

00:01:53.100 --> 00:01:57.190
So you can access the button using its ID again.

00:01:58.240 --> 00:02:07.320
And we're going to use the button method to refresh we can see that the button has got a new style now

00:02:07.350 --> 00:02:07.850
.

00:02:08.730 --> 00:02:17.890
Let's do something else let's add an icon to the button so it is don't like on the left side.

00:02:18.210 --> 00:02:20.710
To do this we will need a prop..

00:02:20.730 --> 00:02:35.910
It's the ikons property and we need to specify whether we are looking at the primary icon or the secondary

00:02:35.910 --> 00:02:41.940
icon the primary icon is the one that goes on the left and the second one is the one that goes on right

00:02:41.960 --> 00:02:42.280
.

00:02:42.620 --> 00:02:43.620
OK.

00:02:43.770 --> 00:02:50.540
So if we select only always specify a primary icon.

00:02:50.970 --> 00:02:55.800
Let's pick up an icon from our table page.

00:02:56.340 --> 00:02:58.700
Let's go for this one you an icon for that open

00:03:02.950 --> 00:03:10.190
your you like on all the open.

00:03:11.280 --> 00:03:18.090
If you refresh the page you can see that we've got the icon now on the left side of the button.

00:03:18.300 --> 00:03:19.530
OK.

00:03:20.370 --> 00:03:21.460
All right.

00:03:21.590 --> 00:03:31.560
Now sometimes we don't want any text to show in the button and we want only an icon to show that all

00:03:31.560 --> 00:03:37.480
we need to do is to set the text property to False.

00:03:37.770 --> 00:03:40.550
So if we do this now you will see only an icon in there.

00:03:40.600 --> 00:03:42.660
So we don't see any text.

00:03:42.710 --> 00:03:43.970
All right.

00:03:44.110 --> 00:03:48.930
OK so let's do the same thing for wasn't three and this time we're going to build the same thing.

00:03:48.960 --> 00:03:54.380
But we're going to have a couple of icons one on the left and one on the right.

00:03:55.380 --> 00:04:01.260
OK so we're going to access the button using ID and.

00:04:02.370 --> 00:04:02.750
OK.

00:04:02.790 --> 00:04:07.240
And now we're going to use the button method.

00:04:07.320 --> 00:04:10.920
So we are going to be using options here.

00:04:10.950 --> 00:04:20.110
So we need curly brackets and then need icons are going to be adding a couple of icons here.

00:04:20.220 --> 00:04:22.510
So the first one is the primary one.

00:04:23.160 --> 00:04:30.840
OK and then the next one is the second icon.

00:04:32.850 --> 00:04:37.870
So let's pick up some icons from here.

00:04:38.430 --> 00:04:43.850
Let's pick this one.

00:04:43.870 --> 00:04:45.470
A mill closed.

00:04:45.470 --> 00:04:47.520
You or I can mill closed.

00:04:47.570 --> 00:04:48.090
OK.

00:04:48.300 --> 00:05:00.280
Why are you closed and for the second row let's go for let's go for an arrow.

00:05:01.470 --> 00:05:02.400
Kinescope or something.

00:05:02.400 --> 00:05:04.530
That's correct Tony.

00:05:04.730 --> 00:05:06.500
OK.

00:05:06.750 --> 00:05:07.330
I called

00:05:10.780 --> 00:05:11.130
the

00:05:14.710 --> 00:05:16.690
you say OK.

00:05:17.140 --> 00:05:18.020
So let's try this

00:05:20.690 --> 00:05:21.670
nice.

00:05:21.690 --> 00:05:22.660
We can see that.

00:05:22.850 --> 00:05:28.490
Now we've got a couple of icons you can see one of the left and one to rights.

00:05:28.620 --> 00:05:29.830
OK.

00:05:29.880 --> 00:05:41.170
Now we will move to check boxes so we'll see how to style check boxes using the inquiry which is OK

00:05:41.190 --> 00:05:45.970
it's have only one checkbox inside the Apple.

00:05:46.120 --> 00:05:58.380
But take out the paragraph and we'll just create an input.

00:06:00.000 --> 00:06:05.150
So that type is checkbox.

00:06:05.630 --> 00:06:11.520
Let's give it an ID my checkbooks for example.

00:06:12.910 --> 00:06:14.010
OK.

00:06:14.070 --> 00:06:15.590
And it also does have a label

00:06:18.430 --> 00:06:20.380
for the checkbox.

00:06:21.160 --> 00:06:22.690
OK.

00:06:23.880 --> 00:06:30.780
It's a PC by the ID of the checkbox and it's has some text the checkbox.

00:06:30.890 --> 00:06:31.330
OK.

00:06:31.760 --> 00:06:37.810
So you can see the standard styling there without using the equerry themes.

00:06:37.880 --> 00:06:49.830
Now if you want to style the checkbox again you will access it checkbox using its ID.

00:06:49.820 --> 00:06:50.230
All right.

00:06:50.270 --> 00:06:59.450
And then we'll use the same method we used earlier so it's OK.

00:06:59.840 --> 00:07:02.940
So now we can just refresh and see.

00:07:03.040 --> 00:07:10.100
So if we check the box we can see how the style changes if we and Chicot's you can see the subtleties

00:07:10.100 --> 00:07:11.050
as well.

00:07:11.060 --> 00:07:11.540
All right.

00:07:11.630 --> 00:07:13.900
Let's go for another example.

00:07:13.900 --> 00:07:25.540
So this time will creates a checkbox form with many boxes that will style those boxes altogether.

00:07:25.940 --> 00:07:28.880
So let's go to the Facebook Dave.

00:07:29.410 --> 00:07:37.200
So it will create a new div in here and we're going to give it an ID.

00:07:38.210 --> 00:07:42.510
It's called it's checkboxes.

00:07:43.110 --> 00:07:45.470
Then we will put all our inputs inside.

00:07:45.470 --> 00:07:47.690
So let's just copy paste.

00:07:48.120 --> 00:07:48.810
Of no

00:07:51.630 --> 00:07:52.670
type is checkbox.

00:07:52.740 --> 00:08:07.130
Let's give you the first one the ID check box 1 and the label support checkbox 1 is going to be go for

00:08:07.130 --> 00:08:09.340
comics were examples of Audi.

00:08:13.670 --> 00:08:17.120
Copy the same thing.

00:08:17.570 --> 00:08:20.090
The second one is going to be checkbox to

00:08:24.440 --> 00:08:29.970
go for you and you for example and last one was three.

00:08:31.440 --> 00:08:35.330
These go for us.

00:08:36.720 --> 00:08:37.300
OK.

00:08:37.670 --> 00:08:47.420
So now if you want to style these checkboxes we can just access the container and we're going to use

00:08:47.850 --> 00:08:52.720
a method.

00:08:53.140 --> 00:08:54.220
It is one thing.

00:08:54.240 --> 00:08:59.790
We place this outside our ready function method.

00:08:59.970 --> 00:09:12.200
OK so now will access the if using its ID which is checkboxes.

00:09:13.290 --> 00:09:23.210
At this time to style a set of buttons all together we are not going to use the Butson method will use

00:09:23.210 --> 00:09:29.890
the button set method.

00:09:30.660 --> 00:09:35.150
It's always great.

00:09:35.210 --> 00:09:41.810
We could have styled each button separately but it's easier to use and sets for for this example.

00:09:41.820 --> 00:09:44.090
OK so let's refresh the page.

00:09:44.150 --> 00:09:48.340
Now we can see our tick boxes there so you can just check and check any of them.

00:09:48.500 --> 00:09:51.190
We can see how the style changes.

00:09:51.200 --> 00:09:52.320
All right.

00:09:53.270 --> 00:09:54.150
OK.

00:09:54.410 --> 00:09:57.760
Now we're going to go for radio buttons.

00:09:57.890 --> 00:10:04.240
They will work the same way as checkboxes but let's just go for an example and show how it works.

00:10:04.280 --> 00:10:13.350
So we can create a form inside the Microsoft skin to get rid of the paragraph and we're going to create

00:10:13.940 --> 00:10:19.470
a form with radio buttons.

00:10:19.460 --> 00:10:33.940
So this creates a div inside the form and we give the diff an ID Lets call its read your boxes for example

00:10:35.200 --> 00:10:38.200
.

00:10:40.750 --> 00:10:43.960
Ok then we going to have our inputs inside.

00:10:43.960 --> 00:10:53.400
So first one is going to be improved so the type is radio.

00:10:56.500 --> 00:11:06.760
And this gives us an ID read your books one that also a name.

00:11:07.960 --> 00:11:08.680
OK.

00:11:08.950 --> 00:11:12.240
Made your boxes.

00:11:12.710 --> 00:11:21.810
The first one and we are going to give you a label as well so a label for

00:11:25.640 --> 00:11:26.510
read your books.

00:11:26.510 --> 00:11:30.930
One is go comics again.

00:11:30.920 --> 00:11:42.420
So you're going to go forward with this one and we're just going to copy paste the second one.

00:11:42.410 --> 00:11:47.710
So read your books to school for you to

00:11:54.210 --> 00:11:56.910
OK read your books to

00:11:59.790 --> 00:12:01.130
then read your books.

00:12:01.320 --> 00:12:02.310
3

00:12:05.280 --> 00:12:06.060
Let's go.

00:12:06.150 --> 00:12:08.530
All right.

00:12:09.970 --> 00:12:11.160
OK.

00:12:11.250 --> 00:12:19.510
So the old style the red box is using the equerry boy Busson sets method.

00:12:19.500 --> 00:12:24.850
So first we need to access the read your books Dave.

00:12:26.450 --> 00:12:31.050
So the name of the or the idea of the day was read your boxers.

00:12:31.620 --> 00:12:33.430
OK so what are we accessing here.

00:12:33.430 --> 00:12:35.970
The containing div using its ID.

00:12:35.960 --> 00:12:43.700
All right and then we're going to be using the same method we use for the checkboxes and sets.

00:12:43.950 --> 00:12:45.780
We try that.

00:12:45.770 --> 00:12:49.290
Now we can see that's our read your books are styled.

00:12:49.350 --> 00:12:51.940
You can check one radio box that's right.

00:12:52.190 --> 00:12:52.660
OK.

00:12:52.830 --> 00:13:01.690
So that's how we use the Joker to create Butson widgets in the next session.

00:13:01.680 --> 00:13:03.080
We'll look at dates because