O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery Mobile Web Development Essentials Second Edition

Book Description

Mobile friendly websites are easy with jQuery because it works with HTML, and this superb tutorial makes it simpler still. From structuring your sites for mobile devices to creating native applications, this book has it all.

  • Create websites that work beautifully on a wide range of mobile devices
  • Develop your own jQuery mobile project with the help of three sample applications
  • Packed with easy-to-follow examples and clear explanations of how to easily build mobile-optimized websites

In Detail

jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms. It is the most practical HTML/JavaScript framework available today. In this tutorial, you will learn how to use jQuery Mobile with your HTML pages, and create mobile friendly websites in no time.

jQuery Mobile Web Development Essentials - Second Edition will explain how to add the framework to your HTML pages to create rich, mobile optimized web pages with minimal effort. By using simple data attributes, you can quickly create mobile pages and other widgets. You'll see how each widget works, with the help of detailed examples and screenshots.

jQuery Mobile Web Development Essentials - Second Edition is packed with examples that will help you become a pro at mobile web development. We will begin with simple HTML, and quickly enhance it using jQuery Mobile for incredible mobile optimized sites.

We start off by learning the building blocks of jQuery Mobile’s component driven design. We then dig into forms, events, and styling. You'll see how jQuery Mobile automatically enhances content, and learn how to use the JavaScript API for building complex sites. Along the way, we will leverage all these concepts, and build three sample mobile applications.

Table of Contents

  1. jQuery Mobile Web Development Essentials Second Edition
    1. Table of Contents
    2. jQuery Mobile Web Development Essentials Second Edition
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What is jQuery Mobile?
        1. What's the cost?
        2. What do you need to know?
        3. What about native apps?
        4. Help!
        5. Examples
      2. What this book covers
      3. What you need for this book
      4. Who this book is for
      5. Conventions
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Preparing Your First jQuery Mobile Project
      1. Important preliminary points
      2. Building an HTML page
      3. Getting jQuery Mobile
        1. Customized downloads
      4. Implementing jQuery Mobile
      5. Working with data attributes
      6. Summary
    9. 2. Working with jQuery Mobile Pages
      1. Important preliminary points
      2. Adding multiple pages to one file
      3. jQuery Mobile, links, and you
      4. Working with multiple files
      5. jQuery Mobile and URLs
      6. Additional customization
        1. Page titles
        2. Prefetching content
        3. Changing page transitions
      7. Summary
    10. 3. Enhancing Pages with Headers, Footers, and Toolbars
      1. Important preliminary points
      2. Adding headers
      3. Icon sneak peak
      4. Working with back buttons
      5. Working with footers
      6. Creating fixed and full-screen headers and footers
        1. Full-screen headers and footers
      7. Working with navigation bars
        1. Persisting navigation bar footers across multiple pages
      8. Summary
    11. 4. Working with Lists
      1. Creating lists
      2. Working with list features
        1. Creating inset lists
        2. Creating list dividers
          1. Autodividers
        3. Creating lists with count bubbles
        4. Using thumbnails and icons
        5. Creating split button lists
        6. Using a search filter
      3. Summary
    12. 5. Getting Practical – Building a Simple Hotel Mobile Site
      1. Welcome to Hotel Camden
      2. The home page
      3. Finding the hotel
      4. Listing the hotel rooms
      5. Contacting the hotel
      6. Summary
    13. 6. Working with Forms and jQuery Mobile
      1. Before you begin
      2. What jQuery Mobile does with forms
        1. Working with radio buttons and checkboxes
        2. Working with select menus
        3. Search, toggle, and slider fields
          1. Search fields
          2. Flip toggle fields
          3. Slider fields
        4. Using native form controls
      3. Working with the mini fields
      4. Summary
    14. 7. Creating Modal Dialogs and Widgets
      1. Creating dialogs
      2. Laying out content with grids
        1. Making responsive grids
      3. Working with collapsible content
      4. Popups
      5. Responsive tables
      6. Working with panels
      7. Summary
    15. 8. Moving Further with the Notekeeper Mobile Application
      1. What is a mobile application?
      2. Designing your first mobile application
        1. Listing out the requirements
          1. Building your wireframes
          2. Designing the add note wireframe
          3. Display notes wireframe
          4. View note/delete button wireframe
        2. Writing the HTML
      3. Adding functionalities with JavaScript
        1. Storing Notekeeper data
          1. Using localStorage
        2. Effective use of boilerplates
        3. Building the Add Note feature
          1. Adding bindings
          2. Collecting and storing the data
          3. Building the Display Notes feature
        4. Dynamically adding notes to our listview
        5. Viewing a note
          1. Using the .on() method
        6. Dynamically creating a new page
        7. Deleting a note
      4. Summary
    16. 9. jQuery Mobile Configuration, Utilities, and JavaScript Methods
      1. Configuring jQuery Mobile
      2. Using jQuery Mobile utilities
        1. Page methods and utilities
        2. Path and URL-related utilities
      3. jQuery Mobile widget and form utilities
      4. Summary
    17. 10. Working with Events
      1. Working with physical events
      2. Handling page events
        1. What about $(document).ready?
        2. Creating a real example
      3. Summary
    18. 11. Enhancing jQuery Mobile
      1. What's possible?
      2. The visual building blocks of jQuery Mobile
        1. Border-radius
        2. Applying drop shadows
          1. Using text-shadow
          2. Using box-shadow
          3. CSS gradients
      3. The basics of jQuery Mobile theming
        1. Bars (.ui-bar-?)
        2. Content blocks (.ui-body-?)
        3. Buttons and listviews (.ui-btn-?)
        4. Mixing and matching swatches
        5. Site-wide active state
        6. Default icons
      4. Creating and using a custom theme
        1. What's ThemeRoller?
        2. Using ThemeRoller
        3. Preview
        4. Colors
        5. Inspector
        6. Tools
        7. Creating a theme for Notekeeper
          1. Exporting your theme
      5. Creating and using custom icons
        1. CSS Sprites
        2. Designing your first icon
        3. High and low resolution
        4. Resolution independence
      6. Updating the Notekeeper app
        1. Adding our custom theme
        2. Adding our custom icon
      7. Summary
    19. 12. Creating Native Applications
      1. HTML as a native application
        1. Working with PhoneGap
        2. Adding PhoneGap functionality
      2. Summary
    20. 13. Becoming an Expert – Building an RSS Reader Application
      1. RSS Reader – the application
      2. Creating the RSS Reader application
        1. The displayFeeds function
        2. Storing our feeds
        3. Adding an RSS feed
        4. Viewing a feed
        5. Creating the entry view
        6. Going further
      3. Summary
    21. Index