To be documented
+ +To be documented
+ +To be documented
+ +To be documented
+ + + +to do
+ + + +Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:
+ +This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.
+ +How about some blockquote action with a cite+ +
This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.
+ +| Flight: | +From: | +To: | +||
|---|---|---|---|---|
| Total: 3 flights | +||||
| JetBlue 983 | +Boston (BOS) | +New York (JFK) | +||
| JetBlue 354 | +San Francisco (SFO) | +Los Angeles (LAX) | +||
| JetBlue 465 | +New York (JFK) | +Portland (PDX) | +||
To do...
+ + + +jQuery Mobile provides a number of tools and widgets to help you format content for mobile.
+ +Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:
+ + View default HTML rendering + +To create a collapsible block of content, create a container and add the data-role="collapsible" attribute.
Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.
+ +After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.
+ +
+<div data-role="collapsible">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content.</p>
+</div>
+By default, the content will be expaneded. To collapse the content when the page loads, add the data-state="collapsed" attribute to the wrapper.
+<div data-role="collapsible" data-state="collapsed">
+
+
+ This will create this widget:
+ + +I'm the collapsible content.
+The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.
+ + +The contents of the page can be anything you want and we designed the styes to respect standard HTML formatting.
+ + +To do...
+jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.
+ +A form alwaysbegins with a standard form tag
The collapsible panels are marked up as either heading/content, or legend/fieldset combinations. Helper text on the toggle links allows them to make sense on a screen reader.
+ +Text inputs and textareas are largely left alone, aside from having some theme classes applied. Textareas auto-grow using Brandon Aaron's expandable plugin, eliminating the need to 2-finger scroll a textarea on a mobile device.
+ +The radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. The horizontal toggles for "cache settings" and "font styling" are also just sets of checkboxes and radios with icons disabled.
+ +The select menus are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended after that div. This lets us take advantage of native scrolling while the menu is in use. Try the third select menu to see this behavior in action.
+ +The submit buttons are marked up as both input[type=submit] and button elements in the source, but we're generating anchor-based buttons in their place in order to take advantage of consistent styling across mobile browsers. The original buttons are still on the page, hidden from view, and clicking the replacement button will trigger a click on the original element, so the form can be submitted normally.