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
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
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up