HTML5 Mobile UI: UI Components: Part 210:23 with Jim Hoskins
In this video, we take a look at more advanced options that are available when defining components in jQuery Mobile.
[Jim Hoskins] So we've created our button and it's new, 0:00 but it would be nice if we had a little icon there with maybe a + 0:03 to indicate that we're going to be creating something. 0:06 That's something that jQuery can handle for us, so let's actually take a look at the documentation 0:09 to see where we would find all of this information. 0:13 So I have the jQuery Mobile documentation open 0:16 jquerymobile.com/demos/1.0a3 0:19 and most of the actual examples are going to be down here, in the Components section. 0:21 Now, everything you want to know about buttons is going to be within 0:25 this part of the documentation. 0:28 So here's just a basic overview of how we create a button. 0:30 We can see that they're showing you how to create the data-role of a button 0:33 and create a normal button, 0:38 and we can see that we can use a lot of different types in order to do that. 0:40 There's a lot of different ways to create a button with inputs or <a tags 0:43 or the button tag, 0:47 and we see that there's options for creating button icons, 0:50 so let's take a look in here. 0:53 Now, the documentation says in order to do an icon, we need to give it the data-icon attribute 0:55 and we want to give it one of the values, 1:01 so let's take a look at the example values that we have down here. 1:03 So we have an arrow left, we have an arrow right, up, and down, 1:06 we have an X button for something like delete, 1:11 we have a +, which looks good for us, 1:13 we have a minus, a checkmark, gear, refresh, a forward, back, 1:16 a grid button, a start button, alert button, info button, home button, and search button. 1:25 So all of those, I think for a new button, our + is going to be the best one 1:32 that we can use, so if we go up here, we see that all we need to do 1:36 is give it the attribute data-icon of "plus". 1:40 So going back to our code, inside of our <a tag here, 1:43 we're just going to add data-icon="plus". 1:46 And if we save it out and go back to our code, 1:52 we can see we now have a + added to our button. 1:56 Creating buttons isn't something we can only do in the title bar. 2:01 We can actually create styled buttons within the content of our page. 2:04 So let's try that out and replace our Hello World! with another new button 2:07 that's going to do the exact same thing. 2:11 So I'm going to remove this Hello World! here 2:13 and let's do the same thing--we'll create an <a with an href="#new" 2:16 give it a label of New Note 2:21 and close our </a tag. 2:26 So I'm going to save this out and show you exactly what a link looks like 2:27 in any other context. 2:31 So if we refresh, we can see that it's just a styled link with an underline 2:33 and a blue coloring to it. 2:38 It's not by default a button like it is when we add a link into the title bar. 2:41 We do actually need to add a data-role attribute to our <a tag, 2:45 so let's do the data-role="button" 2:50 and when we refresh it, 2:53 we can see we get this nice white button that says New Note. 2:56 Now, it looks very wide; especially on this, and that's just because 3:00 buttons by default take up a large amount of space. 3:03 It will look a little better on a mobile device, so if we refresh it, 3:07 we could see we have the New Note here, 3:10 and we can see it fills the space no matter how we have our device oriented. 3:12 Now, we also want to add the data-icon="plus" 3:17 to give it its + icon. 3:24 And if we go back, we can see we now have the icon there. 3:26 Now, I'm not really a big fan of this white button on a gray background. 3:29 and that's something that jQuery Mobile makes really easy to change, 3:33 and jQuery Mobile allows us to do this using themes. 3:36 Now, you may think of themes as something you apply to an entire application 3:40 so maybe something that skins the entire application. 3:44 And while it does have different themes in that respect, 3:47 it also has the idea of themes within a theme. 3:50 Basically, different color schemes within the same theme 3:53 and those schemes can be used for different purposes 3:56 to communicate different information. 3:59 To find out more about that, we can open up the jQuery documentation again 4:01 and we can look at the theme framework. 4:09 Now, it gives us a nice overview of what it's used for, 4:11 but we can see that there are five different themes within each theme. 4:14 By default, we've seen the A theme, which is a dark bar, 4:19 but there's a B, C, D, and E theme. 4:22 So what we want to do is sort of switch between these five different themes 4:24 within our application to communicate different ideas. 4:28 So here, we can see how different widgets are themed differently 4:35 based on their theme within the actual application. 4:38 Now, this is all done using the data-theme attribute 4:41 just like any other data attribute. 4:45 We can change the theme at almost any level of our application, 4:48 so if we want to change the theme of an entire page, 4:51 we could add the data-theme attribute to a page div 4:54 or we could just do it for a header, or even something like a single widget, like a button. 4:57 So I'm going to do that right here, and I'm going to add the attribute data-theme 5:02 and then all I need to do is give it the theme I want to do, 5:08 which would be A, B, C, D, or E. 5:11 Now, some theme sets may have more or fewer themes to them, 5:13 but the default theme has A-E. 5:17 So if we did data-theme="a" and we go back to our code and refresh, 5:19 we can see that the theme for "a" is very dark. 5:25 Now, if I wanted to try theme "b" 5:29 we see that it's a nice blue, it catches your attention, 5:33 it looks pretty good. 5:36 Let's try theme "c." 5:38 Now, here's where we get the white one, so "c" was the default 5:41 in this particular context. 5:44 The default theme will actually change from context to context. 5:46 You can see right here in the title bar by default this button with the A or dark theme. 5:49 Let's look at "d." 5:55 That's even lighter; not really what we're looking for. 5:57 And finally, let's try "e." 6:00 Now, it really catches your attention, but I'm not really a fan of it. 6:02 I think of all these themes, "b" really makes sense for this button, 6:05 so I'm going to leave this as "b" 6:08 and that looks pretty good. 6:10 Just to show you, let's actually change the theme of our entire page. 6:13 So up here, let's do data-theme="b">. 6:18 So if I refresh, and this is how our theme would look 6:22 if our entire page was themed with the "b" theme. 6:26 Now, I don't really like that, so I'm going to go ahead and remove it 6:29 and leave the default theming hierarchy as is. 6:32 So now we've created two buttons that really do the same thing, 6:36 which is actually nothing right now. 6:39 We just get an error. 6:42 But let's add another thing, which would be a list view 6:44 which will allow us to dive into different lists of notes that we've created. 6:47 Now, I'm going to have our two different lists be the alphabetical lists of notes 6:51 based on the title as well as-- eventually when we add our geolocation in-- 6:56 the notes nearest to us. 7:00 So what I'm looking for is a list view, 7:02 and we can see an example of that if we go back here and take a look 7:05 at our List Views page in our documentation. 7:09 So if we take a look at the documentation here, 7:14 we can look at different examples by looking right here. 7:17 So this is one view we could use which is a sort of edge-to-edge view 7:21 if something's taking up the full page. 7:25 This would work in some cases, but I think for our homepage, we want something 7:28 that's sort of inset. 7:32 So if we take a look here, we can find different types of lists 7:34 The one I'm looking for is inset list, which give us this sort of grouped list that's sort of 7:44 inset from the rest of the page and can be used independently 7:50 and it doesn't have to take up the entire page. 7:54 In order to do that, we're just going to have to add another attribute to our list. 7:58 But the basics for creating a list view is to create an unordered list 8:03 and we're going to give it a data-role of list view, 8:09 which says I want this to be a list view widget. 8:12 Again, we can theme this, just like anything else, 8:15 but then the <li items within our list view are going to become those nice little buttons. 8:18 So let's go back to our code, and just below this new button in our content, 8:23 I just want to create a <ul. 8:27 Let's just bring this up on the page a little bit. 8:32 We'll give it a data-role="listview">. 8:38 Now, inside of this, I just want to create list items, so an <li 8:45 and our first one we will make an <a tag and this will make it a link to another page. 8:50 So let's do <a and href, and we'll call our alphabetical list #all> 8:55 and we'll say All Notes, at least for now. 9:02 We can change this a little bit later and make sure to close our <a tag 9:06 and let's see what we get when we load it in our browser. 9:11 Flip back to our code, and so far, it doesn't look all that great 9:15 because we haven't made an inset, so it's going edge-to-edge here, 9:21 and it's sort of eating up this button because this style of link 9:24 is not really compatible with having other things in our content view. 9:28 So if we go back, we can add data-inset= attribute 9:32 and we'll call this "true". 9:39 And if we refresh, we can see this changes the style to inset 9:43 so it can cooperate with other items in our content view. 9:47 Now, let's just add another item into our list view. 9:51 We'll call it "#nearest" 9:54 and we'll say Nearest Notes. 10:01 So if we refresh that, we can see that it now has the rounded corners 10:05 on the top of the first one and the bottom of the second one, 10:10 and then it has the appropriate borders between the two of them. 10:13 Now, of course, if we click them, we're not going to get anywhere, 10:16 but it's going to work once we add the pages into our application. 10:20
You need to sign up for Treehouse in order to download course files.Sign up