Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:42 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: Essential JS Libraries for UI (User Interfaces)

Welcome to the Course

00:36
  • Overview
  • Transcript

In this short course, you’ll be introduced to a number of lightweight JavaScript plugins that are designed to solve common user interface problems. You will learn how to use these frameworks to create modals, date selectors, animated menus, and more.

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Welcome to the Course

Hello and welcome to Essential JS Libraries for user interfaces. My name is Craig Campbell and I will be your instructor for this course. In this short course, I want to introduce you to a few lightweight JavaScript plugins that I've come across that help to solve specific user interface problems. We'll take a look at a JavaScript modal, a date picker for working with forms, an off Canvas navigation menu, and a couple of other lightweight plugins. So I want to thank you for watching this course and in the next lesson, we'll get started.

2. JavaScript UI Plugins

2.1 Modaal

Hello and welcome back. In this lesson, I want to introduce you to the Modaal Framework, which is a simple jQuery plugin that allows you to very, very easily create some light-weight modals using JavaScript. And we'll talk in this lesson about how to create normal text modals as well as some image galleries using this framework. So you can find the framework at humaan.com. And that's humaan with two As in it, forward slash, modaal with two As in it. And I'll include that link in the course notes for this lesson. But once you get to that page, you can scroll down and see a lot of information about the framework. And this is where you're gonna find a lot of the documentation. And so if you need more details about the framework after we're done with this lesson, this is the place where you would go. And you can click on the Download From GitHub link to jump over to GitHub. And over here is the clone or download link. Here you can open in your desktop if you have the desktop GitHub app, or you can click on Download Zip. And that will download a zip file that contains all of the folders and files that we see here. Now, for the most part, what we need is gonna be in the dist folder. If we click to go into that, we'll see a CSS and a JavaScript folder, and those will have all the files that we need. So I've already downloaded all of these locally. And if you open up your Project Files folder for this course, you'll find a folder called 01_Modaal. And if we double-click to go in that, you'll see a site-start folder. These will be our starting files for this project. And I'm just gonna copy paste that. And I'm just gonna change our final copy to site. So again, our site-start folder will have our starting files and the site folder itself will have the files that we're gonna end up with in this course. So I'm gonna right click on this site file. And I'm gonna open that up with Code. I'm using Visual Studio Code here as my editor. And you certainly don't have to, you can use whatever code editor you want. But in our folder, you'll notice we have an index.html file as well as our JavaScript folder which contains modaal.js and modaal.min.js. We're going to be using the minified version. Same thing with our CSS, we have modaal.css and modaal.min.css. And there's even a Sass version if you prefer to use Sass. We also have an images folder, which we're gonna get into later on, but that has a number of images and their thumbnails. And let's take a look at how this works. So you'll notice in the head of our document, we have a link to the Modaal style sheet, modaal.min.css. And that's in our CSS folder over here, and that just contains the basic styling for the framework. And then at the bottom of our body, just before our closing body tag, we have our script tags. Our first script tag here is for jQuery. We need to make sure we include jQuery before we include modaal.min.js. And then after jQuery we have our modaal script tag, and then after that we have our custom script tag where we're going to be coding everything that we need in this lesson. So what I wanna do is first I wanna create some content that we can use as a modal. And we can use whatever type of content we want here. I'm gonna use a div, and I'm gonna give it an id of myModal. And then I'm going to also give it an inline style, usually I would frown on inline styles. But in order to keep everything nice and simple here, all we need to do here is to give it a display of none. So then inside this div, I'm just going to grab some text and copy it. So that we'll have some content inside this modal div. So right now, if we were to look at this page, all we would see is this h1, because this div has been set to a display of none. So we could save that. Let's open this open up in explorer and double click on it to see it in the browser. And sure enough all we see is that h1. So let's jump back into our code. And let's add a link. And this link is going to open up our modal for us. So before we get to the modal, maybe underneath this h1 here, I'm gonna create an anchor tag. And for href, I'm gonna point to the id of the div that we're using for our model, but I'm going to use the pound sign. We're basically using a CSS selector here, so I'm gonna point to myModal, with the pound sign at the beginning. And then I'm gonna create a class here. And you can call this class whatever you want to. I'm gonna call it modal-trigger. And then we'll just put some text inside that anchor tag. Now, once again, if we were to save this, jump back into our document and refresh. We now see a link there, but we see that that link is not doing anything for us. So we need to use some JavaScript here to make that link active. And we're gonna see just how easy this is to do. So we're gonna scroll down and in our script section, you'll notice that we have this jQuery shorthand for the document ready function. So everything that we want to run once the document has finished loading will run inside of this function. So in between the curly brackets for this function, we're gonna type one simple line of code to get our modal functionality working. So using a jQuery selector, we're gonna type $, parenthesis. And then inside quotation marks I'm going to point to the CSS selector for our link that we want to click on. And our link has a class of modal trigger, so I'm gonna say .modal-trigger. And then all we need to do to get this to work is to type .modaal, again, don't forget modaal has two As in it in this framework. Open and close parentheses and a semicolon to end your statement. That's all we need to do to get this to work. So we are going to save our file, jump back over to our browser and refresh. And now when we click on our link, we see a very nice modal pop up. Now, the great thing about this modal is that it's very lightweight. It doesn't have a lot of default styling to it, like a Bootstrap modal would have. So you can style it up to look like whatever you want. So that's a basic modal. We can do a little bit more than this if we want. For example, let's say that I wanted to open up an image. Let's make another copy of our index.html file here, I'm just gonna copy and paste that. And then I'm gonna rename it, let's just call it image.html. And this time,for our href here, instead of pointing to the div that we want to open, I'm gonna delete this div. Remember, we're in a new file here now, image.html. So I'm not deleting anything in index.html. I'm gonna delete that div. And then for our anchor tag here, I'm going to change this, first of all, to say open image instead of open modal. And just to show you that you can use whatever class name you want, I'm going to change this from modal trigger to, let's just call it image. And then for the href, this is the key here, we're going to point to our image in the href. So, our images are located in the images folder. So I'm going to point to images/, and then there are a number of images in that folder, I'm going to grab nature-12.jpg here. And so we're pointing to that image now. So since we've changed the class name, we also need to change the class name on the modal instantiation down here. So now we're pointing to .image.modal, and let's see if that works. I'm gonna save that and we're gonna jump over to our browser and we're gonna navigate to image.html. And here is our link, let's click on it, and we see that nothing happens. And the reason for that is, by default, this modaal framework is designed to work with another element on the stage and it's going to open up that element in a modal. And that's not what we want here. What we want is we want to point to an external image and pull it up in the form of a modal. And all we really need to do to make that happen is to add a little bit to our modal call here. So inside the parentheses for our modal instantiation, I'm gonna put a set of curly brackets there to indicate a JavaScript object. I'm going to nudge that closing curly bracket down a couple of lines. And here we can put any number of property value pairs, and the property that we're looking for here is called type. So we're gonna say type, colon space, and then we're gonna type out the type of modal we're showing here inside quotation marks, and the type here should be image. And that's really all we need to do to get this to work. So if we were to save that, and the refresh our page. Click on Open Image. There we go. So we have the same effect that we saw before. But instead of loading more content that's on the same page, we're actually loading an external image. But we get that same really nice feeling there. And so let's go back to our HTML and let's talk about how we could take this a step further and turn this into an actual image gallery. So I'm gonna create another copy of image.html and I'm gonna rename this new copy gallery.html. And we're gonna do something very similar to what we've already done. Here we're pointing to nature-12.jpg in our href, and we've given it a class of image. I'm gonna add one more property to this, and this property is called data-group. And we're just gonna give that data group a name, and I'm gonna call it nature. And let's minimize this a little bit so we can see a little bit better. So again, we've called that data group nature. And now what we can do is we can create a number of different links here that are pointing to the same data group and it will group them all together in one image gallery. And so you don't have to watch me type all of that out. I'm just gonna copy these and paste them right here, I'm gonna replace what we have here, and let's take a look at what we've done. So we have a number of images here, they all have a class of image and they all have a data group of nature, make sure they all have the same data group name. And then inside our anchor tags, I've also put an image and these images are basically just thumbnail versions of the full size images. So these are different images then we're linking to. Again these are much smaller thumbnail versions of them. And the great thing about this is, is that this data group will take care of the entire functionality force. We don't have to do anything else in our JavaScript to get this to work. So we could save that, jump back into our browser, and instead of image.html, we jump over to gallery.html, and now we have a series of thumbnails. Obviously you'd want to style these up a little better, but it's a good starting point. And when we click on one of these thumbnails, we get that same modal treatment we got before but now you'll notice there is a little arrow next to it. And we can hover over that arrow and click on it and it will animate to the next image, it will animate the size of the container here. And that's a really nice effect. And so with just a little bit of HTML and JavaScript, we're able to make really great use of this Modaal framework. And again, it's a very light weight framework, so it's not gonna take up very much room. So if you want to use modals, but you don't want to use the whole Bootstrap framework just to get the modals, then you can use a framework like this. Now, one more thing I do want to point out real quick, if we go back to our index.html page, we have a link here, and by default it's set to work with these links, let's go back to index.html. Again, by default, it's set to work with a link, and our link is pointing to the id of the element that we want to treat as a modal. But just so you know, we could also get this to work with a button. So let's comment out our anchor tag here. I'm just gonna comment out so that you can uncomment it later if you wanna look at our source code. And I'm gonna create a button, I'm gonna give this button a class of modal-trigger, the same class we were using before, modal-trigger, and then we'll just say Show Modal. So there is our button, but in order to get this to work with a button as opposed to an anchor, because remember with a button we can't use this href. And that href is the key to getting our anchor to trigger that modal, and we no longer have that href property available for us with our button. So we have to do something a little bit different, and it's actually very, very easy. We just need to add something to our modal call. And what we need to add to it, again, I'm just going to copy and paste that line. And I'm gonna comment out that first one so that you'll still have it available. And all we need to do here is, again, add a JavaScript object. And inside that JavaScript object, we're gonna point to a property called content_source. And we're gonna give this a value that is basically the CSS selector for the content of our modal. So this has an id of myModal, so inside quotation marks we're going to say #myModal, and that's all we need to do. So if we save that, jump back into our browser, and refresh. Now we have a button instead of a link, and when we click on it, it still works. So there are a couple of different ways that you can get the modal to work. Now as far as I'm concerned, you could just use an anchor tag either way and then style it like a button if you want. But I just wanted to show you that there are a few options there, this is a flexible framework. And again, it's very easy to use, it's very lightweight. So thank you for watching and I'll see you in the next lesson.