background preloader

jQueryMobile

Facebook Twitter

Forms. jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.

Forms

Form structure All forms should be wrapped in a form tag that has an action and method that will handle the form data processing on the server. <form action="form.php" method="post"> ... </form> Markup conventions When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via ordinary HTTP POST or GET still apply. Mini sized elements For a more compact version of all form elements and buttons, add the data-mini="true" attribute to the element to create a mini version. <label for="basic">Text Input:</label><input type="text" name="name" id="basic" data-mini="true" /> This will produce an input that is not as tall as the standard version and has a smaller text size. Hiding labels accessibly For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label.

Anatomy of a Page. The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.

Anatomy of a Page

The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests. Mobile page structure A jQuery Mobile site must start with an HTML5 "doctype" to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the "head", references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.

jQuery mobile cheat sheet. jQuery Mobile: Demos and Documentation. The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.

jQuery Mobile: Demos and Documentation

The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests. Mobile page structure A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off: <! Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute: vPad - HTML5+CSS3 App Framework.

Just enter any username/password combination to enter the demo page.

vPad - HTML5+CSS3 App Framework

DEMO vPad is an easily customizable, feature packed html5+css3 web application template. Features HTML5 +CSS3 CompliantFluid layout – iPhone and iPad friendlyiPhone style contact ListsiPhone style drilldown side menuLive SearchBased on 960 grid systemiPad style Pop overGalleryFull featured form – clearable textfield, validation (email, website, etc), with tooltip, dropdown, autogrow textarea, with placeholder, autocomplete and a lot more.Step by step wizardCalendar WYSIWYG EditorThoroughly Skinned elements – progress bar, tabs, accordions, dropdown, checkbox, radiobuttonSkinned Notifications and growl messagesFully Documented Contacts iPhone-like autosearching contacts list widget. Growl Mac OSX like growl notifications. Drilldown Menu iPhone-like drilldown menu. Popover iPad style popover widget.

Search. Download Builder. Navigation vers jquery-fr.com</li> <li><a href=" rel="external">Documentation française jQuery</a></li> <li><a href=" rel="external">Forum français dédié à jQuery</a></li> <li data-role="list-divider.