WEBVTT

00:00:07.120 --> 00:00:13.110
In this video we're going to look at a few more widgets that we can create using B.J. Querrey why the

00:00:13.110 --> 00:00:20.040
first one is going to be the spinner which is just another way of putting numeric values using the up

00:00:20.040 --> 00:00:26.120
and down buttons and also comes with the arrow key handling.

00:00:26.560 --> 00:00:27.080
OK.

00:00:27.180 --> 00:00:29.290
So it creates a spinner.

00:00:29.550 --> 00:00:31.110
So first we need an input.

00:00:31.500 --> 00:00:40.570
So we're just going to put everything inside a paragraph Cayne so I know first if so we need inputs

00:00:40.590 --> 00:00:40.860
.

00:00:41.120 --> 00:00:50.240
I'm going to give it an ID my inputs and name my input as well.

00:00:51.240 --> 00:00:58.000
OK let's have an initial value for the inputs of 30.

00:00:58.230 --> 00:01:00.480
Let's have a label as well

00:01:03.270 --> 00:01:09.220
saying select a volley or immutably antibody.

00:01:10.430 --> 00:01:11.270
OK.

00:01:11.800 --> 00:01:19.850
And the label is for my input.

00:01:20.340 --> 00:01:25.190
All right so now you created the spinner we need to access the inputs.

00:01:25.200 --> 00:01:31.620
Now in case we can access it using the ID of the inputs more inputs and then we're going to use a method

00:01:31.670 --> 00:01:34.620
it's a subpoena.

00:01:34.710 --> 00:01:41.820
So if we save and refresh we can see our screen or you can see you can use the buttons that also you

00:01:41.820 --> 00:01:47.250
can use your keyboard keys.

00:01:47.580 --> 00:01:48.240
OK.

00:01:48.690 --> 00:01:52.710
There are a few properties we can use for the spinner method.

00:01:53.040 --> 00:02:00.930
We can set a min and max values using the min and max properties and say 0 for instance and maximum

00:02:01.500 --> 00:02:05.460
two hundred.

00:02:05.460 --> 00:02:09.840
We can also use the said property.

00:02:10.220 --> 00:02:20.920
OK you said that too by default is 1 OK but we can say that 3 for example let's check that.

00:02:21.180 --> 00:02:24.980
If you increase go up by 3 we're down by 3.

00:02:25.110 --> 00:02:31.430
The mean is zero and the max is going to be hundred.

00:02:31.550 --> 00:02:34.720
We don't go 200 because we are actually increasing by 3.

00:02:34.740 --> 00:02:36.720
That's why we stopped at ninety nine.

00:02:37.140 --> 00:02:38.290
OK.

00:02:38.910 --> 00:02:42.560
OK so now let's move to something else.

00:02:42.580 --> 00:02:48.400
We've got to look quickly tub's So we're going to create jobs inside the Apple.

00:02:48.400 --> 00:02:49.110
Dave.

00:02:49.290 --> 00:02:56.350
So OK so what we need we're going to have an ordered list.

00:02:56.900 --> 00:02:57.770
OK.

00:02:57.970 --> 00:03:04.900
So let's have our list items of three list items.

00:03:04.950 --> 00:03:10.830
Each list item is going to contain a link.

00:03:11.040 --> 00:03:13.360
It's a text.

00:03:13.380 --> 00:03:14.400
So this it's one

00:03:18.120 --> 00:03:18.540
two

00:03:21.390 --> 00:03:22.020
three.

00:03:22.020 --> 00:03:27.570
Next we are going to have a deal.

00:03:27.570 --> 00:03:36.030
So each day is going to be linked to one of these links so each of these links is going to refer to

00:03:36.870 --> 00:03:40.420
one of the things that we're going to create.

00:03:42.310 --> 00:03:42.540
OK

00:03:45.790 --> 00:03:47.140
.

00:03:48.720 --> 00:03:49.050
Well

00:03:52.650 --> 00:04:01.420
OK so let's say the first paragraph is right.

00:04:01.750 --> 00:04:04.080
And then when it's contents one

00:04:07.830 --> 00:04:13.320
copy paste the same thing changed its content to three.

00:04:13.920 --> 00:04:14.680
OK.

00:04:15.030 --> 00:04:18.280
So how to link the links to the device.

00:04:18.290 --> 00:04:21.150
Is going to use the ref attributes.

00:04:21.320 --> 00:04:28.740
And we need to link up with the ID of the div we're going to refer to.

00:04:28.740 --> 00:04:31.050
So each of these things is going to have an ID.

00:04:31.380 --> 00:04:45.900
So first 1 to 1 and 2 then 3 and the ATF is going to be the ID of each link.

00:04:45.900 --> 00:04:49.390
So first one is ID of the of each two.

00:04:49.410 --> 00:04:55.510
So if this one is the idea of the first day of the second one is the ID of the second day.

00:04:56.250 --> 00:04:57.570
And then the ID of the

00:05:04.480 --> 00:05:06.570
OK.

00:05:07.280 --> 00:05:07.900
All right.

00:05:07.910 --> 00:05:19.940
So and finally we're going to need to write some code where we access the containing div of the list

00:05:19.940 --> 00:05:20.320
.

00:05:20.570 --> 00:05:23.770
And the other device which is the apple Dave.

00:05:24.020 --> 00:05:32.380
OK so we going to access the containing div Uppal using its ID.

00:05:32.420 --> 00:05:34.190
OK.

00:05:34.790 --> 00:05:40.690
And then we're going to use the method tamps Scicos.

00:05:41.600 --> 00:05:42.520
OK so we can see why.

00:05:42.610 --> 00:05:50.300
Because it was that and when you click on a tab we can see the contents of that specific type.

00:05:50.330 --> 00:05:51.060
All right.

00:05:51.350 --> 00:05:54.350
We can change the styling of the apple.

00:05:54.500 --> 00:05:57.370
Dave so he can set the height to 0 2.

00:05:57.380 --> 00:05:59.820
So that's it looks better.

00:06:00.140 --> 00:06:01.870
OK.

00:06:03.790 --> 00:06:06.670
OK OK.

00:06:06.680 --> 00:06:15.120
Now let's have a look at some of the properties of the Topps method.

00:06:17.390 --> 00:06:26.920
Let's make the tab's collapsable are the moments we can't collapse all its hubs at the same time so

00:06:27.240 --> 00:06:29.630
we're going to use the collapsible

00:06:32.720 --> 00:06:35.940
property that we just need to set.

00:06:35.940 --> 00:06:37.270
That's true.

00:06:37.820 --> 00:06:41.390
And if you're fresh Now we can see that we can collapse tabs.

00:06:41.840 --> 00:06:42.440
OK.

00:06:42.450 --> 00:06:52.520
Also we can make sure that we show the contents of the tab on mouse over so we can use the property

00:06:52.660 --> 00:06:53.790
events.

00:06:54.110 --> 00:06:59.770
We can set that to mouse over.

00:07:01.380 --> 00:07:03.930
OK.

00:07:04.860 --> 00:07:05.640
OK.

00:07:05.690 --> 00:07:09.720
And also we can make these types sortable if we want to.

00:07:09.980 --> 00:07:16.520
So the way to do that is going to be by writing some code outside the taps method so we're going to

00:07:16.520 --> 00:07:17.960
do we can

00:07:20.930 --> 00:07:25.750
access the containing div which is Apple right.

00:07:26.210 --> 00:07:35.910
And then we're going to use the taps method followed by another method find.

00:07:36.950 --> 00:07:46.430
So this method is going to take a promiser in there which is going to be the class you are tab's enough

00:07:47.640 --> 00:07:49.100
.

00:07:50.960 --> 00:07:56.680
So we're going to find these tabs and we're going to send them to sortable.

00:07:58.640 --> 00:08:06.020
And also we can specify inside the sortable method.

00:08:06.450 --> 00:08:12.240
The access is going to be sorted through.

00:08:12.560 --> 00:08:14.360
In our case it's x.

00:08:14.660 --> 00:08:25.370
Ok so if we try this let's make sure that we have and anything we need.

00:08:25.790 --> 00:08:27.160
So we call it there.

00:08:27.310 --> 00:08:28.020
OK.

00:08:28.260 --> 00:08:35.680
If you do that now we can change the positions of our tabs.

00:08:35.960 --> 00:08:36.490
All right.

00:08:36.550 --> 00:08:39.780
Now you now have look at one more widgets.

00:08:39.800 --> 00:08:41.980
It's called the tooltip.

00:08:42.050 --> 00:08:46.220
So when we hope that only certain elements you want to share some information about the elements.

00:08:46.420 --> 00:08:53.260
So let's say when we are over on the inputs we just want to have a tooltip showing something about that's

00:08:53.390 --> 00:08:53.770
input.

00:08:53.770 --> 00:09:03.710
So first the elements in question needs to have a title so that we can have some content for the tooltip

00:09:03.710 --> 00:09:04.880
.

00:09:04.880 --> 00:09:06.840
So our input is there.

00:09:06.870 --> 00:09:11.210
So he's going to add a title all the inputs.

00:09:11.930 --> 00:09:18.620
For example we can say please answer a value for example.

00:09:18.690 --> 00:09:19.760
OK.

00:09:20.780 --> 00:09:28.460
Now we need to access the inputs are the elements that we would like to tilt it to.

00:09:28.460 --> 00:09:38.710
And so in either case accessing the elements using its ID my inputs.

00:09:40.160 --> 00:09:43.920
And we're going to use the tooltip method.

00:09:45.140 --> 00:09:45.470
OK

00:09:45.470 --> 00:09:51.590
.

00:09:51.590 --> 00:09:59.510
Now if we over on the info we can see it's also showing that there are some properties we can use for

00:09:59.510 --> 00:10:01.400
the tooltip.

00:10:02.210 --> 00:10:18.260
We can add some effects using the show property we can add effects there are using effects and we can

00:10:18.260 --> 00:10:21.110
say that to few values.

00:10:21.140 --> 00:10:24.160
We can choose from one value slide down

00:10:30.820 --> 00:10:33.840
fresh and see the effect.

00:10:33.980 --> 00:10:41.540
OK we can use explode for instance.

00:10:41.640 --> 00:10:43.020
All right.

00:10:43.490 --> 00:10:44.250
OK.

00:10:44.750 --> 00:10:52.550
If you want to add tooltip talk to all the elements having a title or you need to do is access the document

00:10:52.550 --> 00:10:55.220
itself and use the tooltip method.

00:10:55.220 --> 00:11:06.160
So if we do this we say look Hemans tooltip.

00:11:07.770 --> 00:11:08.430
OK.

00:11:08.610 --> 00:11:11.330
Then all the elements

00:11:15.320 --> 00:11:21.860
all the elements having a title are going to have a tooltip basically.

00:11:22.220 --> 00:11:28.910
So if you add a title to Microsoft for example.

00:11:30.090 --> 00:11:32.830
OK.

00:11:33.280 --> 00:11:35.170
So Microsoft's.

00:11:35.320 --> 00:11:40.820
So now you will see HLT point you over one of Microsoft's elements.

00:11:40.820 --> 00:11:43.660
All right.

00:11:43.940 --> 00:11:44.520
No it's just

00:11:48.740 --> 00:11:51.450
come in.

00:11:51.970 --> 00:11:52.300
That's