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
Preview
Start a free Courses trial
to watch this video
In this video, we will start learning how to create various components for our page using jQuery. Download the Code Example
[jQuery UI Components]
0:00
[?music?]
0:03
[Jim Hoskins] So now we've created our Hello World! page using jQuery Mobile
0:06
and we can see that all of our JavaScript files have been included
0:09
and we should be ready to roll on developing our application.
0:12
Now, every once in a while, we do want to switch over to our Simulator
0:16
to actually check that everything works in the Simulator,
0:19
so just opening it up and open up Safari.
0:23
I just type in localhost
0:26
just like I would in a normal browser.
0:29
We get a title bar with Local Notes
0:32
and some content for Hello World!
0:34
So the next thing we want to do is start planning out our interface.
0:36
Now, what's really great about jQuery Mobile is that it's very easy to start
0:40
creating widgets like buttons, title bars, list views, and other things
0:43
that you might want in your Mobile application.
0:47
So we could actually get most of that up and running without writing any code ourselves
0:50
and it's a great way to prototype parts of our application.
0:54
jQuery Mobile is also a great way to create quick and dirty prototypes
0:57
for projects that you may not even use jQuery Mobile to ultimately build.
1:01
So we have sort of a homepage right now,
1:05
but it just says, "Hello World!"
1:08
Let's start adding some other widgets into our page.
1:09
So here we have our code, and we have this div which represents our homepage
1:13
and here we have the id of home, which will allow us to navigate to this page
1:17
anywhere in the application.
1:21
So all of the pages in our application are just going to be divs
1:23
within this one HTML page.
1:27
Now, we're going to get a lot of different pages set up here
1:29
so it's good to sort of comment them so you can quickly locate the pages you want to work on.
1:32
So what I'm going to do is just add a comment in above my page
1:37
to mark it as the homepage, and as we start creating other pages,
1:41
we'll add more comments so we can quickly get down to the page we're looking for
1:44
during development.
1:49
So obviously we don't want our homepage to simply just be a Hello World!
1:52
with nothing else.
1:55
We probably want a list of places we can go, like most recent,
1:57
or alphabetical notes
2:01
and things like creating a new button.
2:03
So let's take a look at how we would add a new button in our application.
2:07
Now, one place we could put the new button is in the title bar, right up here in the top right.
2:11
That's a good place to put buttons for actions that somebody is most likely to do next.
2:15
Now, by default, we're going to save this left-hand button for the Back button
2:21
and jQuery Mobile will automatically add a Back button in
2:26
unless we tell it not to.
2:29
And this is good for navigating around, so if we were to dive into another page from here,
2:31
jQuery Mobile would automatically create a Back button in the title bar,
2:35
allowing us to quickly go back.
2:39
But let's right now start working on our new button.
2:41
I'm going to flip back to our code
2:44
and inside of the header is where we want to create our buttons.
2:47
Now, if we create two different buttons inside of this header div,
2:51
it'll put the first one on the left-hand side and the second one on the right-hand side.
2:54
If we want to simply have one on the right-hand side that we specify,
2:59
we're going to have to add another class to it in order to specify it.
3:02
Now, the order in which you put our buttons matters by the way it's going to place them
3:07
by default, but we can overrride it, and so the order doesn't really matter.
3:11
But for my sake, I'm going to put buttons that are on the right-hand side
3:15
after the header, and any buttons that we put on the left side of the header bar
3:18
I'm going to place before the h1 title.
3:24
So to create a button, we simply need to create a link
3:26
with some special data attributes to specify that it's a button.
3:29
So let's start with a simple link and see where that gets us.
3:34
I'm going to create an <a and I'm going to give an href
3:37
and this href is going to be the id of a div
3:41
we want it to navigate to.
3:44
Now, I don't have a page for our New Note form
3:46
but I think I'm going to give it an id of New.
3:49
So I'll give an href of #new, and this means this is going to navigate to the div
3:52
with the id of new.
4:00
Let's just add the label for it, so we'll just say New
4:02
and close our </a tag, and let's see what that gets us
4:06
in our browser.
4:09
I'm going to use Chrome just because it's going to be a lot faster for us to switch around
4:12
and debug, and we'll switch back to the Simulator every once in a while to double-check.
4:16
So when I refresh, we by default get a button here
4:21
and we get it on our left-hand side.
4:24
That's exactly what I said before--that if we only create a single button,
4:26
it's going to place it on the left-hand side of our title bar.
4:31
Now, you'll notice it also gave it a style of a button.
4:34
Typically, we need to add a data-role attribute
4:38
to our <a tag to make it style like a button.
4:41
Otherwise, it will style like a normal link.
4:44
Now, in the header bar, it's not really necessary
4:47
because it automatically assumes that styling,
4:50
but to be consistent, let's also add a data-role of "button" to this <a tag
4:52
and this will tell jQuery Mobile that we want it to behave and be styled like a button,
4:59
and we could see that that nothing changes.
5:05
Now, we're still stuck on the left-hand side of our title bar,
5:08
so in order to change that, we're going to use a CSS class
5:11
which will change its orientation on the page.
5:14
We use a CSS class because where it's placed in the title bar
5:17
is really a stylistic or presentational detail
5:21
and not a semantic detail, so there's not a data attribute for it.
5:24
So in here, we're going to do a normal class= attribute,
5:28
and we'll give it the class of "ui-btn- for button, and right"
5:31
So if we save this out we can refresh, and we can see our new button is now on the right.
5:38
If we check out our Simulator and refresh it,
5:43
you can see that it's starting to look good.
5:47
We have a new button on the right.
5:49
Now, as you click it, you can see that we don't actually navigate anywhere
5:51
and it popped up a little error before saying that there was an error loading the page.
5:55
We'll fix that a little bit later when we actually add our page into our web application.
6:00
You need to sign up for Treehouse in order to download course files.
Sign up