Jquery mobile book review
Download as PPTX, PDF1 like1,094 views
The document discusses jQuery Mobile, a framework for creating mobile web applications that work consistently across a variety of devices using HTML, CSS, and JavaScript. It details how jQuery Mobile enhances user interface elements, improves form controls, and offers features like themed layouts and animations while maintaining a single code base. Additionally, it describes the framework's use of jQuery patterns and its automatic handling of form submissions and touch-enhanced components.
Jquery mobile book review
- 1. Islam Al-Zatary Twitter: @islamzatary Website: Islamzatary.com
- 2. 1. Native applications: compiled programs that run natively on the device (Titanium, phonegap). 2. Mobile web applications, which run inside a web browser on the device.
- 3. Mobile web applications, on the other hand, are created in HTML, CSS, and JavaScript, and run in the web browser on the mobile device. This means one code base to maintain, but mobile web applications still need to account for variations in web browsers across platforms.
- 4. jQuery Mobile is designed to create mobile web applications that function on a broad range of devices. With jQuery Mobile, it is possible to quickly create mobile web applications that look behave consistently across all supported devices, and that have advanced user interface capabilities. Gives the developer a standard set of layouts, user interface widgets, and interactions, as well as a rich API for applying and extending them.
- 5. jQuery Mobile uses HTML 5 and CSS 3 features to enhance basic HTML markup to create a consistent mobile experience across supported platforms. jQuery Mobile Makes heavy use of the HTML 5 specification for custom “data- attributes”. Upon initialization, jQuery Mobile selects elements based on their data- attributes and enhances them by inserting extra markup, adding new CSS classes, and applying event handlers.
- 6. <!DOCTYPE html> <html> <head> <title>jQuery Mobile Application</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/ jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"> </script> </head> <body> <section id="page1"> <header><h1>jQuery Mobile</h1></header> <div class="content"> <p>First page!</p> </div> <footer><h1>Islam Al-Zatary</h1></footer> </section> </body> </html>
- 7. 1. Triggers the before create event. 2. Adds the ui-page class to all page elements. 3. Adds the ui-nojs class to all page elements that had data- role="none" or datarole="nojs" applied to them. 4. Looks for child elements that have a data- attribute and: a. Adds theming classes b. Adds appropriate ARIA role and aria-level attributes c. Adds a back button to the header (if there isn’t one already in the markup) for pages beyond the first 5. Then it enhances form controls, buttons, and control groups. 6. Finally, it fixes toolbars as specified.
- 8. Pages (internal, external). Dialogs Transitions Animations There are seven CSS classes that define base animations: slide, slideup, slidedown, spin, fade, flip, and pop. jQuery Mobile uses webkit transforms.
- 9. jQuery Mobile makes extensive use of two standard jQuery development patterns: the plug-in and the widget. 1. The jQuery plug-in pattern is a way of extending jQuery itself, enabling you to add custom methods. 2. The jQuery widget pattern is slightly more complicated than the jQuery plug-in pattern, it can maintain state even after the resulting method is done executing, and the factory will enable garbage collection to avoid memory leaks in browsers. jQuery Mobile will automatically enhance native form elements with touch-enhanced user interface components.
- 10. jQuery Mobile will automatically handle the form submission via AJAX, and we can disallow jQuery Mobile’s AJAX form handling for a given form, apply the attribute data-ajax="false" to the form tag. jQuery Mobile will automatically enhance checkboxes and radio buttons into buttonlike elements in the user interface. Textareas will grow in height as the user types in input. This is to avoid the creation of scrollbars. Select Menu - jQuery Mobile can either attempt to use the platform’s native select widget, or it can produce a custom styled select menu, So By default, jQuery Mobile will attempt to use the native select widget, To force jQuery Mobile to create a custom styled select menu, apply the data-native-menu="false". Custom styled select menu has many benefits over using the native select widget:
- 11. Native select widget is missing important features, like (Android is missing support for optgroup). Custom styled select menu also adds extra features, like multiple select support. Easier to style so it matches the visual theme of your application. jQuery Mobile has a set of layout grids built in, ranging from two to five columns. Layout grids are based on a div structure