Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating our page templates

From: jQuery Mobile Web Applications

Video: Creating our page templates

Now that we have some data going into our application, it's time to start It's a really good idea to create comments when you're working with jQuery Mobile.

Creating our page templates

Now that we have some data going into our application, it's time to start creating the templates that we're going to use to display that data to our users. Now so far I have just a homepage on our application, and right after the homepage, I have sort of a fake page called info that's not really doing anything. So what we're going to do is just delete all this, plus this other Hello World that's down here. And just get rid of it. And we'll start writing the templates we need to display our data, but we're going to need two things.

We're going to need a page that's going to display the block posts and then another page that will display the information in each post. Let's go ahead and start by creating the block page. I'm going to go ahead and create some comments here. It's a really good idea to create comments when you're working with jQuery Mobile. And then, I'm going to create a section. I like to create all my pages with a section tag, and I'll give this an ID of blog, and then a data-role of page. And I'm going to give this a title. I'll put a data-title attribute.

Now a data title attribute is something I'm completely making up. It doesn't exist. That's one of the nice things about the data attribute. Jquery mobile uses it in order to create elements. Like, for example, our page here is created by using this data roll page attribute. I'm going to create a separate one called data title that I will use later on. So I'll call this the block page. And then inside that I want to create a div and that div will have a data roll of content.

And I''m going to give it an id because, what I'll do eventually, is I'll flow some information into this div. And this will be postlist. Alright, so we have sort of the shell of our page right now. Let's go ahead and add some comments so we don't get these confused later. This is our page, I'll say it's a blog page. And we'll make that into a comment. And this is our contents, so I'll type in content. Make that into a comment. And this is essentially the shelf for our page. Now, I am going to go ahead and copy the footer and the header from the previous page.

And as a matter of fact, I'm going to cut it because we don't really need this footer with all these icons down here on the home page. We've already got them up here. So I'll just grab them. And cut them from here, and then place them right here in our block page. Let me go ahead and indent that a little bit better. And let me go ahead and copy the header. I don't think I need the header on the homepage either, because it's really just good enough to have this logo here. And, I'll take this section, right before the content, I'll piece this header.

Lets go ahead and save that. One more thing I'll do is link this blog tag to our new blog page and then I'll come down here and I'm going to just put some sample content for right now. So let me do again h-one welcome and P save this and refresh our page. We should see the header and footer disappear and then if we click on the blog page we should see this page that looks like this. So that takes care of our blog page and eventually this is going to be a list of our articles from our blog and what I want to do is once I click on an individual article, I want to read the contents of that article.

So I'm going to need to create a placeholder for that other page. I'll create another section right here. This section is going to have, again, a data role of page, and then it's going to have an ID of blog post. And then inside that it will have a div with a data role of content and in there I'll insert a placeholder another div with an id of my post. So what's going to happen eventually is this page right here is going to be populated when somebody clicks on one of the list items that we're going to place on this page.

Let's go ahead and add some comments to the pages the more comments you put on a jQuery mobile page the better so I'll grab this Comment up here. And make sure that I added to our second page over here. So, now that we have a good template we're ready to start populating it through our java script. We'll do that in the next movie.

Show transcript

This video is part of

Image for jQuery Mobile Web Applications
jQuery Mobile Web Applications

37 video lessons · 4305 viewers

Ray Villalobos
Author

 
Expand all | Collapse all
  1. 2m 59s
    1. Welcome
      58s
    2. What you should know
      1m 12s
    3. Using the exercise files
      49s
  2. 44m 29s
    1. Downloading and installing jQuery Mobile
      12m 3s
    2. Creating a page
      6m 1s
    3. Using buttons
      8m 11s
    4. Adding control groups
      5m 22s
    5. Creating a header toolbar
      7m 3s
    6. Adding icons to a footer toolbar
      5m 49s
  3. 43m 46s
    1. Creating JSON feeds from WordPress
      7m 11s
    2. Importing feeds into our application
      6m 45s
    3. Creating our page templates
      5m 18s
    4. Populating filterable list items dynamically
      10m 31s
    5. Adding thumbnails to our list items
      5m 19s
    6. Fixing potential link problems
      2m 54s
    7. Adding a more information page
      5m 48s
  4. 20m 52s
    1. Creating dynamic toolbars
      7m 49s
    2. Adding a headline to our toolbars
      3m 18s
    3. Injecting a footer
      4m 45s
    4. Highlighting the active toolbar link
      5m 0s
  5. 35m 34s
    1. Preparing pages for our feed
      4m 34s
    2. Understanding the YouTube API
      4m 58s
    3. Parsing the YouTube feed
      9m 36s
    4. Adding thumbnails and links
      6m 27s
    5. Playing our video
      5m 53s
    6. Styling our YouTube elements
      4m 6s
  6. 27m 47s
    1. Working with a feed from Flickr
      8m 38s
    2. Parsing data from the Flickr API
      9m 39s
    3. Displaying photos on a separate page
      3m 28s
    4. Styling a responsive grid
      6m 2s
  7. 27m 51s
    1. Setting up a Twitter account
      4m 32s
    2. Understanding the Twitter feed
      3m 24s
    3. Parsing data from the Twitter API
      4m 35s
    4. Styling our Twitter feeds
      3m 31s
    5. Processing Tweets through regular expressions
      6m 35s
    6. Finishing our app
      5m 14s
  8. 2m 2s
    1. Next steps
      2m 2s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery Mobile Web Applications.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.