You are previewing jQuery Mobile Web Development Essentials.
O'Reilly logo
jQuery Mobile Web Development Essentials

Book Description


Learn to use the touch-optimized, cross-device, cross-platform jQM web framework for smartphones and tablets with this book and ebook.

  • Create websites that work beautifully on a wide range of mobile devices with jQuery mobile

  • Learn to prepare your jQuery mobile project by learning through 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 compatible with all major mobile, tablet, e-reader and desktop platforms like iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, and Windows Phone 7.

jQuery Mobile Web Development Essentials will explain how to create mobile-optimized sites with the easiest, most practical HTML/JavaScript framework available and to add the framework to your HTML pages to create rich, mobile-optimized web pages with minimal effort.

Throughout the book, you'll learn details that help you become a pro at mobile web development. You begin with simple HTML and quickly enhance it using jQuery Mobile for incredible mobile-optimized sites. Start by learning the building blocks of jQuery Mobile’s component-driven design. Dig into forms, events, and styling, then finish by building native mobile applications. You will learn how to build websites and apps for touch devices such as iPhone, iPad, Android, and BlackBerry with the recently developed jQuery Mobile library through sample applications of increasing complexity.


Table of Contents

  1. jQuery Mobile Web Development Essentials
    1. jQuery Mobile Web Development Essentials
    2. Credits
    3. About the Authors
    4. About the Reviewers
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. 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
    7. 1. Preparing your First jQuery Mobile Project
      1. Important preliminary points
      2. Building an HTML page
      3. Getting jQuery Mobile
      4. Implementing jQuery Mobile
      5. Working with data attributes
      6. Summary
    8. 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
    9. 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 positioning
      7. Working with navigation bars
        1. Persisting navigation bar footers across multiple pages
      8. Summary
    10. 4. Working with Lists
      1. Creating lists
      2. Working with list feature
        1. Creating Inset lists
        2. Creating list dividers
        3. Creating lists with count bubbles
        4. Using thumbnails and icons
        5. Creating Split Button lists
        6. Using a search filter
      3. Summary
    11. 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
    12. 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 "mini" fields
      4. Summary
    13. 7. Creating Modal Dialogs, Grids, and Collapsible Blocks
      1. Creating dialogs
      2. Laying out content with grids
      3. Working with collapsible content
      4. Summary
    14. 8. 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. Miscellaneous utilities
      3. jQuery widget and form utilities
      4. Summary
    15. 9. Working with Events
      1. Working with physical events
      2. Handling page events
        1. What about $(document).ready?
        2. Creating a real example
      3. Summary
    16. 10. 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 functionality 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 Live function
        6. Dynamically creating a new page
        7. Deleting a note
      4. Summary
    17. 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?
          1. Using ThemeRoller
          2. Preview
        2. Colors
          1. Inspector
          2. Tools
        3. 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
      6. Updating the Notekeeper app
        1. Adding our custom theme
        2. Adding our custom icon
      7. Summary
    18. 12. Creating Native Applications
      1. HTML as a native application
        1. Working with PhoneGap
        2. Adding PhoneGap functionality
      2. Summary
    19. 13. Becoming an expert - Build 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