From the course: jQuery Mobile Essential Training

Slider and flipswitch widgets - jQuery Mobile Tutorial

From the course: jQuery Mobile Essential Training

Start my 1-month free trial

Slider and flipswitch widgets

“

jQuery Mobile also provides support for certain kinds of form controls that you typically see in native applications but don't yet have native browser equivalents. Well, at least not in all browsers. Some browsers have them but some don't. So, in this movie we're going to take a look at slider and flipswitch controls. So let's start off by looking at the slider control. And you can see here in the snippets I've scrolled down to the sliders and flipswitches section in the example snippets. So let's open up slider_start, and what we're going to do is in the snippets, going to copy this form right here. And we will paste it into this section here. So, all I'm doing is saying input type equals range. And I've got a name and an ID for it, and I have a starting value, as well as a min and a max. Now most of the newer modern browsers on the desktop support these. If you view this in a desktop browser you'll see a nice little slider control. Not all of the mobile browsers support them just yet but they're getting better. But jQuery Mobile papers that over for you. In a browser that doesn't support it, it will simulate it. And in browsers that do support it, it will show it in an nice, enhanced, native-looking way. So, all I'm going to do is save this, okay, and run it. And we'll bring it up in Firefox. And you can see that the slider control has both a slider component, as well as a number. So as I move the slider, you can see that the number gets larger and smaller, but I can also type in numbers, and as I type numbers in, you can see that the slider is adjusting to display the right value. So that's a slider control. Alright, so let's go back to the code, and now let's open up the flip_start, and this is a toggle switch or a flipswitch in the parlance of jQuery Mobile. So let's scroll down a little bit, and let's copy this form, and we'll paste this into the content section. Alright, now there's a couple of different ways to define what's called a flipswitch. And you've probably seen these before. So actually let me just run it to show that to you. And then we'll come back and look at the code. So you've probably seen these, right? You've got these, like, little toggle switches that you can turn on and off. And again, it looks nice and native. So let's go back to the code. The first way to define a flipswitch is to use a select list. This is a native browser control right here. Normally this would show, like a dropdown menu, or, you know, some other kind of select option thing in the native mobile browser. But what we're doing here is applying this data-role equals flipswitch attribute and that tells jQuery Mobile to override what the browser would normally do and display this as a flipswitch control, which looks like a native control on most modern smartphones and tablets. And you can see here, once again, I've got a fieldset with the ui-field-contain class, things you've already seen elsewhere in this chapter. And, inside the select list, I'm using the option tag to define the two states for the select list. Now, in this case, I've got a value of no and a value of yes, and the default selected one is the no option. So once again, if you go back to the browser you'll see that, that's this guy right here, the yes and the no. Okay, so let's go back to the code. The other way to define a flipswitch is to use what's called a checkbox. So here, in this fieldset, I've got my checkbox. And in this case, I've got the default value to being checked, and, once again, to make it a flipswitch I just put data-role equals flipswitch on the control. Now, in this case, I don't have values, so it's going to use the default values that come with the flipswitch. So if we go back to the browser, you'll see that that's basically on and off. So if you want more control over the values that you can put in your flipswitch, use the select list option. If you're just happy with on and off, just go ahead and use a checkbox.

Contents