Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video, we take a look at more advanced options that are available when defining components in jQuery Mobile.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up