FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.4 Checkbox & Drop-Down

Firstly we’ll look at the checkbox, how to change the appearance and add in a few callbacks. Next we’ll look at how to add in a drop-down that will allow us to select a title.

6.4 Checkbox & Drop-Down

Hi guys, welcome back to Getting Started with Semantic UI. And in this lesson, we're gonna continue on adding content into the contact page. So just before we take a look at the check box module documentation, I'd like to move this check box down a little bit, so it's more in line with the bottom. So the way I'm going to do it is target that check box element, and then I'm gonna add the ID of agree. Then I'm gonna take a look at the CSS, and underneath the CSS comment contact page, I'm gonna target the element with that ID. And then I'm gonna set the margin top to 8 pixels. And that way, it'll just sort of bring it more in line with the button. So if I hit refresh, and you'll see it moves down a little bit. So now I'd like to take a look at changing the styling for the check box. So you don't just have to stick with the standard check box. You've already seen that we can make it look like a radio button. Even if it's on its own, you can still make it look like a radio button. But you'll also notice that when I try and click again, it doesn't toggle it on and off like a normal check box. Then also you have a slider type. So if we add the class of slider onto there, the semantic UI will make it look like a nice little slider. And again, you must make sure that you have your JavaScript in here that says, make sure you format it as a check box, otherwise this won't work, the slider in the regular check box, and also the toggle won't work as well. So if we set this to toggle, it's gonna change it to a toggle switch. A lot like what you see with the iPhones and mobile interfaces. And so there are your variations. You also have different sizes. So you have the normal size, which you don't have to define any size for that. Then you have large. So if I save that, you'll see that it'll get a little bit bigger. And then you also have huge. So if I save that and hit refresh, you can see it goes absolutely massive. So now that we have our nice little toggle check box, I'd like to take a look at a few of the behaviors. So if you review the documentation, underneath Usage, and you scroll down, you will find all the different behaviors. So you have enable, disable, and also toggle as well. So I'd like to take a look at targeting the submit button. And then I'd like to toggle this check box. So the way I'm going to do it is by targeting the element with the ID of submit first of all. Cuz we need to listen out for an event. So I'm gonna say on click. So when the user clicks on that button, we are going to run a function. Once I've done that, I can then target the check box. And I want to target a specific check box, which, as you know, the check box has the ID of agree. Then I can run the checkbox method, and then I can pass in some behaviors. So, we have toggle first of all. So I'm just going to save that and hit refresh. So that will toggle the state. We can see there it's toggling. Then also I can set the check box to originally be enabled. So I can say enable, and then I can say when I click on the submit button, I want to disable the check box. Now, it's enabling and disabling the value, it's not actually enabling and disabling the component itself. So if I hit refresh, you'll be able to see that automatically it's enabled, it's in the on state, so it's ticked, effectively, or checked, because I've told it to there. But when I click the button, I want it to go to disabled or the off state. So these are disabled, this one is enabled. So there is the behaviors that you have available to you. And I'm just going to delete that out, and we'll also delete that out as well. So now I can take a look at a few of the settings, and a few other things as well, such as callbacks. So you have onEnable, onDisable, and so on and so forth. So let's take a look at some callbacks. I can say onEnable, so let's do that. So I'm just going to pass in onto this method an object that contains our settings, if you wanted to put some settings in here, or our callbacks. So in our case, we had onEnable. And when they do that, it's going to run a function. And then we can do what we like. So I'm just going to use the console again. And I can say log this into the console. And it will be just a basic string saying, You Agree. And then we have onDisable. So what I'll do is, I'll bring this onto a new line. And we can copy this out. And then we wanna put in a comma right here, because we have one property, a key and a value. And then we need another property or key and a value. So we have onEnable, onDisable, and then we're going to log into the console that if they disable it, they disagree. Finally, we have the onChange, which is not gonna give us any specific information whether they've accepted or denied, but it's just gonna tell us if it has changed. So I'm just gonna say onChange, and then I can say it's changed. So now I can save that. And we can take a look at this inside of the browser. And I also want to open up the console. So let's bring this guy in, and let's bring this guy in just like so. And we can click. It said it's changed. So it's gonna say that whenever we enable or disable. But, however, you can see there that this right here, has called back and said, You Agree, cuz we've enabled it. And then, of course, we can disable it, and it says, yep, it's changed again. And it's also fired the onDisable callback, saying, You Disagree. So there are some of the callbacks that you can pass in. And then of course, you have your settings. You're very limited on settings here, it's just required, which is auto, and contacts, which is set to false, it's a Boolean. And then also you have a few DOM settings for your selectors, and also the class names as well. So now that we have delved into the API of the check box module, I'd like to move on and take a look at putting in a drop-down. Now, you may have seen this line of code right here. And you're probably going, where did that come from? Well, that came from me experimenting earlier on. And we're gonna take a look at the JavaScript side of the drop-down in just a second. So I'm just gonna take that line out. And then we can focus on the DOM, first of all. And I want to change the title field. And I don't want that to be just a little input. What I'd like it to be is actually a nice drop-down where they can select their title, such as Mr, Mrs, Miss. So. Let's open up this grouping of fields that we have. And we have the two wide, and then we have the input, which I'm going to strip out, and there I want to put in my drop-down. So now let's take a look at adding that drop-down into this field. So I'm first gonna create a div with a class of ui. Then also I want to put the class of dropdown in here, so then we know to put the dropdown styles on there. But also, I want to add on the class of selection, because I want that selection styled dropdown. Then the next thing we're gonna do is take a look at adding in an input. Now, even though on the documentations page, you didn't actually see an input. But if you view the example code, you will find that there is an input. And the input simply stores the value of the menu item you've selected, and then the data from that input can be posted to the server side. So you can't see this input, so the type needs to be set to hidden. And that way, it can store the value without being seen. And then I'm gonna add an ID on here for a later date, when we're gonna check the value in JavaScript. So we'll give it the ID of value. Then I want to create a div that's gonna contain the default text, and also it can have a bit of styling on there as well. So I'm gonna say, default text. And then inside of there, we can have the default text, just Title. Then we can have the icon. So we're gonna add the i tags with the class of icon, and we want the dropdown icon. So it just has a down arrow on there that indicates to the user that there is a menu to be dropped down. Then also we can have a div with a class of menu that's gonna contain our menu items. So inside of the menu, we want to put in a div for the class of item. So this is one item in the menu. And we also want to have the attribute of data-value. And what happens is, JavaScript will take the value of this attribute and then it will put it inside of the hidden input, and then that can be posted to the server side. So typically with a value, you would have it in an incremental fashion, so we could have it 0, 1, 2, 3, so on and so forth. And then inside of there, I'd like an icon. So let's go ahead and add in the i tag with a few classes. I want this to be an icon. I want it to be the user icon. Let's make it circular. And then also I want to invert it, so I'm gonna say inverted. So we fill up that circular icon with a background color, and that color will be teal. And then we can have the text right next to it, so I can say, Mr, and then I can copy that out and paste it twice. Now, don't forget, we need to change the values of the Ys. When we post it to the server side, no matter which one they select, it's gonna look exactly the same, like they've made the same selection. So we wanna make sure that we increment it, so 0, 1, 2. We could have it the opposite way around, it doesn't really matter as long as the values are different. And then, of course, we have Mrs. and Miss. So after we have this, we can go ahead and save it, and then take a look at refreshing this inside of the browser. So now we have our dropdown, which, the DOM is working correctly, but however, we need to put the JavaScript in here so when we click, we open up the menu. So let's go ahead and move over to script.js, where we can target any element with the class of dropdown, and then we can run the dropdown method. And as long as the DOM is correctly formatted, then the method will work perfectly fine. So if I save that and we hit refresh, you'll now notice we get our nice little menu. You have the icon in the menu, item, and also the text as well. Now, you'll notice that this menu is actually a bit larger than the dropdown. So what I want to do is set it to fluid. So right here with the main dropdown div, I want to set it to fluid. And when I do that, you'll notice it'll be fluid to the parent container. Now, it's nice and large, and also the menu is fluid as well. So there is my dropdown. So very quickly, let's take a look at opening up the console. And then, once we have the console open, let's take a look at selecting a menu item. And then, don't forget, I can target the invisible input right here by targeting the ID of value. So let's use a bit of jQuery, and I wanna target the element with the ID of value, and then to get the val, just run the val method. So now I've selected Mr. It will give me the value of 0, because that's what I set the value down here. Now, we can also take a look at the behaviors as well. So if we scroll back up and take a look under Usage, we have quite a few behaviors to choose from. So I'm gonna choose set selected and also set text. And that way it will show you some of the options available to you with your behaviors. So what I'm going to do. And scootch on over, and we want to target the drop-down itself. So we want to target the element with the class of dropdown, and then we want to run the dropdown method. And as you know, behaviors are passed in as strings. So the first behavior we're gonna take a look at is set selected. And then, it wants a value. So the value should actually be a number. So I can say, set this to 2, so that's the very last menu item. So if I say 2, and you'll notice, it changed to Miss, which is the very last one. And I can take a look at copying that, pasting it below. And possibly setting this to 0, which is the very first menu item. Again, depending on how you've actually valued your menu items. Then also we have the ability to set the text. So if I paste this in and we say, set text. And then it wants to have some text right here as the second argument. So, that's gonna be a string, and I can just say something like hello. So once I do that, you'll notice it sets the text of the drop-down. Then let's take a look at the callbacks. And there's one callback that I'm very interested in. You do have a few settings there that are available. But the callback that I'm gonna look at is the onChange. And you'll notice, we have value and text. And these are arguments that are being passed in to the callback function. So if I take a look at my script.js file, we have the dropdown method, and there we can pass in an object literal with settings, but also, we wanna take a look at the onChange callback. And we're gonna run a function. And the function has a value and text argument being passed in, and then we can say console.log, and then we can log the value and also we want to log the text. So let's go ahead and save that, go back, hit refresh. And you'll notice that when I click, you will get the value and also the text as well. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll take a look at form validation.

Back to the top