Đang tải... (xem toàn văn)
Một cuốn sách tiếng Anh dễ đọc của nhà xuất bản nổi tiếng O'Reilly huong dan chi tiết về jquery mobile
jQuery MobileDownload from Wow! eBook <www.wowebook.com> jQuery MobileJon ReidBeijing•Cambridge•Farnham•Köln•Sebastopol•Tokyo jQuery Mobileby Jon ReidCopyright © 2011 Jonathan Reid. All rights reserved.Printed in the United States of America.Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly books may be purchased for educational, business, or sales promotional use. Online editionsare also available for most titles (http://my.safaribooksonline.com). For more information, contact ourcorporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.Editor: Mary TreselerProduction Editor: Jasmine PerezProofreader: Jasmine PerezCover Designer: Karen MontgomeryInterior Designer: David FutatoIllustrator: Robert RomanoPrinting History:June 2011: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks ofO’Reilly Media, Inc. jQuery Mobile, the image of the squirrel tree toad, and related trade dress aretrademarks of O’Reilly Media, Inc.Many of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of atrademark claim, the designations have been printed in caps or initial caps.While every precaution has been taken in the preparation of this book, the publisher and authors assumeno responsibility for errors or omissions, or for damages resulting from the use of the information con-tained herein.ISBN: 978-1-449-30668-7[LSI]1307713150 Table of ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix1. Meet jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Overview of the jQuery Mobile Library 1How jQuery Mobile Works 2Create Your First jQuery Mobile Application 2Under The Hood: the jqmData() Custom Selector 72. Application Structure and Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Pages 9Internal Pages 10External Pages 12Under The Hood: Page Initialization in jQuery Mobile 15Page Hide and Show Events 17Dialogs 20Navigation and History 20Transitions 22Under The Hood: Animations in a jQuery Mobile Application 233. Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Under The Hood: jQuery Plug-ins and Widgets 25List Views 26Basic List View 26Advanced List Views 29Under The Hood: Updating a List View 39Toolbars 39Navigation Bars 39Positioning the Header and Footer 43Buttons 44Button Control Groups 46Button Icons 47v Form Elements 49Accessing Form Elements with JavaScript 49Checkboxes and Radio Buttons 50Flip Toggle 52Input Fields and Textareas 53Search Fields 54Select Menus 55Sliders 59Layout Grids 614.Theming jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Themes and Swatches 65Under The Hood: Customizing a Swatch 74Theming List View Elements 785. jQuery Mobile API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79jQuery Mobile Methods 79changePage 79pageLoading 80silentScroll 80addResolutionBreakpoints 80Events 81Touch Events 81Initialization Events 83Page Hide and Show Events 84Scroll Events 85Orientation Change Events 85Responsive Layout API 85CSS Selectors 85Configuring jQuery Mobile 88Available Options 88Changing an Option via mobileinit 89Under The Hood: Namespacing Data Attributes 906. jQuery Mobile in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Application Pages 93Initializing the Application 97The initMainPage Method 97The initSettings Method 102The initDetailPage Method 103Error Dialog 103jqmTweet Take One 104Improving the Interface 106vi | Table of Contents CSS Tweaks 106Interaction Tweaks 106Overall Approach 111Table of Contents | vii [...]... html> jQuery Mobile Application 2 | Chapter 1: Meet jQuery Mobile This includes everything... Example 2-4 Page markup after jQuery Mobile initialization Header First page!... supported platforms jQuery Mobile makes heavy use of the HTML 5 specification for custom data- attributes (available for review at http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible -data-with-the-data-attributes) Using this method, it is possible to embed data into valid HTML 5 markup jQuery Mobile has a large vocabulary of data- attributes Upon initialization, jQuery Mobile selects... appropriate data-role attributes, our HTML 5 markup would be written as shown in Example 1-4 Create Your First jQuery Mobile Application | 3 Example 1-4 jQuery Mobile data-role attributes applied to HTML 5 markup jQuery Mobile First page! O'Reilly... source” plug-ins available, and the ability to view generated source is built into some browser-based web development toolbars Create Your First jQuery Mobile Application The best way to understand jQuery Mobile is to dive right in Begin by creating a simple HTML 5 page that includes the jQuery and jQuery Mobile libraries, as shown in Example 1-1 Example 1-1 Basic HTML5 page for a jQuery Mobile application... Example 2-3 into the enhanced markup shown in Example 2-4 Pages | 15 Example 2-3 Page markup before jQuery Mobile initialization jQuery Mobile First page! O'Reilly Example 2-4 Page... rave about jQuery Mobile and obsess about this book: Aaron Congleton, Ryan McGinty, Kevin Bauman, Shane Church, Tony Walt, and George Robison Thanks, guys Preface | xiii CHAPTER 1 Meet jQuery Mobile jQuery Mobile is a set of jQuery plug-ins and widgets that aim to provide a crossplatform API for creating mobile web applications In terms of code implementation, jQuery Mobile is very similar to jQuery UI,... a jQuery Mobile application, and so forth In Chapter 1, we will provide a high-level overview of jQuery Mobile, how it works, and how to use it If you follow the examples in the chapter, at the end of the chapter you will have built your first jQuery Mobile application It won’t do much, but it will show how easy it is to set up a jQuery Mobile application and introduce you to some important jQuery Mobile. .. data-role="page"> jQuery Mobile First page! Open page 2 as a dialog O'Reilly jQuery Mobile... end third page > jQuery Mobile will automatically handle page transitions, back buttons, etc., as the user clicks through the resulting pages of the application (see Figures 2-1 , 2-2 , and 2-3 ) 10 | Chapter 2: Application Structure and Navigation Figure 2-1 Multiple pages (page 1) Figure 2-2 Multiple pages (page 2) Pages | 11 Figure 2-3 Multiple pages (page 3) External Pages jQuery Mobile will also . http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes). Using this method, it is possible to embed data intovalid HTML 5 markup. jQuery Mobile has. xiii CHAPTER 1Meet jQuery MobilejQuery Mobile is a set of jQuery plug-ins and widgets that aim to provide a cross-platform API for creating mobile web applications.