Join Joseph Lowery for an in-depth discussion in this video Incorporating images with lists, part of Building Android and iOS Apps with Dreamweaver CS5.5.
jQuery Mobile has a very cool way to spice up your list with images.…The best thing is that it doesn't seem like a technique. It's that simple.…All you need is a data-role attribute set to List View and a handful of images.…Here, you can see an example of the opening page of the Trail Guide app.…Now, instead of a simple text list items, we have an image for each item.…Let's flip over to index.html and I'll show you how that's done.…So we are looking at this list of links here and as you can see here is already…a data-role of listview.…
That's what gives us the bars going straight across.…To add the images to it, all you have to do is make sure that you place the…image as the first entry after the link.…If you do that, jQuery will automatically size the images to make sure that they fit.…So I am going to go up to the Insert menu and choose Image.…And here I just want to put in my trails_thumb image.…Now when it comes in, I'll click Choose and put in Top Trails as my…Alternate text, click OK.…
- Understanding the mobile app toolset
- Working with jQuery Mobile and mobile starters in Dreamweaver
- Applying an overall theme to an app
- Specifying Android settings
- Simulating the iPhone
- Setting up mobile pages
- Keeping jQuery Mobile current
- Applying page transitions
- Creating collapsible content
- Defining list views with images
- Creating web forms for mobile
- Integrating geolocation data with Google Maps
- Previewing an app in Device Central
Skill Level Intermediate
iOS 4 Web Applications with HTML5 and CSS3with Ray Villalobos3h 26m Intermediate
1. Exploring the Mobile App Landscape
2. Creating Your First Mobile App
Working with jQuery Mobile7m 37s
3. Setting Up an Android Work Environment
4. Establishing an iOS Workspace
5. Building a Mobile App from Scratch
6. Crafting a Form for Mobile
7. Advanced Features
8. Working with Device Central
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.