WEBVTT 00:00:06.830 --> 00:00:14.310 In this video we're going to get introduced to the bootstrap plug in the subs again will allow us to 00:00:14.310 --> 00:00:17.710 create interfaces just like this one. 00:00:17.730 --> 00:00:24.840 So what we see here we've got a list of NAFTA's audits of the page we already covered how to create 00:00:24.870 --> 00:00:26.260 enough jobs. 00:00:27.030 --> 00:00:34.640 And also we've got Bane's that each pain is having some content and it's linked to one of these apps 00:00:34.650 --> 00:00:35.690 . 00:00:35.710 --> 00:00:36.210 OK. 00:00:36.540 --> 00:00:42.410 So let's go ahead and create a similar tabbed interface. 00:00:42.510 --> 00:00:52.290 So first of all if you remember this is the same list of NAV tabs as we have created in the dove's video 00:00:52.290 --> 00:00:52.680 . 00:00:52.680 --> 00:00:56.820 So we're just going to copy the code from the N-Dubz those HBL file. 00:00:57.540 --> 00:01:01.100 So we're going to copy these letters. 00:01:01.820 --> 00:01:07.900 And we can places inside our container. 00:01:07.950 --> 00:01:08.900 All right. 00:01:09.310 --> 00:01:09.740 OK. 00:01:10.050 --> 00:01:13.470 So now let's create our panes. 00:01:13.680 --> 00:01:18.140 So first of all we will place all the pains inside a div. 00:01:18.920 --> 00:01:19.500 OK. 00:01:19.800 --> 00:01:32.110 So this div is going to have an ID my tab content but also will give it to a class of tab called that 00:01:32.120 --> 00:01:37.300 . 00:01:42.770 --> 00:01:43.680 OK. 00:01:43.760 --> 00:01:45.890 Now this creates the first pane. 00:01:46.110 --> 00:01:57.860 So we will place the pain inside a div and we'll give it a class of top paid. 00:01:59.310 --> 00:02:05.840 OK so we're creating the initial pain which is linked to the Home tab. 00:02:06.480 --> 00:02:12.390 So the first page is going to be we want it to be active so that we we can see actually if we load the 00:02:12.390 --> 00:02:13.160 page. 00:02:13.440 --> 00:02:21.540 And also we can add some field effects so we get the class fade there just for the initial pain we need 00:02:22.320 --> 00:02:26.150 to add another class in so that it's facing properly. 00:02:26.790 --> 00:02:28.310 OK so it's odd. 00:02:28.320 --> 00:02:31.070 Some content. 00:02:32.550 --> 00:02:37.970 OK so who have a paragraph who said 00:02:41.700 --> 00:02:45.000 let's have another paragraph. 00:02:45.240 --> 00:02:49.270 Some text to that. 00:02:50.200 --> 00:02:50.980 OK. 00:02:51.630 --> 00:02:55.320 So this creates the message is pain. 00:02:57.840 --> 00:02:58.950 OK. 00:02:59.250 --> 00:03:03.210 Before we do that each brain will need an ID. 00:03:03.240 --> 00:03:04.380 OK. 00:03:05.160 --> 00:03:12.030 Related to this what is going to be who will lead the ID to link the pain to the corresponding type 00:03:12.050 --> 00:03:12.440 . 00:03:12.810 --> 00:03:13.890 OK. 00:03:14.280 --> 00:03:17.220 So so the next brain is going to be 00:03:21.170 --> 00:03:24.010 the one linked to the messages tab. 00:03:24.090 --> 00:03:30.280 Let's get rid of the active fade in glasses will the only painless 00:03:32.990 --> 00:03:35.060 way we can the fade. 00:03:35.090 --> 00:03:47.130 Cl. let's go with the lady messages and the street is two messages called Gazidis creates the third 00:03:47.400 --> 00:03:49.440 and fourth pains. 00:03:49.590 --> 00:03:54.550 So this one is going to be buttie vacations. 00:03:55.140 --> 00:03:56.900 It's going to be two occasions. 00:03:57.200 --> 00:04:02.580 And then finally this way is going to be called text us 00:04:05.820 --> 00:04:09.080 say contact us. 00:04:09.300 --> 00:04:09.930 OK. 00:04:10.290 --> 00:04:17.620 So now we have created our Bane's what are we going to do now we will link the tabs to the panes. 00:04:18.030 --> 00:04:23.460 So if we go to the links Let's have a look at the first link. 00:04:24.330 --> 00:04:33.780 So we of course and HSF that we will need to change now to the ID of the brain. 00:04:33.840 --> 00:04:42.040 So this one is going to be who and also each link is going to need a data attributes. 00:04:42.090 --> 00:04:48.750 So it's going to be a data Tuggle will say it's all of them to tap. 00:04:49.030 --> 00:04:49.670 OK. 00:04:49.710 --> 00:04:54.750 So all links will have a date to go of it up. 00:04:54.780 --> 00:05:00.290 So let's go to the next link for messages. 00:05:00.760 --> 00:05:06.000 It is going to be messages is the data Tuggle 00:05:09.080 --> 00:05:10.130 notifications 00:05:12.950 --> 00:05:15.670 and contact us 00:05:17.600 --> 00:05:20.520 . 00:05:21.500 --> 00:05:27.600 OK so let's refresh the page and make sure it is working. 00:05:28.520 --> 00:05:33.950 So when the page loads we can see the first page is active. 00:05:34.020 --> 00:05:36.900 OK. 00:05:39.990 --> 00:05:40.750 OK. 00:05:41.490 --> 00:05:45.730 All the other panes are working. 00:05:46.290 --> 00:05:47.970 All right. 00:05:48.840 --> 00:05:56.270 Now let's have a look at some methods and events we can use with the tabs again. 00:05:56.870 --> 00:06:01.700 So this writes a script. 00:06:02.890 --> 00:06:06.630 Ok so first let's. 00:06:07.920 --> 00:06:11.780 OK let's try something. 00:06:13.110 --> 00:06:22.200 So when we load the page let's say we want the final pane to show rather than the first page. 00:06:22.380 --> 00:06:28.870 So we know that the first date is the Occy of what we know the home page is actually one but we want 00:06:28.920 --> 00:06:33.980 the contact us page to show when we load the page. 00:06:34.170 --> 00:06:39.020 So we get what we are going to do will access the 00:06:41.880 --> 00:06:45.440 link of this tab. 00:06:45.680 --> 00:06:47.220 OK. 00:06:47.310 --> 00:06:55.040 We'll use a method just to show the pain of this link to this type. 00:06:55.130 --> 00:06:55.730 OK. 00:06:56.120 --> 00:07:08.160 So so to access the link of this stub we will access the list of nawabs. 00:07:08.430 --> 00:07:09.470 OK. 00:07:10.190 --> 00:07:13.390 OK let's give it to the lady so the ignorance is using its ID. 00:07:13.450 --> 00:07:18.200 It's called it's my type. 00:07:18.940 --> 00:07:23.210 OK on my terms. 00:07:24.770 --> 00:07:25.820 So I access 00:07:28.550 --> 00:07:35.560 my tabs and will then access the last link of the list. 00:07:35.580 --> 00:07:36.050 OK. 00:07:36.060 --> 00:07:42.300 So the last link is going to be accessed we can access it using the ATAC called Lust's. 00:07:42.910 --> 00:07:43.440 OK. 00:07:43.560 --> 00:07:50.860 And then the method is going to be using here is tab but it'll take one barometer. 00:07:50.900 --> 00:07:58.850 So we want to show the pain link to this tab and the priority is going to be show. 00:07:59.600 --> 00:08:03.260 So destroy That's if you're phrase to page. 00:08:03.440 --> 00:08:03.820 OK. 00:08:03.930 --> 00:08:11.880 So we can see that the paper shows is the last one you is when you get the first page is working OK 00:08:11.970 --> 00:08:12.870 . 00:08:13.150 --> 00:08:15.620 All right. 00:08:15.620 --> 00:08:18.180 Now let's try something else. 00:08:18.300 --> 00:08:25.700 Let's say we want to be able to see an alert message once we click on 00:08:28.400 --> 00:08:32.280 on one of these tabs or once at one of these subs is activated. 00:08:32.820 --> 00:08:33.600 OK. 00:08:33.600 --> 00:08:41.070 So let's access the tabs so to access the tabs. 00:08:41.250 --> 00:08:50.500 We access all the links which has cause a data attribute or which has caused an abuse of data. 00:08:50.870 --> 00:08:51.400 OK. 00:08:51.530 --> 00:09:00.400 Because all the links inside our list of laptops they have a data to go out of use. 00:09:01.670 --> 00:09:11.130 So to do that we will use the a tag that will specify We want only the leagues which has got a data 00:09:11.900 --> 00:09:16.860 toggle said to tap. 00:09:16.940 --> 00:09:18.260 OK. 00:09:19.130 --> 00:09:28.240 So we actually we we are selecting all these links and then the method we are going to use is on. 00:09:28.320 --> 00:09:33.450 And if you remember this will take a couple of promises the first one is the events and the second one 00:09:33.440 --> 00:09:35.120 is the function to execute. 00:09:35.570 --> 00:09:37.060 OK. 00:09:37.830 --> 00:09:38.130 So 00:09:43.880 --> 00:09:51.730 the event is going to be shown thoughts B-S put up. 00:09:52.160 --> 00:10:01.380 So this means that we will find the function once the tab is or the pain link links to the tab is shown 00:10:01.380 --> 00:10:03.040 or once the tab is activated. 00:10:03.380 --> 00:10:04.040 OK. 00:10:04.320 --> 00:10:09.390 So the second barometer is going to be the function. 00:10:10.640 --> 00:10:15.190 Ok so for now our function is going to take any promises. 00:10:15.620 --> 00:10:22.710 OK so he's going to have a simple window thoughts alerts 00:10:28.230 --> 00:10:31.680 for example to destroy that. 00:10:31.970 --> 00:10:37.410 So know if we activate any of these tabs we can see the alerts message. 00:10:37.420 --> 00:10:40.100 OK so now let's try something else. 00:10:40.160 --> 00:10:49.180 Let's use the alert message to show which tab is activated. 00:10:49.470 --> 00:10:58.430 OK so so for example if we click on the home tab we want to see if the alerts message the text of of 00:10:58.470 --> 00:11:02.760 the top home showing that this is what is the one that is activated. 00:11:02.750 --> 00:11:17.300 So first the function this time is going to have a promise that will use the events object and to access 00:11:17.310 --> 00:11:20.220 the text of the tap was activated. 00:11:20.220 --> 00:11:27.530 So first we need to select the tab that is activated so it will use the objects events and we'll use 00:11:27.720 --> 00:11:33.740 targets to access the tap that is activated. 00:11:34.110 --> 00:11:34.930 OK. 00:11:35.050 --> 00:11:39.340 And then to get that text we'll use the text method just like that. 00:11:39.410 --> 00:11:40.990 So destroy this. 00:11:41.040 --> 00:11:47.060 So if you click on it we can see text the text of the hobe tab. 00:11:47.470 --> 00:11:48.890 Same thing for messages. 00:11:49.110 --> 00:11:50.910 OK. 00:11:52.350 --> 00:12:06.120 All right so let's try now to show the elements or the previous previous active tap. 00:12:06.140 --> 00:12:10.830 So for example at the moment message messages is the active tab. 00:12:10.980 --> 00:12:15.640 So if I click on notifications the previous active tab is messages. 00:12:15.680 --> 00:12:21.210 So we want to show messages which is the period exits up. 00:12:21.440 --> 00:12:26.410 So rather than using targets we use related to target. 00:12:26.550 --> 00:12:26.980 OK. 00:12:27.200 --> 00:12:33.110 So let's try this so that the active tab is called Access. 00:12:33.120 --> 00:12:39.240 So if you click on the last message that should show us the previous active tab which is called Texas 00:12:39.240 --> 00:12:40.360 . 00:12:40.670 --> 00:12:41.510 OK. 00:12:42.150 --> 00:12:43.850 Now the active type is home. 00:12:43.880 --> 00:12:48.100 If you click on notifications it will show the previous active tab which is. 00:12:48.690 --> 00:12:49.760 OK. 00:12:49.800 --> 00:12:51.390 So let's try this right. 00:12:51.410 --> 00:12:52.130 A simple 00:12:54.770 --> 00:12:55.920 alert message 00:12:59.120 --> 00:13:03.290 is just copy that's just say 00:13:06.580 --> 00:13:09.410 the active is 00:13:14.050 --> 00:13:14.470 OK 00:13:17.880 --> 00:13:21.290 . 00:13:22.190 --> 00:13:28.220 The previous is. 00:13:31.110 --> 00:13:32.990 So the active tab. 00:13:33.720 --> 00:13:41.240 OK the previous tab is going to be event related targets and the active tab 00:13:44.390 --> 00:13:50.220 is going to be event target history that it's working. 00:13:50.220 --> 00:13:52.280 So if you click on. 00:13:52.610 --> 00:13:56.520 So the active one is home and the previous one is called Texas. 00:13:56.580 --> 00:13:58.090 Click on lots of occasions. 00:13:58.400 --> 00:14:00.960 The active one is much bigger than the previous one is how 00:14:01.480 --> 00:14:08.330 .