That was an animated page transition effect to a page that we added with a data-transition attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.
Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.
Take me backThat was an animated page transition effect to a dialog that we added with a data-transition attribute on the link.
Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.
Take me backThe jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation.
fade |
dialog | page |
|---|---|---|
pop |
dialog | page |
flip |
dialog | page |
turn |
dialog | page |
flow |
dialog | page |
slidefade |
dialog | page |
slide |
dialog | page |
slideup |
dialog | page |
slidedown |
dialog | page |
none |
dialog | page |
Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, especially Android. Add the following code to your custom css:
.ui-page { -webkit-backface-visibility: hidden; }
Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.
By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.
<a href="index.html" data-transition="pop">I'll pop</a>
When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the data-direction="reverse" attribute to a link.
Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also be configured.
All transitions are built with CSS keyframe animations and include -webkit vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers, -moz rules for Firefox browsers, and unprefixed rules for Windows Phone 8 and IE10. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.
By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.
The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":
$.mobile.transitionFallbacks.slideout = "none"
By default, transitions are disabled (set to "none") when you're either coming FROM or going TO a page where the scroll position is 3x the height of the device's screen.
This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the
browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance.
This scroll position breakpoint is configurable via the new getMaxScrollForTransition function.
By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to false. The option accepts any number representing a pixel width or false value. If it's not false, the handler will use a "none" transition when the window is wider than the specified value.
Transitions to the current active page are ignored by default but can be enabled by using the allowSamePageTransition option of the pagecontainer widget's change() method. Note that not all transitions will work as expected and may end in an impractical result.
jQuery Mobile allows for the addition of custom transitions to the $.mobile.transitionHandlers dictionary so you can expand the selection of transitions on your site or app.
The toolbar widget is used to enhance headers and footers.
The header is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the left and/or right of the title for navigation or actions.
The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. The framework add class ui-title to headings that are immediate children of toolbars. All heading levels with class ui-title are styled identically by default to maintain visual consistency.
The footer is a toolbar at the bottom of the page that can contain a wide range of content, from form elements to navbars.
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer. Headings that are immediate children of the footer get class ui-title, just like headers.
The header and footer toolbar inherit the theme swatch from the page by default but you can easily set the theme swatch color. If you use external fixed toolbars you always have to set a theme, because there is no parent page from which they can inherit the theme.
If you want to use the same toolbar on multiple pages, you can use external toolbars.
Toolbars can be set to fixed position by adding the data-position="fixed" to the header or footer. This will make them remain at the top (header) or bottom (footer) of the window at all time instead of scrolling with the page. See fixed toolbars.
The toolbars can be set to fullscreen fixed position that overlays the toolbar over the content by adding the data-fullscreen="true" to a fixed header. See fullscreen toolbars.
See persistent toolbars.
The framework automatically enhances links in toolbars as buttons with inline and mini style, but this has been deprecated in version 1.4. The same goes for positioning the first two buttons in a header left and right if they are immediate child of the header. The demos below prepare you for the next version.
You can use the ui-btn-left and ui-btn-right classes to position buttons in the header.
The heading in the header bar has some margin that will give the bar its height. If you choose not to use a heading, you will need to add an element with class="ui-title" so that the bar can get the height and display correctly.
The classes ui-btn-left and ui-btn-right were not meant to be used in footers, because they do not account for the possible presence of text, navbars, and and other elements often present in footers. You can nevertheless achieve a similar effect when you add a bit of custom CSS.
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the header has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.
If you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute.
If you'd like to configure the back button text, you can either use the data-back-btn-text="previous" attribute on your header element, or set it programmatically via the toolbar plugin's options:$.mobile.toolbar.prototype.options.backBtnText = "previous";
If you'd like to configure the back button theme, you can use:
$.mobile.toolbar.prototype.options.backBtnTheme = "a";
If you're doing this programmatically, set this option inside the mobileinit event handler.
See navbar for examples of navigation bars inside toolbars.
To group buttons into a button set, wrap the links in an element with data-role="controlgroup" and data-type="horizontal" attributes.
By default, toolbars don't have any padding to accommodate nav bars and other widgets. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and add class ui-bar to that element or apply your own padding rule in your custom CSS.
In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.
To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.
Fixed header markup example:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
Fixed footer markup example:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.
To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed Header!</h1>
</div>
While all form elements are now tested to work correctly within static toolbars as of jQuery Mobile 1.1, we recommend extensive testing when using form elements within fixed toolbars or within any position: fixed elements. This can potentially trigger a number of unpredictable issues in various mobile browsers, Android 2.2/2.3 in particular (detailed in Known issues in Android 2.2/2.3, below).
Prior to version 1.1, jQuery Mobile used dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers supported the position:fixed CSS property, and simulating fixed support through the use of "fake" JavaScript overflow-scrolling behavior would have reduced our browser support reach, in addition to feeling unnatural on certain platforms. This behavior was not ideal, and jQuery Mobile 1.1 took a new approach to fixed toolbars that allows much broader support. The framework now offers true fixed toolbars on many popular platforms, while gracefully degrading non-supporting platforms to static positioning.
The fixed toolbar plugin degrades gracefully in platforms that do not support CSS position:fixed properly, such as iOS4.3. If you still need to support fixed toolbars on that platform (with the show/hide behavior) included in previous releases, Filament Group has developed a polyfill that you can use.
Just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similarly to jQuery Mobile 1.0 in iOS4.3, with the inclusion of the new API for the 1.1 fixedtoolbar plugin.
If you have any improvements to suggest, fork the gist on github and let us know!
An obscure issue exists in iOS5 and some Android platforms where form controls placed inside fixed-positioned containers can lose their hit area when the window is programatically scrolled (using window.scrollTo for example). This is not an issue specific to jQuery Mobile, but because of it, we recommend not programatically scrolling a document when using form controls inside jQuery Mobile fixed toolbars. This ticket from the Device Bugs project tracker explains this problem in more detail.
Android 2.2/2.3's implementation of position: fixed; can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of position: absolute elements inside of position: fixed elements. While we've done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.
position: fixed element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only translate transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSS opacity of .9 or below on the parent of the fixed element.position: fixed and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.position: fixed element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.
Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property overflow-scrolling: touch, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under $.support and we have no plans to remove that test at this time.
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24PM
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
4-for-3 Books for Kids
As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.
12:47PM
Re: This weekend in Maine
Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?
6:24AM
Redfin listing updates for today
There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.
5:52AM
Link Request
My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link
6:24AM
This weekend in Maine
Sounds good, let me check into our plans.
6:24AM
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase album
Ok Go
Purchase album
The White Stripes
Purchase album
Radiohead
Purchase album
XX
Purchase album
MGMT
Purchase album
A Sunny Day in Glasgow
Purchase album
Killers
Purchase album
Arcade Fire
Purchase albumYour download will begin immediately on your mobile device when you purchase.
Buy: $10.99 CancelThese pages are a demo of a persistent navbar in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.
With the new external toolbars no extra effort is required to now have persistent toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.
Typically, the persistent toolbar technique will be combined with fixed positioning.
Because the same toolbar is used on every page, you might want to update the content. In this demo we show how to change the heading in the header and set the nav button of the page currently in view to the active state.
By combining this technique with a little bit of server side logic you can reduce the file size for each page load significantly by not sending anything except the actual page container back when the request is from ajax. this not only reduces file size but makes the actual processing of the page quicker also. To see an example of this technique see Ajax optimized persistent toolbars
By Removing the toolbars from the page container they are no longer part of the page transition which dramaticly improves the performance of complex 3D page transitions over the older style of persistent toolbars.
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24PM
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
4-for-3 Books for Kids
As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.
12:47PM
Re: This weekend in Maine
Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?
6:24AM
Redfin listing updates for today
There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.
5:52AM
Link Request
My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link
6:24AM
This weekend in Maine
Sounds good, let me check into our plans.
6:24AM
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase album
Ok Go
Purchase album
The White Stripes
Purchase album
Radiohead
Purchase album
XX
Purchase album
MGMT
Purchase album
A Sunny Day in Glasgow
Purchase album
Killers
Purchase album
Arcade Fire
Purchase albumYour download will begin immediately on your mobile device when you purchase.
Buy: $10.99 CancelThese pages have been optimized on the server side to check if the request is coming from an Ajax request and if so they only send the actual page div instead fo the entire page. If you navigate to any of the pages in the nav bar at the bottom and inspect the return data you will see it contains no head, toolbars, html tag, or body tag.
However if you refresh the page all of these things will be present. This is done by checking the HTTP_X_REQUESTED_WITH header
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
All of the markup not needed when being requested via Ajax is wrapped in if statements like the one above.
This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.
To enable this toolbar feature type, you apply the data-fullscreen="true" attribute and the data-position="fixed" attribute to both the header and footer div elements. The framework will also unset the padding for the content container (.ui-content).
Keep in mind that the toolbars in this mode will sit over page content, so not all content will be accessible with the toolbars visible.
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase album
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase album
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase albumYour download will begin immediately on your mobile device when you purchase.
Buy: $10.99 CancelThe header and footer on this page are outside of the page within the body. They have been set to position fixed.
Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
Since external toolbars are outside the page they don't inherit a theme from the page. This means you always have to set a theme for them. You can use the data-theme attribute for this or set the theme option when you call the plugin:
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
});
Because External toolbars are outside of the page they are not effected by transition and make truly persistent toolbars possible.
The header and footer on this page are positioned outside the page. They are before and after the page within the body. These Toolbars will remain in the dom until manually removed.
The markup for external toolbars is identical to normal toolbars, you just place the toolbar outside the page within the body of your page
Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
Since external toolbars are outside the page they don't inherit a theme from the page. This means you always have to set a theme for them. You can use the data-theme attribute for this or set the theme option when you call the plugin:
$(function(){
$( "[data-role='header']" ).toolbar({ theme: "a" });
});
Because these toolbars are not within the page they will remain in the DOM until manually removed.
Toolbars not within a page will not be pulled into the DOM during Ajax navigation.
External toolbars can also be set to fixed positioning just like normal toolbars: External fixed toolbars
click on the button to dynamically inject toolbars. Note that we have to update the page height and padding by calling $.mobile.resetActivePageHeight();.
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase albumForm inside static list:
I'm the collapsible content with a themed content block set to "a".
I'm the collapsible content for section 1
I'm the collapsible content for section 2
I'm the collapsible content for section 3
This "classic" theme mimics the old jQuery Mobile default theme. IMPORTANT: This classic theme is only a demo and not a supported feature. Issues or ThemeRoller incompatibility might not be fixed, this theme is not available on the CDN, and this demo can be removed at any time.
Open the classic theme CSS file in a new tab
We
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase albumForm inside static list:
I'm the collapsible content with a themed content block set to "a".
I'm the collapsible content for section 1
I'm the collapsible content for section 2
I'm the collapsible content for section 3
Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.
The jQuery mobile tabs widget is actually just an extension of the jQuery ui tabs widget and takes all the same options and methods.
You can also use tabs to swap out the contents of an entire page. See Tabbed Content Pages for details.
The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row.
The reflow responsive table only requires a table with a data-role="table" on the table element. There is no need to set the data-mode attribute since reflow is the default. Be sure to include thead and tbody elements in your table. This example also uses the preset responsive breakpoint, applied via the ui-responsive class.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
| 4 | Gone with the Wind | 1939 | 96% | 87 |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 |
| 7 | The Graduate | 1967 | 91% | 122 |
| 8 | The Wizard of Oz | 1939 | 90% | 72 |
| 9 | Singin' in the Rain | 1952 | 89% | 85 |
| 10 | Inception | 2010 | 84% | 78 |
By default, a table with reflow mode will display the stacked presentation style on all screen widths. The styles to make the table responsive are added by applying a media query with rules to switch to the tabular style presentation above a specific screen width.
This is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels):
@media ( min-width: 40em ) {
/* Show the table header rows and set all cells to display: table-cell */
.my-custom-breakpoint td,
.my-custom-breakpoint th,
.my-custom-breakpoint tbody th,
.my-custom-breakpoint tbody td,
.my-custom-breakpoint thead td,
.my-custom-breakpoint thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.my-custom-breakpoint td .ui-table-cell-label,
.my-custom-breakpoint th .ui-table-cell-label {
display: none;
}
}
It's best to use a class on the table to apply the breakpoint. Add these rules to your custom stylesheet that is included in the head of the page. We recommend creating a set of custom breakpoint classes that can be used to apply standard table breakpoints in your project.
The goal is to determine the minimum width at which the entire table will fit comfortably within the screen. Find this width by populating a table with realistic sample data, then adjust the browser window until the table completely fits and has a bit of extra space to account for rendering differences across devices. This is the natural place to set the breakpoint that switches between the stacked and tabular presentation modes. The breakpoint width is highly dependent on the number of columns in the table and content within each cell.
Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a single pre-configured breakpoint that targets the stacked style to smaller phones and swaps to a tabular presentation on larger phones, tablet and desktop devices. To use this preset breakpoint, add the ui-responsive class to the table to convert from the stacked presentation to a tabular presentation at 560px (35em). If this breakpoint doesn't work for your content, we encourage you to write a custom breakpoint as described above.
<table data-role="table" class="ui-responsive">
It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (th), with the first row containing simple colspan attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy.
| Paris | Average Temperatures (C) | Average Rainfall | ||
|---|---|---|---|---|
| Month | Minimum Temp | Maximum Temp | Precipitation (mm) | Rainfall Days |
| January | 3 | 8 | 17.8 | 10 |
| February | 2 | 9 | 21.7 | 9 |
| March | 4 | 13 | 24.2 | 10 |
| April | 6 | 15 | 24.6 | 11 |
| May | 10 | 20 | 26.2 | 10 |
| June | 13 | 23 | 25.1 | 9 |
| July | 15 | 25 | 21.7 | 7 |
| August | 15 | 25 | 21.4 | 7 |
| September | 11 | 21 | 15.6 | 8 |
| October | 9 | 17 | 25.3 | 11 |
| November | 5 | 11 | 22.4 | 12 |
| December | 3 | 8 | 26.6 | 12 |
Custom styles for the reflow table at stacked widths.
| Rank | Movie Title | Year | Rating | Reviews | Director |
|---|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 | Orson Welles |
| 2 | Casablanca | 1942 | 97% | 64 | Michael Curtiz |
| 3 | The Godfather | 1972 | 97% | 87 | Francis Ford Coppola |
| 4 | Gone with the Wind | 1939 | 96% | 87 | Victor Fleming |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 | Sir David Lean |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 | Stanley Kubrick |
| 7 | The Graduate | 1967 | 91% | 122 | Mike Nichols |
| 8 | The Wizard of Oz | 1939 | 90% | 72 | Victor Fleming |
| 9 | Singin' in the Rain | 1952 | 89% | 85 | Stanley Donen, Gene Kelly |
| 10 | Inception | 2010 | 84% | 78 | Christopher Nolan |
| Rank | Movie Title | Year | Rating | Reviews | Director |
|---|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 | Orson Welles |
| 2 | Casablanca | 1942 | 97% | 64 | Michael Curtiz |
| 3 | The Godfather | 1972 | 97% | 87 | Francis Ford Coppola |
| 4 | Gone with the Wind | 1939 | 96% | 87 | Victor Fleming |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 | Sir David Lean |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 | Stanley Kubrick |
| 7 | The Graduate | 1967 | 91% | 122 | Mike Nichols |
| 8 | The Wizard of Oz | 1939 | 90% | 72 | Victor Fleming |
| 9 | Singin' in the Rain | 1952 | 89% | 85 | Stanley Donen, Gene Kelly |
| 10 | Inception | 2010 | 84% | 78 | Christopher Nolan |
This table will stack the data into label value pairs at narrow widths. The grouped column headings are displayed as subheadings between data sets. The screen needs to be wide before it shows the tabular format so the media query is set to 72em (1,152px). There are custom styles for the first row to set the background to dark gray with white text and hide the label so it looks more like a section divider.
| Q1 2012 | Q2 2012 | Q3 2012 | Q4 2012 | YTD Totals | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Store | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change |
| Boston | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| Chicago | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| NYC | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
The column toggle table mode selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see.
This table mode automatically hides less important columns at narrower widths and surfaces a button to open a menu that allows the user to choose what columns they want to see. In this mode, the author attempts to define which columns are most important to show across various widths by assigning a priority to each column.
A user may choose to check as many columns as they want by tapping the "Columns..." button to open the column chooser popup. The popup contains a dynamically generated list of columns based on the table markup that can be checked and unchecked to adjust the visible columns.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
| 4 | Gone with the Wind | 1939 | 96% | 87 |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 |
| 7 | The Graduate | 1967 | 91% | 122 |
| 8 | The Wizard of Oz | 1939 | 90% | 72 |
| 9 | Singin' in the Rain | 1952 | 89% | 85 |
| 10 | Inception | 2010 | 84% | 78 |
The column chooser mode requires a table element with two attributes: data-role="table" and data-mode="columntoggle". An ID attribute is also required on the table to associate it with the column chooser popup menu.
<table data-role="table" data-mode="columntoggle" id="my-table">
The table works by hiding and showing columns based on two inputs: available screen width or by the user checking and unchecking which columns to display in a column picker popup. Add data-priority attributes to each of the table headers of columns you want to responsively display and assign a priority (1 = highest, 6 = lowest). Any table header given a priority will be available in the column picker menu.
To make a column persistent so it's not available for hiding, omit the data-priority attribute. This will make the column visible at all widths and won't be available in the column chooser menu.
<th>I'm critical and can't be removed</th>
<th data-priority="1">I'm very important</th>
<th data-priority="3">I'm somewhat</th>
<th data-priority="5">I'm less important</th>
You may use any priority naming convention and assign as many (or few) levels of priority for the columns. The plugin simply generates class names based on the values in the data-priority attribute so even though we default to using a numeric system of 1-6, any naming convention is possible.
For example, if a priority of data-priority="critical" is added to the heading, a class of ui-table-priority-critial will be applied to each cell in that column. If a priority is assigned, the column will be made available for toggling in the column menu and the class will be added to each cell. The rest of the styling and media query creation is up to you to write in your custom stylesheet.
The column chooser popup is opened via a button that is generated by the framework. The button's text is "Columns..." by default but can be set by adding the data-column-btn-text attribute to the table to the text string you want in the button. The button will inherit the theme from the content area, just like all buttons, but the theme can be set manually by adding the data-column-btn-theme attribute to any swatch letter in your theme.
The table background is themed by adding class="ui-body-d" to the table element. The table header is given a themed appearance by adding the class="ui-bar-d" to the header row. The striped rows are created by adding the table-stripe class to the table element.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
| 4 | Gone with the Wind | 1939 | 96% | 87 |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 |
| 7 | The Graduate | 1967 | 91% | 122 |
| 8 | The Wizard of Oz | 1939 | 90% | 72 |
| 9 | Singin' in the Rain | 1952 | 89% | 85 |
| 10 | Inception | 2010 | 84% | 78 |
The styles for all columns that have priorities assigned (1-6) start as display:none in the structure stylesheet since we're taking a mobile-first approach to our styles. This means that only columns that should be persistent are visible in the styles to start.
The framework does not automatically include the the media queries to progressively display columns at wider widths. We do this to make it easier for developers to customize the media query widths for each priority level.
Media queries add the responsive behavior to show and hide columns by priority. Each media query is written using min-width widths so they build on top of each other. The widths are set in em units so they respond to font size changes. To calculate a pixel withs in em units, divide the target width by 16 (pixels) - it's that easy.
Inside each media query, we override the display:none style properties set on all the priority columns in the basic styles to display:table-cell so they become visible again and act as a table.
To customize the breakpoints, copy the following style block into your custom style overrides and adjust the min-width media query values for each priority level to specify where various priority columns should appear.
In the example styles below for a my-custom-class class on the table, the priority 1 columns are shown first, at widths above 20em (320px), then priority 2 kicks in above 30em (480px) and so on up to wide desktop widths with priority 6. Feel free to change these breakpoints in your stylesheet and choose how many priority levels you'd like to use.
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
.my-custom-class th.ui-table-priority-1,
.my-custom-class td.ui-table-priority-1 {
display: table-cell;
}
}
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
.my-custom-class th.ui-table-priority-2,
.my-custom-class td.ui-table-priority-2 {
display: table-cell;
}
}
...more breakpoints...
Due to CSS specificity, you will also need to include the class definitions for the hidden and visible states after the custom breakpoints in your custom stylesheet so be sure to include these as well:
/* Manually hidden */
.my-custom-class th.ui-table-cell-hidden,
.my-custom-class td.ui-table-cell-hidden {
display: none;
}
/* Manually shown */
.my-custom-class th.ui-table-cell-visible,
.my-custom-class td.ui-table-cell-visible {
display: table-cell;
}
Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a set of pre-configured breakpoints for each of the six priority levels that you can use if they happen work well for your content.
These breakpoints can be applied by adding a class="ui-responsive" to the table element. Here is an example of a table with this class added:
<table data-role="table" class="ui-responsive" data-mode="columntoggle" id="my-table">
The six preset breakpoint classes included in the column toggle stylesheet use regular increments of 10em (160 pixels). Here is a summary of the breakpoints assigned to each priority in the preset styles:
data-priority="1"data-priority="2"data-priority="3"data-priority="4"data-priority="5"data-priority="6"If these preset breakpoints don't work for your content and layout needs, we recommend that you create custom breakpoints to fine tune the styles.
It's fairly common to need to logically group multiple columns under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (TH), with the first row containing simple colspan attributes to group the columns below. In this configuration, the framework will parse the first row only for the priority and expose these heading groups as the options in the column chooser popup. In this configuration, the second heading will not be exposed as columns that can be hidden or shown independently of the groupings in the chooser.
This table illustrates the standard customization options for a column toggle table. The table has a custom theme and label text for the column chooser button, and a theme set on the popup.
The table background is themed by adding class="ui-body-d" to the table element. The table header is given a themed appearance by adding the class="ui-bar-d" to the header row. The striped rows are created by adding the table-stripe class to the table element.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
| 4 | Gone with the Wind | 1939 | 96% | 87 |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 |
| 6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74 |
| 7 | The Graduate | 1967 | 91% | 122 |
| 8 | The Wizard of Oz | 1939 | 90% | 72 |
| 9 | Singin' in the Rain | 1952 | 89% | 85 |
| 10 | Inception | 2010 | 84% | 78 |
The columns of data are shown and toggled as sets under each grouped heading for each financial quarter. In this example, the totals are shown at narrow widths, then more historical quarters are revealed at wider widths by assigning priorities to the columns.
| Q1 2012 | Q2 2012 | Q3 2012 | Q4 2012 | YTD Totals | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Store | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change |
| Boston | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| Chicago | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
| NYC | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
This is an example of how to use the column toggle table to create a comparison view where products can be shown or hidden.
| Model |
AppleiPhone 5 |
SamsungGalaxy S III |
NokiaLumia 920 |
HTCOne X |
|---|---|---|---|---|
| Photo |  |
 |
 |
 |
| Height | 4.87" | 5.38" | 5.11" | 5.3" |
| Width | 2.31" | 2.78" | 2.79" | 2.75" |
| Depth | 0.3" | 0.34" | 0.42" | 0.37" |
| Weight (lbs.) | 0.25 | 0.29 | 0.41 | 0.29 |
The Sydney Opera House provides 45,000 square metres (11 acres) of usable office space out of 18,000 square metres (4.5 acres) of land. It is 183 metres (600 feet) tall and about 120 metres (388 feet) wide at its widest point. It is supported on 580 concrete piers sunk up to 25 metres below sea level. It has about 1000 rooms. It has five theatres, five rehearsal studios, two main halls, four restaurants, six bars and numerous souvenir shops. source: sheppardsoftware.com
Seoul, officially the Seoul Special City, is the capital and largest city of South Korea. With a population of over 10 million, it is one of the world's largest cities. The Seoul National Capital Area, which includes the Incheon metropolis and most of Gyeonggi province, has 24.5 million inhabitants. source: bezbrige.com
Each year, 44 million tourists visit Paris and the surrounding Ile de France region. Paris is year after year the most visited city in the world. source: parisdigest.com
Although many legends exist about the origin of New York City's nickname, the Big Apple, most historians agree that it can be traced back to a writer who covered horse racing in the 1920s. In The Morning Telegraph, he wrote that stable hands often referred to New York as the Big Apple, meaning that any thoroughbred that raced in New York had reached the pinnacle of racing. source: nylady.hubpages.com
This demo shows how you can use the swipe event to navigate between pages. We are using single HTML files for each page. Here you can see the JavaScript and CSS source. On each of the demo pages you can see the page markup as well.
Here some text.
Although it’s the youngest official language in the world, Afrikaans is most widely spoken and is home language for 40% of the Cape's population. The remainder of the population speaks either Xhosa or English as a home language. source: gotravel24.com
At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the RÃo de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. source: inautonews.com
This demo shows how you can remove list items by swiping left or right. For devices without touchscreen there is a delete button. This demo also contains a custom styled confirmation popup.
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
Delete4-for-3 Books for Kids
As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.
4:37PM
DeleteRe: This weekend in Maine
Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?
3:24PM
DeleteRedfin listing updates for today
There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.
2:52PM
DeleteLink Request
My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link
1:24PM
DeleteYou've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
11:24AM
DeleteBoston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
DeleteRe: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
Delete4-for-3 Books for Kids
As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.
4:37PM
DeleteRe: This weekend in Maine
Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?
3:24PM
DeleteRedfin listing updates for today
There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.
2:52PM
DeleteLink Request
My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link
1:24PM
DeleteYou've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
11:24AM
DeleteBoston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
DeleteSliders are used to enter numeric values along a continuum and can also be dual handle range sliders or flip switches.
Here we show how you can hide the number input and make the slider full width with custom CSS.
The slider below has been created at runtime.
Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu. There is also a custom select menu widget, which also replaces the native dropdown.
The custom select uses a popup with a listview to display the menu. For long lists a dialog will be used.
These examples show how you can filter the list inside a custom select menu.
You can create an input field and prepend it to the popup and/or the dialog used by the custom select menu list and you can use it to filter items inside the list by instantiating a filterable widget on the select menu.
Responsive web design (RWD) is a design and technical approach that aims to adapt the layout and interaction of a site or app to work optimally across a wide range of device resolutions, screen densities and interaction modes with the same underlying codebase. The framework has a number of responsive widgets: responsive grids, reflow tables and column chooser tables, and panels.
RWD has three key elements:
By creating all screen elements to be fluid and flexible, it allows the media queries to focus primarily on controlling layout rules for containers; the modules inside simply re-size to fit their containers.
A simple responsive example may be two stacked containers, each with flexible content or widgets inside. At greater widths, media queries are used to float both containers to create a two column layout to take better advantage of the wider screen.
Since the content inside each container is designed to re-flow to fit its parent, the media queries can focus just on the rules for making the columns stack or float, and to override or add styles only needed at greater widths.
In addition to these three core RWD principles, we advocate following progressive enhancement (PE) practices. This means always starting with semantic HTML which will work on any device, then unobtrusively layering in advanced CSS and JS only for capable browsers. This provides a solid foundation for the device-level optimizations that RWD provides and is how the jQuery Mobile library is built.
When working with RWD, it's very important to consider performance to ensure that you're not simply taking a heavy desktop site and shrinking it down to mobile screens. We recommend following a "mobile-first" approach to keep development focused on reducing bandwidth, server requests and optimizing source order.
When building a page, start by creating the lightest and most semantic HTML possible. Think about how the source order of the markup would work if you didn't have CSS or JS. Do not include code that is only needed for larger viewports and hide it at smaller widths. Instead, use Ajax to conditionally load these assets when larger screens are detected via JS.
When writing CSS for a responsive site or app, it's usually most efficient to write all the core typography and basic style elements outside of a media query to form the styles for the smallest devices, such as phones. This is a good approach because the majority of these core styles are usually also shared at greater widths, albeit in a different layout and it leverages the cascading power of CSS. Build up breakpoints using multiple min-width media queries to layer in additional style rules that should only apply above a certain screen width.
For images in your pages, we recommend starting with images sized for mobile screens in the markup. It doesn't make sense to serve a 1,000 pixel wide photo to a smartphone with a 480 pixel max resolution because this is a waste of bandwidth and memory. Instead, include an image targeted for a mobile size. Add a width: 100%; style rule to make images scale to the page or container, but not larger because this would look blurry.
For larger or higher resolution screens, there is a wide range of JS-based techniques and services to conditionally load a higher quality image. The forthcoming pictureelement will address the need to handle multiple image sources natively in HTML and can be used today with a polyfill script.
Always look for ways to limit the number of server requests on a page by concatenating files into a single request and always use minification and compression (gzip).
jQuery Mobile has always been designed to work within a responsive context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build.
Here is a checklist of RWD tips to keep in mind:
min-width breakpoints that build on top of the mobile styles. The first breakpoint applies layout adjustments on top of the standard mobile styles so these can be fairly lightweight. Additional min-width breakpoints can be added for even wider screens that each build on the previous breakpoint styles.max-width breakpoint instead. This allows you to constrain your style overrides to only apply below a certain screen width. Above this width, all the normal styles will apply so this is good for certain types of overrides.Here is a simple skeleton of a mobile-first stylesheet that starts with mobile-first styles, then builds up a responsive layout by adding two breakpoints:
/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* You can also tweak any other styles in a breakpoint */
H1 { color: blue; font-size:1.2em }
}
Range slider offer two handles to set a min and max value along a numeric continuum.
The popup widget can be used for various types of popups. From a small tooltip popup to a large photo lightbox.
To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
This is a completely basic popup, no options set.
A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class. Here we also show how you can custom style the tooltip button.
A paragraph with a tooltip. Learn more
Here is a tiny popup being used like a tooltip. The text will wrap to multiple lines as needed.
A lightbox for displaying images can be created easily by placing an image in a popup. In this example, a close button is added to the markup by adding a link. The data-overlay-theme="b" attribute adds a dark backdrop behind the photos. For advanced photo techniques, see scaling images in popups.
A menu can be created by adding a listview inside a popup.
A nested menu can be created by placing listview into an collapsible inside a popup.
You can place a form inside a popup. When it opens, focus will be restricted to elements inside the popup.
Standard dialog markup can be placed into a popup. To create a modal style dialog, add the data-dismissible="false" attribute to the popup to prevent the click-outside-to-close behavior so people need to interact with popup buttons to close it.
For popups with formatted text, padding is needed. The ui-content class can be added to the popup to add the standard 15px of padding. When padding is added, we apply a few style rules to negate the top margin for the first heading or paragraph in the popup and do the same for the last element's bottom margin.
This is a popup with the ui-content class added to the popup container.
By default popups can be closed either by clicking outside the popup widget or by pressing the Esc key. To prevent this, the data-dismissible="false" attribute can be added to the popup. To add an explicit close button to a popup, add a link with the role of button into the popup container with a data-rel="back" attribute and position via a class.
I have a close button at the top right corner with simple HTML markup.
I have a close button at the top left corner with simple HTML markup.
I have the data-dismissible attribute set to false. I'm not closeable by clicking outside of me.
By default, popups open centered vertically and horizontally over the element you clicked (the origin) which is good for popups used as tooltips or menus. If a popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window. It's also possible to specify any valid selector as the value of position-to in addition to origin and window.
I am positioned to the window.
I am positioned over the origin.
I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.
By default, popups have no transition to make them open as quickly as possible. To set the transition used for a popup, add the data-transition attribute to the link that references the popup. The reverse transition will be used when closing the popup. For performance reasons on mobile devices, we recommend using simpler transitions like pop, fade or none for smooth and fast popup animations.
The popup has two theme-related options: data-theme and data-overlay-theme. The data-theme option refers to the theme of the popup itself, whereas data-overlay-theme controls the semi-opaque layer behind the popup. The theme is inherited from the page; specify data-theme="none" for a popup with a transparent background.
I have data-theme="a" set on me
I have a data-overlay-theme="a" set on me
I have data-theme="b" and data-overlay-theme="a" set on me
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
Click in the pink area below to display a popup with an arrow.
A paragraph inside the popup with an arrow.
This second paragraph serves to increase the height of the popup
You can supply pre-rendered popup markup to save startup time. The page in the example below contains a popup with pre-rendered markup supplied as part of the original page markup.
You can reuse the same popup on multiple pages if you declare it as a direct child of the body element. It can then appear on any page in the document.
If you define the popup outside of any page, then you must take care to instantiate the popup widget yourself. You can do this as early as DOMReady, because the popup is not on any page.
The example below illustrates the setup with two pages.
This is another page that can be reached using the links in the global menu.
This is a third page that can be reached using the links in the global menu.
The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the max-height of the image.
The handler is bound to the popupbeforeposition event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.
You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.
Here is an example of a 3rd party video player embedded in a popup:
The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class ui-content and a one pixel border because the framework will add class ui-body-a to the popup.
When using an iframe inside a popup it is important to initially set the width and height attributes to 0. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use attr() to set the zero values upon the pagecreate event.
Next, bind to the popupbeforeposition event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function scale() is used to scale down the iframe to fit smaller screens.
When the popup is closed the width and height should be set back to 0. You can do this by binding to the popupafterclose event.
Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the popupafterclose event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.
In the second example, an iframe is used to display Google Maps API. Using an iframe prevents issues with the controls of the map.
Expand the section below to view the source of the iframe.
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is #map_canvas.
This demo shows how you can dynamically create a popup. The popup contains images which means we have to set the image width and height to make sure the popup gets the right size and position. At client side we can only get the size when the image has been loaded in the DOM. In this demo we use the load event, but with a fallback because it has some caveats (see .load() - jQuery API).
The size of the popup arrow can be adjusted via custom CSS. Drag the slider below and copy/paste the resulting CSS into your project. Make sure you paste it after the jQuery Mobile structure/theme CSS.
This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is before the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelFlexible by design, panels can be used for navigation, forms, inspectors and more.
Left panel examples
Overlay Reveal PushRight panel examples
Overlay Reveal PushThe position of the panel on the screen is set by the data-position attribute. The default value of the attribute is left, meaning it will appear from the left edge of the screen. Specify data-position="right" for it to appear from the right edge instead.
The display mode of the panel is set by the data-display attribute. The value of the attribute defaults to reveal, meaning the panel will sit under the page and reveal as the page slides away. Specify data-display="overlay" for the panel to appear on top of the page contents. A third mode, data-display="push" animates both the panel and page at the same time.
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version.
Here is an example of the panel before the header, content and footer in the source order:
<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div><!-- page -->
Alternatively, it's possible to add the panel markup after the header, content and footer in the source order, just before the end of the page container. Where in the source order you place the panel markup will depend on how you want the page content to read for people experiencing the page on a C-grade device (HTML only) or for a screen reader.
If you want to use the same panel on multiple pages you can place the markup outside the page. See external panels.
When you dynamically add content to a panel or make hidden content visible while the panel is open, you have to trigger the updatelayout event on the panel.
$( "#mypanel" ).trigger( "updatelayout" );
The framework will then check the new height of the panel contents. If it exceeds the screen height, it will set the page min-height to this height and unfix panels with data-position-fixed="true". See also Panel positioning.
To control a panel from a link, set the href to the ID of the panel you want to toggle (mypanel in the example above). This instructs the framework to bind the link to the panel. This link will toggle the visibility of the panel so tapping it will open the panel, and tapping it again will close it.
Clicking the link that opened the panel, swiping left or right, or tapping the Esc key will close the panel. To turn off the swipe-to-close behavior, add the data-swipe-close="false" attribute to the panel.
By default, panels can also be closed by clicking outside the panel onto the page contents. To prevent this behavior, add the data-dismissible="false" attribute to the panel. It's possible to have the panel and page sit side-by-side at wider screen widths and prevent the click-out-to-close behavior only above a certain screen width by applying a media query. See the responsive section below for details.
It's common to also add a close button inside the panel. To add the link that will close the panel, add the data-rel="close" attribute to tell the framework to close that panel when clicked. It's important to ensure that this link also makes sense if JavaScript isn't available, so we recommend that the href point to the ID of the page to which the user should jump when closing. For example, if the button to open the panel is in the header bar that has and ID of my-header, the close link in the panel should be:
<a href="#my-header" data-rel="close">Close panel</a>
Panels will animate if the browser supports 3D transforms — the same criteria for CSS animation support we use for page transitions. Panel animations use translate3d(x,y,z) CSS transforms to ensure they are hardware accelerated and smooth.
The animate option allows you to turn off panel animations for all devices. To turn off animations via markup, add the data-animate="false" attribute to the panel container.
The panel will be displayed with the position:absolute CSS property, meaning it will scroll with the page. When a panel is opened the framework checks to see if the bottom of the panel contents is in view. If not, it scrolls to the top of the page.
You can set a panel to position:fixed, so its contents will appear no matter how far down the page you're scrolled, by adding the data-position-fixed="true" attribute to the panel. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and make it inaccessible. overflow is not well supported enough to use at this time. If the panel contents are too long to fit within the viewport, the framework will simply display the panel without fixed positioning. See an example of panels with fixed positioning.
By default, panels have very simple styles to let you customize them as needed. Panels are essentially just simple blocks with no margins that sit on either side of the page content. The framework wraps the panel content in a div with class ui-panel-inner which has a padding of 15 pixels. If needed you can override this with custom CSS or use option classes.panelInner to set a different class name for the div.
Panels have a fixed width of 17em (272 pixels) which is narrow enough to still show some of the page contents when open to make clicking out to close easy, while still looking good on wider tablet or desktop screens. The styles to set widths on panels are fairly complex but these can be overridden with CSS as needed.
Other than the theme background, width and 100% height styles, panels have very little styling on their own. The default theme for panels is "c". You can set a different theme for the panel by adding a data-theme attribute to the panel container, or you can set data-theme="none" and add your own classes to style it as needed.
Note that adding padding, borders, or margins directly to the panel container will alter the overall dimensions and could cause the positioning and animation to be affected. To avoid this, apply styles to the panel content wrapper (.ui-panel-inner).
When the push or reveal display is used, a panel pushes the page aside when it opens. Since some of the page is pushed offscreen, the panel is modal and must be closed to interact with the page content again. On larger screens, you may want to have the panel work more like a collapsible column that can be opened and used alongside the page to make better use of the screen real estate.
To make the page work alongside the open panel, it needs to re-flow to a narrower width so it will fit next to the panel. This can be done purely with CSS by adding a left or right margin equal to the panel width (17em) to the page contents to force a re-flow. Second, the invisible layer placed over the page for the click-out-to-dismiss behavior is hidden with CSS so you can click on the page and not close the menu.
Here is an example of these rules wrapped in a media query to only apply this behavior above 35em (560px):
@media ( min-width: 35em ) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
}
Included in the widget styles is a breakpoint preset for this behavior that kicks in at 55em (880px). This breakpoint is not applied by default to make it easier for you to write custom breakpoints that work best for your content and design. To apply the breakpoint preset, add the ui-responsive-panel class to the page or, in case you use external panels and/or fixed toolbars, to the page container (body). See an example of a responsive panel page.
This panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelBy default panels can be closed by swiping in the direction of the open panel. In this demo we show how you can also open a panel with swipe. This is not part of the framework, because in case of multiple panels we wouldn't know which one to open.
The demo page has two menus, one at each side. Both can be opened with swipe or with the buttons in the header.
Open demoLeft reveal panel.
CloseRight push panel.
CloseIn this demo we show you how to:
Click the "view source" button to see the CSS and markup of this demo and open the demo to see the result.
Open demo
A fixed-gear or fixed-wheel bicycle, commonly known as a fixie, is a bicycle that has a drivetrain with no freewheel mechanism. The freewheel was developed early in the history of bicycle design but the fixed-gear bicycle remained the standard track racing design. More recently the 'fixie' has become a popular alternative among mainly urban cyclists, offering the advantages of simplicity compared with the standard multi-geared bicycle.
Source: Wikipedia
This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the class="ui-responsive-panel" to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.
This is just a landing page.
BackThis is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode. The right panel opens as overlay. For both panels we set data-position-fixed="true". We also set position fixed for the header and footer on this page.
The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.
We made the page a bit longer because you only see the panel fixed positioning if you can scroll the page :-)
This is just a landing page.
BackThese panels only exist if you navigated to this page from page 1, because the markup for the panels is in the HTML document of the first page. If you refresh this page the links below will no longer work.
Left panel examples
Overlay Reveal PushRight panel examples
Overlay Reveal PushThe panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
Navigate to page 2 to see this behavior. The HTML document for page 2 doesn't contain panel markup, but you can still open the panels.
Left panel examples
Overlay Reveal PushRight panel examples
Overlay Reveal PushThis panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelThis panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.
To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:
Close panelContent
The left panel and fixed header are outside the page. The right panel and fixed footer are inside the page.
Open right panelContent
The left panel and fixed header are outside the page. The right panel and fixed footer are inside the page.
Open right panelContent
The left panel and fixed header are outside the page. The right panel and fixed footer are inside the pages.
Open right panelallowSamePageTransition option at changePage() method set to true. It seems, just the slide transition raises an issue so the page gets hidden.
The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. A HTML document may start with a single "page" and the Ajax navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, a HTML document can be built with multiple "pages" inside it and the framework will transition between these local views with no need to request content from the server.
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. The easiest way to get started is to link to files hosted on the jQuery CDN or for best performance, build a custom bundle.
Here is how you can link to the CDN, where [version] should be replaced by the actual version. See also the download page on the web site.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>
Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.
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.
<div data-role="page">
...
</div>
Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header", class="ui-content", and data-role="footer".
<div data-role="page">
<div data-role="header">...</div>
<div role="main" class="ui-content">...</div>
<div data-role="footer">...</div>
</div>
Putting it all together, this is the standard boilerplate page template you should start with on a project:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a data-role of "page". Each "page" block needs a unique id (id="foo") that will be used to link internally between "pages" (href="#foo"). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.
Here is an example of a two "page" site built with two jQuery Mobile divs navigated by linking to an id placed on each page wrapper. Note that the ids on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look like inside the body element.
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax "pages", it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a "page" with an id of #foo instead of the native behavior of scrolling to the content with that id.
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it's needed for managing pages, but the starting markup can now be extremely simple.
Note: In a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.
Also Note: If your body contains no data-role="page" divs, jQuery Mobile wraps the entire contents of the body within a page div as explained above.
jQuery Mobile is using jQuery's wrapAll() method to do this which looks for any script tags inside the content being wrapped, and loads each script source via XHR.
If scripts are present in the body, the browser ends up loading them twice.
We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a div with data-role="page".
When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered.
Alternatively, you can prefetch a page programmatically using the pagecontainer widget's load() method:
$( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } );
Keeping lots of pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash. jQuery Mobile has a simple mechanism to keep the DOM tidy.
Whenever it loads a page via Ajax, it flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it re-fetches the file from the server. (In the case of nested listviews, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)
If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.
$.mobile.page.prototype.options.domCache = true;
Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container.
To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:
pageContainerElement.page({ domCache: true });
Note that the contents of the first page isn't removed from the DOM, only pages loaded in via Ajax. Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.
This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.
Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.
This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.
Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.
You link to internal pages by referring to the id of the page you want to show. For example, to link to the page with an id of "two", my link would have a href="#two" in the code.
I have an id of "two" on my page container. I'm the second page container in this multi-page template.
Notice that the theme is different for this page because we've added a few data-theme swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.
I have an id of "popup" on my page container and only look like a dialog because the link to me had a data-rel="dialog" attribute which gives me this inset look and a data-transition="pop" attribute to change the transition to pop. Without this, I'd be styled as a normal page.
Any page can be presented as a modal dialog that appears to be suspended above the page by adding an attribute to the link that leads to the dialog page.
Note: The dialog widget is deprecated in 1.4 and will be removed in 1.5. The page widget now has the dialog option which, when set to true will apply dialog styling to a page.
Any page can be presented as a modal dialog by adding the data-dialog="true" attribute to the page. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. By default the framework will also add a close button if the dialog has a header.
<a href="dialog.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>
By default, the dialog will open with the same transition as a regular page. Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slidedown" or "flip".
<a href="dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="slidedown">data-transition="slidedown"</a>
When any link is clicked within a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. Nevertheless, dialogs can also be chained, as explained below under "Chaining Dialogs". Similarly, a link that opens a popup will also leave the dialog in place.
If the dialog has a header the framework will add a close button at the left side of the header. You can change the position by adding data-close-btn="right" to the dialog container. If you don't want a close button in the header or if you want to add a custom close button, you can use data-close-btn="none".
To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-rel="back" attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.
For JavaScript-generated links, you can simply set the href attribute to "#" and use the data-rel="back" attribute.
Just like the page plugin, you can set a dialog's close button text through an option or data attribute.
This option is used to customize the text of the close button which is helpful for translating this into different languages. This is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.
The option can be configured for all dialogs by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string of your choosing, or you can place the data attribute data-close-btn-text to configure the text from your markup.
Please note: If a dialog opens another dialog (chaining), closing the last one with a link of type data-rel="back" will always navigate to the previous dialog until the root-page of type data-role="page" is reached. This guarantees a consistent navigation between dialogs.
Dialogs can be styled with different theme swatches, just like any page by adding data-theme attributes to the header, content, or footer containers. Here is an example of a different dialog design:
By default dialogs have rounded corners. The option corners can be set to false by adding data-corners="false" to the dialog container:
Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch "e":
Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of my-dialog, you could add this CSS to pin that dialog to the top: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, or you could just apply that style to all dialogs with .ui-dialog .ui-dialog-contain { margin-top: 0 }.
For the sake of readability, dialogs have a default width of 92.5% and a max-width of 500 pixels. There is also a 10% top margin to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. The dialog's inner container is shifted towards the top with 15px to hide the corner styling if a dialog is used as a control sheet (see above). To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:
.ui-dialog-contain {
width: 92.5%;
max-width: 500px;
margin: 10% auto 15px auto;
padding: 0;
position: relative;
top: -15px;
}
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
This dialog adds data-overlay-theme="b" to the page container to set the overlay swatch color.
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
This demo illustrates the different page events that fire during a page's life-cycle and the elements on which they are triggered.
This demo uses the jquery-mobile-event-debugger plugin from arschmitz available at https://github.com/arschmitz/jquery-mobile-event-debugger. This tool allows jQuery Mobile events to be logged or alerted as they happen for inspection and are augmented with descriptions from the API docs.
View Demo View Demo With AlertsNote: this page has not been updated after 1.3
This is probably because the element you see in the markup (button, form element, etc.) isn't the same after enhancements have been applied. In order to style elements and add behavior, jQuery Mobile modifies the original markup with additional classes and elements which could impact your CSS selectors. Use a web inspector to view the post-enhancement markup to find the right selectors to use.
Let's look at an example to illustrate the enhancements. Here is the starting markup for a button:
// Button before enhancement
<button>Button element</button>
After enhancement, the button markup has been modified by the framework to add classes and wrap the contents for styling:
// Button after enhancement
<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Button element</span>
</span>
<button class="ui-btn-hidden" aria-disabled="false">Button element</button>
</div>
As you can see from the code snippet above the markup has significantly changed after enhancement. The original button you added has been wrapped in a div and had several spans added. The original button you added is now also hidden. To change the visual styling of the button you must target the new enhanced markup not the button you added.
Note: this page has not been updated after 1.3
jQuery Mobile currently only supports loading of single page documents via Ajax. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
While some form elements that jQuery Mobile enhances are simply styled, some (like the slider) are custom controls built on top of native inputs.
Changing the value of a normal input such as a text or search box will render the value immediately, but changing the value of a select menu, slider, or any other complex
custom form control will require calling a refresh operation to re-enhance the control to reflect your new value.
Let's use the example of a Select Menu to demonstrate how to update the value on a complex control:
// Some markup for a select menu
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
// Your Javascript:
<script>
$('#page1').on('pagecreate', function() {
// Update the select menu's value to 'c' and refresh the control
$('select').val('c').selectmenu('refresh');
});
</script>
In the snippet above we have a simple select menu, and we are updating the value of the menu after the page has initialized. When jQuery Mobile enhances the page, the select menu
will be modified to make it more mobile friendly and consistent across devices. That means the simple select menu we are used to interacting with needs a little more work to update.
We can simply call $('select').selectmenu('refresh') to have our select menu update to its current value.
Other form inputs that require refreshing are the slider, the toggle switch, checkboxes, and radio buttons. To refresh the slider or the toggle switch, call slider('refresh'). To refresh
the checkbox or radio controls, call checkboxradio('refresh').
Note: this page has not been updated after 1.3
It is important to remember that create must be triggered on the parent container and not on the individual element that needs to be enhanced.
//HTML
<form id="formid">
<input type="search" id="searchInput"/>
<button id="submitButton">Submit</button>
</form>
//javaScript **CORRECT**
$("#formid").trigger("create");
//javaScript INCORRECT
$("#searchInput").trigger("create");
$("#submitButton").trigger("create");
Note: this page has not been updated after 1.3
The issue here is not actually jQuery Mobile but the fact that some browsers return a status of zero. This causes the internal error handlers to be triggered in jQuery's Ajax function.
There is a simple workaround for this:
$.ajaxPrefilter( function(options, originalOptions, jqXHR) {
if ( applicationCache &&
applicationCache.status != applicationCache.UNCACHED &&
applicationCache.status != applicationCache.OBSOLETE ) {
// the important bit
options.isLocal = true;
}
});
One important note on this workaround is that this sets is local to true for all Ajax requests weather or not they are in the manifest. This works currently because is local is only checked As long as the cache is valid and the status is 0 so it doesn't affect uncached results. This may change in the future breaking applications using this workaround.
Note: this page has not been updated after 1.3
Whether a custom select shows as a dialog or popup is based on the number of options and the amount of available space on the screen for maximum usability across devices. By default, the framework will use a small popup if all the options fit on-screen without scrolling. Longer selects open in a dialog to avoid awkward scrolling within a popup.
Note: this page has not been updated after 1.3
jQuery Mobile's Ajax navigation system only loads in the contents of the page wrapper, the scripts and styles in the head are discarded so you need to plan how to load and organize these assets.
When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided), meaning nothing in the head of the page will be used (with the exception of the page title, which is fetched specifically). Please note that scripts loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.
This means that any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pagecreate event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Another approach for page-specific scripting would be to include scripts at the end of the body element when no data-role=page element is defined, or inside the first data-role=page element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a data-role="page" element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.
Note: this page has not been updated after 1.3
jQuery Mobile does not currently support passing information via the hash to pages. This is because jQuery Mobile uses the hash for history tracking and navigation. Any alterations to the hash or attempting to set or pass a hash will interfere with this process and result in unexpected behavior. There is currently no workaround except to disable jQuery mobile's hash and history handling altogether. There are, however, plans to support this in some form in future releases
Note: this page has not been updated after 1.3
If you are trying to pass query parameters to an internal or embedded page this is not supported. This has to do with limitations in how jQuery mobile sets the data-url for pages. The data-url is set only once when the page is initialized.
There are also currently three different plugins available for jQuery Mobile to support passing of query params to internal pages.
Note: this page has not been updated after 1.3
These inputs are degraded to type text or number to allow for consistent look and enhancement by jQuery Mobile. For example, we parse the min, max, value, and step attributes of a range input to configure the JavaScript-based slider we generate to give us full control of the features and appearance. We then 'degrade' the input type of the original range input (which is a native slider) to number in order provide the numeric field next to the slider.
Note: this page has not been updated after 1.3
jQuery Mobile does not have control over the UI for most of the newer HTML5 input elements like date, color and number. The keyboards and pickers provided are browser-dependent but will safely fall back to a standard input if it's not supported. We do apply basic border and color styles to inputs for these elements so there is some visual consistency. See the text input page for examples of all the input types available
Note: this page has not been updated after 1.3
jQuery Mobile has no way to know when you have injected content into a page. To let jQuery Mobile know you have injected content that must be enhanced, you need to either make sure the plugins are called to enhance the new elements or trigger("create") on the parent container so you don't have to call each plugin manually.
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
//HTML
<form id="formid">
<input type="search" id="searchInput"/>
<button id="submitButton">Submit</button>
</form>
// JavaScript **CORRECT**
$("#formid").trigger("create");
// JavaScript INCORRECT
$("#serchInput").trigger("create");
$("#submitButton").trigger("create");
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.
Note: this page has not been updated after 1.3
The jQuery Mobile theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects.
The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project. View a tutorial on how to use ThemeRoller to create a custom theme on the learn site.
If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both.
All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists. Those default to "b" (blue in the default theme). Count bubbles default to "c" (silver in the default theme).
Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the Global "Active" state further down this page for further information on the active swatch.
The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can configure those defaults globally..
Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font text-shadow.
The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations.
Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.
The default theme contains the following five bar styles:
By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the data-theme attribute to your header or footer and specify an alternate swatch letter ("b" or "d", for example) and the specified theme swatch color will be applied.
The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme.
If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a".
Each swatch also includes default styles for interactive elements like list items and buttons. Each button has styles for normal, hover/focus and pressed states.
By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. This behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.
If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a data-theme="a" to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.
The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-btn-active style rules.
There is a core set of standard icons included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.
Assigning color swatches through the data-theme attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:
ui-bar-(a-z)ui-bar structural class to add the standard bar padding styles.ui-body-(a-z)ui-body structural class to add the standard content block padding styles. ui-btn-up-(a-z)ui-btn-hover-(a-z) and ui-btn-down-(a-z) interaction class states to provide visual feedback and ui-btn-active to indicate the selected or "on" state.ui-corner-allui-corner-tl (top left only), -top (both top corners), -left (both left corners), etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn-corner" instead of "corner", like this: .ui-btn-corner-all.ui-shadowbox-shadow property. ui-disabledpointer-events: none; which prevents any interaction in many modern browsers.The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors against which to target style overrides. We recommend adding an external stylesheet to the head, placed after the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.
Note: this page has not been updated after 1.3
One important consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 300-500ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit both touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.
Our solution is to create a set of virtual events that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: vmouseover, vmousedown, vmousemove, vmouseup, vclick, and vmousecancel.
Note: this page has not been updated after 1.3
Set $.mobile.hideUrlBar = false; on mobileinit
Note: this page has not been updated after 1.3
Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). This feature is slated for 1.4, but until then, you can use the silentScroll method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a yPos argument to scroll to that Y location.
Here is an example of how to scroll to a position:
//scroll to Y 300px
$.mobile.silentScroll(300);
Note: this page has not been updated after 1.3
Set $.mobile.hideUrlBar = false; on mobileinit
Note: this page has not been updated after 1.3
When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you're viewing. To remedy this, jQuery Mobile automatically parses the title of the page pulled via Ajax and changes the title attribute of the parent document to match.
On multi-page documents, we follow a similar convention, but since all the pages share a common title, we have a data-title attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the data-title of the page currently in view.
<div data-role="page" id="foo" data-title="Page Foo">
</div><!-- /page -->
Note: this page has not been updated after 1.3
Since PhoneGap/Cordova is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get started. PhoneGap is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview).
The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios.
Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: $.support.cors and $.mobile.allowCrossDomainPages, and can also be influenced by the white list feature in later builds of PhoneGap.
In jQuery core, there is a $.support.cors boolean that indicates whether or not jQuery thinks the browser supports the W3C "Cross-Origin Resource Sharing" feature to support cross-domain requests.
Since jQuery Mobile relies on jQuery core's $.ajax() functionality, $.support.cors must be set to true to tell $.ajax to load cross-domain pages. We've heard reports that webviews on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets $.support.cors value to false which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load.
If you find that the button down/hover state (lists, buttons, links etc) feels sluggish the $.mobile.buttonMarkup.hoverDelay setting might be of use. It will decrease the time between the touch event and the application of the relevant class but will also result in a higher chance that the same class will be applied even when the user is scrolling (eg, over a long list of links).
When jQuery Mobile attempts to load an external page, the request runs through the page container's load() method. This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false.
So in PhoneGap apps that must "phone home" by loading assets off a remote server, both the $.support.cors AND $.mobile.allowCrossDomainPages must be set to true. The $.mobile.allowCrossDomainPages option must be set before any cross-domain request is made so we recommend wrapping this in a mobileinit handler:
$( document ).on( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
});
On Android PhoneGap has as special navigation helper in place to work around issues with Honeycomb navigator.app.backHistory that replaces window.history.back. For most jQuery Mobile applications it's unecessary to have knowledge or make use of this helper because the vanilla history object works fine for hashchange and replace state alterations of the embedded browser history. If and only if your PhoneGap application uses a full page refresh (eg, for form validation) and you wish to support the Android platform, please make sure to set $.mobile.phonegapNavigationEnabled = true either in a mobileinit call back or anywhere before user interaction take place with the page. This will replace calls to window.history.back with calls to PhoneGap's helper method thereby alleviating history navigation issues associated with full page refreshes on Android devices.
PhoneGap 1.0 introduced the idea of white-listing servers to which its internal webview is allowed to make cross-domain requests. You can find info about it here on the PhoneGap wiki.
However, not all platforms support this white-listing feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.
Here are a few more tips that aren't specifically related to PhoneGap but are good to know:
We recommend disabling the pushState feature for installed apps because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a webview, it's not worth keeping this active in these situations.
Use to following code to disable pushState. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded.
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
Android enforces a timeout when loading URLs in a webview which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
Avoid underscores in files and folders because Phonegap may fail to load the contained files in Android. This is a known issue.
Try animation-fill-mode to reduce blinky transitions but beware that we're found that certain devices like the Nexus 7 run animations very slowly when this CSS property is in play. We recommend targeting this carefully and testing thoroughly to ensure that it doesn't impact smoothness. To see how to add this to your CSS, see this commit.
It's important to note that when creating a custom, non-PhoneGap, UIWebView control in an iOS application you must use the loadRequest method in preference to loadData for back button support. The snippet below is an example of loading default.html in your view controller.
- (void)viewDidLoad
{
[super viewDidLoad];
NSString *fullURL = [[NSBundle mainBundle] pathForResource:@"dialog" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:fullURL];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];
}Note: this page has not been updated after 1.3
To prevent jQuery Mobile form enhancing an element simply add data-role="none" to the element. Here is a select that is the normal, native element instead of the custom jQuery Mobile styled version that normally is seen:
Note: this page has not been updated after 1.3
To prevent jQuery Mobile from enhancing an entire block of content add data-enhance="false" to the parent container and nothing within the container will be enhanced.
To use data-enhance="false" you must also set $.mobile.ignoreContentEnabled to true prior to initialization
$(document).bind("mobileinit", function(){
$.mobile.ignoreContentEnabled = true;
});
An important note about setting ignoreContentEnabled to true is this has a substantial negative impact on performance. This is because now every time an element is to be enhanced jQuery Mobile must now traverse up the entire DOM tree to make sure the the element does not have a parent with data-enhance false set on it.
Note: this page has not been updated after 1.3
One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pagecreate event.
The pagecreate event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.
$( document ).delegate("#aboutPage", "pagecreate", function() {
alert('A page with an id of "aboutPage" was just created by jQuery Mobile!');
});
If you'd like to manipulate a page's contents before the pagecreate event fires and widgets are auto-initialized, you can instead bind to the pagebeforecreate event:
$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
alert('A page with an id of "aboutPage" is about to be created by jQuery Mobile!');
});
Note: this page has not been updated after 1.3
Buttons that are created from a link cannot be disabled because these aren't form elements and aren't designed to be disabled. This is the reason why the HTML spec does not provide for a disabled attribute on links. To disable a link-based button, you can add the .ui-disabled class via JavaScript and prevent interaction to give it a disabled appearance.
Note: this page has not been updated after 1.3
There are several well known bugs in mobile browsers regarding form elements inside position: fixed elements. Android 2.3 has a number of serious issues with fixed positioning and scrolling that can make select menus inoperable. See the device bugs project issue #1 https://github.com/scottjehl/Device-Bugs/issues/1
The $.mobile.navigate method and the navigate event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
One of jQuery Mobile's core features is the ability to load and view content from disparate pages into the initial document with support for standard navigation methods like anchors and the back button. To accomplish this the library has progressive support for hashchange and popstate coupled with internal history tracking which can be used à la carte.
An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with $.mobile.navigate. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, foo property of the object argument to the navigate method).
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ) {
// Prevent the usual navigation behavior
event.preventDefault();
// Alter the url according to the anchor's href attribute, and
// store the data-foo attribute information with the url
$.mobile.navigate( $(this).attr( "href" ), {
foo: $(this).attr("data-foo")
});
// Hypothetical content alteration based on the url. E.g, make
// an Ajax request for JSON data and render a template into the page.
alterContent( $(this).attr("href") );
});
Next, a navigate event binding helps in responding to backward and forward navigation via the browsers history API. Here the alterContent function can address the direction in which the browser is navigating as well as any additional information stored on the data object when $.mobile.navigate was invoked to store the corresponding history entry.
// Respond to back/forward navigation
$( window ).on( "navigate", function( event, data ){
if ( data.state.foo ) {
// Make use of the arbitrary data stored
}
if ( data.state.direction == "back" ) {
// Make use of the directional information
}
// reset the content based on the url
alterContent( data.state.url );
});jQuery Mobile provides the navigate event as a wrapper for both hashchange and popstate. That is, where a binding to both events would be required to support browsers with and without popstate only one binding to navigate is necessary. In this example, altering the hash will trigger the popstate or hashchange event depending on the browser, but only a single navigate binding is necessary. Make sure to use the back button after alterting the hash to see that the event is fired in both cases.
Note: when viewing the console output, some browsers (eg, Chrome) fire a popstate on the initial page load
// Bind to the navigate event
$( window ).on( "navigate", function() {
console.log( "navigated!" );
});
// Bind to the click of the example link
$( "#event-example" ).click(function( event ) {
event.preventDefault();
location.hash = "foo";
});
jQuery Mobile provides the $.mobile.navigate method as a means to track history and receive additional information along with navigate events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the navigate event is triggered as in the event example above but along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.
Note: The arbitrary state properties must be chosen carefully to avoid the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.
// Bind to the click of the example link
$( "#method-example" ).click(function( event ) {
// Append #bar
$.mobile.navigate( "#bar", {
info: "info about the #bar hash"
});
// Replace #bar with #baz
$.mobile.navigate( "#baz" );
// Log the results of the navigate event
$( window ).on( "navigate", function( event, data ) {
console.log( data.state.info );
console.log( data.state.direction );
console.log( data.state.url );
console.log( data.state.hash );
});
// Go back to pop the state for #bar and log it
window.history.back();
});
Method Example
Content
Clicking the link below will cause a page to be loaded from the server which contains a special instruction that is captured in the sample code to load the final redirection target page. Note that both the initial page (which contains the redirect) as well as the final redirect target page contain an intentional delay that should simulate network congestion and should allow jQuery Mobile enough time to display the loading indicator.
Note: This is a PHP demo that will only work on a server and not in a build (i.e. the demos that come with each release).
jQuery Mobile is designed to work with standard page link conventions and layers the Ajax navigation on top for maximum compatibility.
You can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal HTTP request is used instead.
The goal of this nav 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.
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this is done automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
If the Ajax request fails, the framework will display a small error message overlay (styled in the "a" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an example of the error message.
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
Example:
To the homepage, with AjaxLinks that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
In version 1.1, we added support for using data-ajax="false" on a parent container which allows you to exclude a large number of links from the Ajax navigation system. This avoids the need to add this attribute to every link in a container. To activate this functionality, $.mobile.ignoreContentEnabled must be set to true because this feature adds overhead we don't want to enable by default.
Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the $.mobile.pushStateEnabled global configuration option to avoid inconsistent navigation behavior in some browsers.
A single HTML document can contain one or many "page" containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first "page" it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that id (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
<a href="multipage.html" rel="external">Multi-page link</a>
If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog.
When using this feature in your source markup, although browsers that support this feature will not use the specified href attribute, be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers. If users can reach this page from more than one referring pages, specify a sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute instead.
Note: data-direction="reverse" is meant to simply run the backwards version of the transition that will run on that page change, while data-rel="back" makes the link functionally equivalent to the browser's back button and all the standard back button logic applies. Adding data-direction="reverse" to a link with data-rel="back" will not reverse the reversed page transition and produce the "normal" version of the transition.
When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.
However, you can work around this issue by returning your page div with a data-url attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations.
The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which you should be aware when building pages:
When linking to directories, without a filename URL, (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a URL is a filename, and it will remove that section when creating base URLs from which future pages will be referenced.
Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a jQuery Mobile page element. As a result the developer must make sure to manage the id attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.
If you link to a multipage document, you must use a data-ajax="false" attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a subpage plugin that makes it possible to load in multipage documents.
While linking pages inside a multipage template, you should not use the data-ajax="false" attribute as it is of no use and will only interfere with the transition settings.
The "ui-page" key name used in sub-hash URL references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in jQuery.mobile.subPageUrlKey.
When traveling back to a previously loaded jQuery Mobile document from an external or internal document with the push state plugin enabled, some browsers load and trigger the popstate event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving erratically try disabling pushstate support.
jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js. A newer plugin called routerlite keeps it simple with just four methods: routeinit, routechange, pageinit and pagechange.
Some external applications (notably Facebook's OAuth implementation) modify their response URL in such a way that interferes with jQuery Mobile. In particular, Facebook appends #_=_ to the end of the callback. Currently the best solution for this is to remove it from the location hash before jQuery Mobile loads using something like: if (window.location.hash == "#_=_") window.location.hash = ""; . jQuery Mobile can then process & enhance the page properly.
If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events pagebeforechange and pagecontainerbeforetransition.
The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.
My Area My Friends My ItemsThis is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.
You can also navigate to this same page with different parameters using the links below:
My Area My Friends My ItemsjQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.
A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. When a link in the navbar is clicked it gets the active (selected) state. The ui-btn-active class is first removed from all anchors in the navbar before it is added to the activated link. If this is a link to another page, the class will be removed again after the transition has completed.
To set an item to the active state, add class="ui-btn-active" to an anchor in the markup. Additionally add a class of ui-state-persist to make the framework restore the active state each time the page is shown while it exists in the DOM.
Navbars with 1 item will render as 100% wide.
The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:
Adding a third item will automatically make each button 1/3 the width of the browser window:
Adding a fourth more item will automatically make each button 1/4 the width of the browser window:
The navbar maxes out with 5 items, each 1/5 the width of the browser window:
If more than 5 items are added, the navbar will simply wrap to multiple lines of two across:
If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.
If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a data-role="footer"
The persistent navbar variation is designed to work more like a tab bar that stays fixed as you navigate across pages. To set an item to the active state upon initialization of the navbar, add class="ui-btn-active" to the corresponding anchor in your markup. Additionally add a class of ui-state-persist to make the framework restore the active state each time the page is shown while it exists in the DOM.
Icons can be added to navbar items by adding the data-icon attribute specifying a standard mobile icon to each anchor. By default, icons are added above the text (data-iconpos="top"). The following examples add icons to a navbar in a footer.
The icon position is set on the navbar container instead of for individual links within for visual consistency. For example, to place the icons below the labels, add the data-iconpos="bottom" attribute to the navbar container.
The icon position can be set to data-iconpos="left":
Or the icon position can be set to data-iconpos="right":
You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:
Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.
Navbars inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in the header or footer toolbar, it will inherit the default toolbar swatch "a" for bars unless you set this in the markup.
Here are a few examples of navbars in various container swatches that automatically inherit their parent's swatch letter. Note that in these examples, instead of using a data-theme attribute, we're manually adding the swatch classes to apply the body swatch (ui-body-a) and the class to add the standard body padding (ui-body), but the inheritance works the same way:
To set the theme color for a navbar item, add the data-theme attribute to the individual links and specify a theme swatch. Note that applying a theme swatch to the navbar container is not supported.
Instead of links you can also use button elements inside navbars.
In this demo we show you how to:
In this demo we show you how to:
A small loading overlay displayed when jQuery Mobile loads in content via Ajax, or for use in custom notifications.
The loader overlay can be icon only, text only or both. These demos rely on a custom JavaScript, view the source to see how it works.
Any HTML can be added to the loader overlay
The theme swatch can be set on the loader overlay.
A listview is coded as a simple unordered list (ul) or ordered list (ol) with a data-role="listview" attribute and has a wide range of features.
A listview is a simple unordered list containing linked list items with a data-role="listview" attribute.
Lists can also be created from ordered lists (ol) which is useful when presenting items that are in a sequence such as search results or a movie queue.
List items with links are styled as button.
Adding the data-inset="true" attribute to the list (ul or ol), applies the inset appearance which is useful for mixing a listview with other content on a page.
To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, use the data-filter-placeholder attribute. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data attribute data-filter-theme on your listview.
The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank. If you need to search against a long list of values, we provide a way to create a filter with a remote data source.
List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the data-divider-theme attribute to the list element (ul or ol) and specifying a theme swatch letter. You can override the divider-theme for a specific divider by adding the data-theme attribute to the list item.
A listview can be configured to automatically generate dividers for its items by adding a data-autodividers="true" attribute to any listview. By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the autodividersSelector option on the listview programmatically. This feature is designed to work seamlessly with the filter.
To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count. The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter.
The default icon for each list item containing a link is carat-r. To override this, set the data-icon attribute on the desired list item to the name of a standard icon. To prevent icons from appearing altogether, set the data-icon attribute to "false". With a bit of custom styling it's also possible to use third party icons.
To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element and insert 16x16 icons as img tags inside the list items.
To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square.
To make a split list item, simply add a second link inside the li. To adjust the split button icon, add the data-split-icon attribute to the listview . Add the data-icon attribute to individual list items for more control. The theme swatch color of the split button defaults to "b" (blue in the default theme) but can be set by specifying a swatch letter with the data-split-theme attribute at the listview level or for individual splits with the data-theme attribute at the link level.
Broken Bells
Purchase album
Hot Chip
Purchase album
Phoenix
Purchase albumYour download will begin immediately on your mobile device when you purchase.
Buy: $10.99 CancelTo add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24PM
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
The list item color scheme can be changed to any button color theme swatch by adding the data-theme attribute to the listview or to individual list items. The theme for list dividers can be set by adding the data-divider-theme to the list. The theme for count bubbles can be set by adding the data-count-theme to the list.
To specify the swatch for the split button, add the data-split-theme to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a data-theme attribute to specific links (see second list item). The icon for the split button can be set at the list level by adding the data-split-icon.
The white icon sprite is used by default in the theme. Adding the ui-alt-icon class to the list switches to the black sprite and gets rid of the dark disc.
Any form element can be placed inside a listview for a grouped presentation.
This is an example of a listview wrapped in a container with data-role="collapsible".
You can also use listviews inside a collapsible set (accordion) to visually group the list and ensure that only a single item can be open at once.
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24PM
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
Setting data-inset="false" on a collapsible or a collapsible set makes the collapsible full width (non-inset), like a full width listview.
You've been invited to a meeting at Filament Group in Boston, MA
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.
6:24PM
Boston Conference Planning
In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.
9:18AM
Re: Dinner Tonight
Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
4:48PM
4-for-3 Books for Kids
As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.
12:47PM
Nested listviews were deprecated in jQuery Mobile 1.3 and were removed in 1.4. For those wishing to use the 1.3 behavior there is a plugin available at https://github.com/arschmitz/jquery-mobile-nestedlists/. With this plugin you can use the same markup. All you need to do to be able to use "jQuery Mobile 1.3 style" nested listviews is drop the plugin script in after the jQuery Mobile script.
Apple released iOS 6.1
iOS
BlackBerry launched the Z10 and Q10 with the new BB10 OS
BlackBerry
Nokia rolls out WP 7.8 to Lumia 800
Windows Phone
New Samsung Galaxy Express
Samsung
Rumours about new full HD Nexus 7
Android
ZTE to launch Firefox OS smartphone at MWC
Firefox
First Samsung phones with Tizen can be expected in 2013
Tizen
Nokia confirms the end of Symbian
Symbian
A regular listview on smartphones, but grid tiles on tablets and larger screens? This demo shows you how you can accomplish this with custom CSS.
Create a listview from an unordered list. For this demo we used an inset listview to show you how you can apply the corner styling to the tiles as well.
In this demo there are two breakpoints. At the first breakpoint we swap from the regular stacked layout to a three column grid layout with tiles. At the second we switch from three to four columns.
The list items have a thumbail. In the grid layout those will get the same size as the tile. One list item doesn't hold an image to demonstrate how you can take advantage of class ui-li-has-thumb to adjust the style.
Apple released iOS 6.1
iOS
BlackBerry launched the Z10 and Q10 with the new BB10 OS
BlackBerry
Nokia rolls out WP 7.8 to Lumia 800
Windows Phone
New Samsung Galaxy Express
Samsung
Rumours about new full HD Nexus 7
Android
ZTE to launch Firefox OS smartphone at MWC
Firefox
First Samsung phones with Tizen can be expected in 2013
Tizen
Nokia confirms the end of Symbian
Symbian
You can create indented collapsible list items by instantiating collapsible widgets on them and adding some custom CSS to collapse borders and padding. In all the examples below, the outermost listview has class ui-listview-outer to identify it as the outermost listview in the tree structure of indented lists.
You can create collapsible list items by instantiating collapsible widgets on them and adding some custom CSS to collapse borders and padding.
By default the autodividers plugin will use the first character of a list item as selector. The option autodividersSelector allows you to return a different string. In this example we show you how to set an autodividers selector of "0-9" for list items that contain numbers so you can group them.
This demo shows the linkbar extension that adds a fixed positioned bar on the right of the screen that makes it easy to anchor down to a specific part of a listview. View the source to see how it works.
Open demoAn autocomplete widget backed by either local or remote data can be created by using the Filterable widget on a listview.
To use the filter as an autocomplete that taps into remote data sources, you can use the filterablebeforefilter event to dynamically populate a listview as a user types a search query: Remote autocomplete demo
The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank.
Any filter with more than 100-200 items may be slow to perform on a mobile device so we recommend using this feature for autocomplete situations with a relatively small number of items.
By default, the filter simply searches against the contents of each list item. If you want the filter to search against different content, add the data-filtertext attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.
This attribute is useful for dealing with allowing for ticker symbols and full company names to be searched, or for covering common spellings and abbreviations for countries.
France
Germany
Great Britain
Finland
United States
<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
To create an autocomplete that uses a remote data source, you can use the filterablebeforefilter event of the Filterable widget to dynamically populate a listview as a user types a search query.
This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.
If you have a small list of items, you can use the filter reveal option to make an autocomplete with local listview data.
After you enter at least three characters the autocomplete function will show all possible matches.
jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, tablet and desktop platforms.
jQuery Mobile is a user interface framework based on jQuery that works across all popular phones, tablet, e-reader, and desktop platforms. Built with accessibility and universal access in mind, we follow progressive enhancement and responsive web design (RWD) principles. HTML5 Markup-driven configuration makes it easy to learn, but a powerful API makes it easy to deeply customize the library.
A page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header", class="ui-content", and data-role="footer". The baseline requirement for a page is only the page wrapper to support the navigation system, the rest is optional.
A page can be styled as a dialog that makes the page look like it's a modal style overlay. To give a standard page the appearance of a modal dialog, add the data-rel="dialog" attribute to the link. Transitions can also be set on dialog links.
jQuery Mobile includes an Ajax navigation system to support a rich set of animated page transitions by automatically 'hijacking' standard links and form submissions and turning them into an Ajax request. The back button is fully supported and there are features to prefetch & cache, dynamically inject, and script pages for advanced use cases.
Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the Ajax nav system and is used to issue an Ajax request based on the href or form action instead of reloading the page. While the framework waits for the Ajax response, a loader overlay is displayed.
When the requested page loads, jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior. The rest of the incoming page is discarded so any scripts, stylesheets or other information will not be included. The framework will also note the title of the incoming page to update the title when the new page is transitioned into view.
Now that the requested page is in the DOM and enhanced, it is animated into view with a transition. By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.
Inside your content container, you can add any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the head after the jQuery Mobile stylesheet.
jQuery Mobile includes a wide range of touch-friendly UI widgets: form elements, collapsibles, collapsible sets (accordions), popups, dialogs, responsive tables, and much more. For best performance, use the download builder to pick the components you need.
jQuery Mobile includes a diverse set of common listviews that are coded as lists with a data-role="listview" added. Here is a simple linked list that has a role of listview. We're going to make this look like an inset module by adding a data-inset="true" attribute and we add a dynamic search filter with data-filter="true" and a text field.
The framework contains a full set of form elements that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no data-role needed. Be sure to wrap these in a form element and always properly associate a label with every form element.
jQuery Mobile has always been designed to work within a responsive web design (RWD) context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build.
The library also includes a number of responsive widgets like responsive grids, reflow tables and column chooser tables, and sliding panels.
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a data-theme="b" attribute to any of the widgets on this page to turn it black.
Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme.
When you're ready to build a custom theme, use ThemeRoller to drag and drop, then download a custom theme.
jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
New to jQuery Mobile? Get started by reading this introduction. For technical info, visit the API documentation. Downloads and info about the project can be found on jquerymobile.com.
A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons.
The text in the buttons below show the name of the icon used in that button.
In widgets where you set the icon with a data-icon attribute you use the name of the icon as value. For example: data-icon="arrow-r".
To add an icon to link buttons and button elements, use the name prefixed with ui-icon- as class. For example: ui-icon-arrow-r. See also button markup.
Icons are displayed as background image of :after pseudo elements. Target the pseudo element to set a custom icon.
You can safely use SVG icons. The framework contains a SVG support test and adds class ui-nosvg to the html element on platforms that don't support SVG. Use this class in your CSS to provide a PNG image as fallback.
.ui-icon-myicon:after {
background-image: url("iconimg.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-myicon:after {
background-image: url("iconimg.png");
}
By default, icons in input buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon position to "right", "top", or "bottom". In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).
Use "notext" as value for icon position if you want to create an icon-only button.
Set data-iconshadow="true" to enable icon shadow for input buttons, or add class ui-shadow-icon to your button markup.
Note: Icon shadow (option iconShadow in the button widget and class ui-shadow-icon) is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
The semi-transparent dark circle behind the icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. If you prefer to not have this disc, it can be removed by adding the class ui-nodisc-icon to the element or its container.
Example of the class being applied to a wrapper.
Icons are white by default but you can switch to black icons by adding the ui-alt-icon class to the element or its container. This also changes the color that is used for the discs.
Example of the class being applied to a wrapper.
Example of the classes being applied to a wrapper.
Example of the classes applied to the UL or OL to change to the black icons for each list item.
Example of the classes being applied to a collapsible.
Grunticon is a grunt plugin built by the Filament Group which takes SVG files and creates style sheets and PNG icons for use in your webpage. See https://github.com/filamentgroup/grunticon.
jQuery Mobile uses grunticon to generate SVG icons with PNG fallbacks and the style sheets for these. By default the library uses inline SVGs but falls back to individual PNGs if inline SVG is not supported.
However, you can further optimize for a wider variety of devices by using a loader script for selecting the approriate style sheet. This reduces data transfer and the length of the style sheet.
To use the grunticon loader place the script in the "View Source" button below in the head of your page before all other stylesheets or scripts. In the script you will see a call to the grunticon function at the bottom which is being passed an array of three stylesheet URLs. You will want to change this to match your setup or to point at the corresponding style sheets on the CDN.
After this script you will want to place a fallback style sheet in a noscript tag, in case JavaScript is disabled. Link in the "View Source" button below:
Based on your browser's abilities the style sheet loaded was:
Which means you are seeing
All the icons in the buttons below were loaded using the grunticon loader script. Use the toggle buttons to try all different options for icon style.
The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.
Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. Within the grid container, child elements are assigned ui-block-a/b/c/d/e in a sequential manner which makes each "block" element float side-by-side, forming the grid.
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second. On the blocks below, we're adding two classes: ui-bar to add the default bar padding and ui-bar-a to apply the background and font styling for the "a" toolbar theme swatch. For illustration purposes, an inline style="height:60px" attribute is also added to each grid to set each to a standard height.
Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:
The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%).
And an example of a 3 column grid with buttons inside:
View more examples of buttons in grids.
A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block.
A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fifth block.
Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the class=ui-block-a is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:
The framework adds left and right margin to buttons in a grid (one exception: 100% width button elements). For a single button you can use a container with class ui-grid-solo and wrap the button in a div with class ui-block-a like the example below. This way the button will get the same margin. View more examples of buttons in grids.
It's straightforward to take the standard grids and make them responsive by stacking the grid blocks at narrow widths. Since we just want to override the floats and widths of the standard grid styles below a single breakpoint, use a max-width breakpoint to only apply the stacked styling as an override.
We recommend adding a class (ex: my-breakpoint) to scope the styles for the media query so it can be applied selectively. From this basic start, you can customize the appearance further or even add additional breakpoints. See an example of a custom responsive grid.
/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}
}
To apply a preset breakpoint to stack grids below 35em (560px), add the .ui-responsive class to the grid container.
It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.
This example is a typical news feature block that changes its layout across screen widths and illustrates how to change the grid ratios and overall layout with simple CSS. It starts as a simple set of stacked stories on phones, that goes to a layout with the lead story full width stacked over a 50/50 layout of the secondary stories. At wider widths, these secondary stories float next to the lead story in a 50/25/25 layout. When the screen gets very wide, the font size is bumped up to keep line lengths short.
Use the view source button below to see how the media queries work for each of these breakpoints.
One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".
The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.
AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service.
On this page you see examples of how you can use grids to layout buttons.
Buttons in grids get a bit margin left and right. There is one exception; fullwidth button elements (i.e. not inline or icon-only). Because of the 100% width the margin can't be applied to the element directly. You can wrap them in a div and give this the same margin as other buttons as we do in this example:
Inline buttons can be centered by adding text-align: center; to your custom CSS.
It's not recommended to have many buttons with text on one row at small screens, because the text might get truncated. You can use responsive grids to stack the buttons at small screens. Here we use the framework preset breakpoint by adding class ui-responsive to the container.
Use grid solo to align a single button with buttons in other grids.
All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and finger-friendly.
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. Additionally, the id attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. You must be careful to use unique id attributes so there will be only one of each in the DOM. Be sure to pair them properly with label elements via the for attribute.
Buttons are used within a wide range of other plugins. The button markup is flexible and can be created from links or form buttons. Learn more about button markup and input buttons.
Inline buttons
Horizontal grouped buttons
Sliders are used to enter numeric values along a numeric continuum by dragging a handle or entering in a value. Learn more about sliders.
Range sliders offer two handles to set a min and max value along a numeric continuum. Learn more about range sliders.
Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element. Learn more about flip switches.
Checkboxes are used to provide a list of options where more than one can be selected. Learn more about checkboxes.
Radio buttons are used to provide a list of options where only a single option can be selected. Learn more about radiobuttons.
The select menu is used to offer a list of options in a compact picker. Ours is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu or a custom styled version. Learn more about selects.
Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Learn more about text inputs and textareas.
See the form gallery for more form element examples.
For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label. View more examples of accessibly hidden labels.
All jQuery Mobile widgets can be disabled in the markup by adding the standard disabled attribute to the element, just like you would with native controls. To dynamically disable or enable them, each form widget also has standard disable and enable methods that are documented with each form widget. View more examples of disabled form elements.
Note that you can disable buttons created from button or input-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.
To improve the styling of labels and form elements on wider screens, wrap a div or fieldset with the class="ui-field-contain" attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~448px. The framework will also add a thin bottom border to act as a field separator. See more examples of fieldcontainer groupings.
By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a select element will be found and initialized with the "selectmenu" plugin, while an input element with a type="checkbox" will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details.
If you should generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the refresh method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the refresh method:
$( "input[type='checkbox']" ).prop( "checked", true ).checkboxradio( "refresh" );
$( "input[type='radio']" ).prop( "checked", true ).checkboxradio( "refresh" );
var myselect = $( "#selectfoo" );
myselect[0].selectedIndex = 3;
myselect.selectmenu( "refresh" );
$( "input[type='range']" ).val( 60 ).slider( "refresh" );
They use the slider widget.
var myswitch = $( "#selectbar" );
myswitch[ 0 ].selectedIndex = 1;
myswitch.slider( "refresh" );
If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's keepNative option (which defaults to [data-role="none"]). Be sure to configure this option inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.
$( document ).bind( "mobileinit", function() {
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
Alternately you can use the data-enhance="false" data attribute on a parent element with $.mobile.ignoreContentEnabled set to true. Beware though, this will incur a performance penalty for each and every element in the page that would otherwise be enhanced as jQuery Mobile must traverse the set of parents to look for those elements.
One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if select is included. If you wish to retain the native performance and appearance of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile, you can set $.mobile.selectmenu.prototype.options.nativeMenu to true in a mobileinit callback as a global setting or use data-native-menu="true" on a case by case basis.
Using a multipart form with a file input is not supported by Ajax. In this case you should decorate the parent form with data-ajax="false" to ensure the form is submitted properly to the server.
Hide form label or legend elements, but keep them accessible for screen readers.
Add class ui-field-contain to a wrapper of a form widget and its label.
Note: data-role="fieldcontain" has been deprecated in 1.4 and will be removed in 1.5.
Note: Deprecated in 1.4. Use class ui-hidden-accessible for the label/legend and no field container instead.
Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
The children of any element can be filtered by setting the attribute data-filter="true" on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute data-filtertext to a string value on any child that will be considered for filtering to associate custom filter text instead.
The filter widget is based on and replaces the listview filter extension. Thus, you can set data-filter="true" on a listview to generate a filter for its list items.
Nevertheless, the way in which a filterable is constructed differs from the way the listview filter extension worked in one important regard: the text field for entering the search string is not provided. Instead, you can provide the text field in your markup and have the filterable make use of it by providing a selector that will retrieve the text field as the value of the filterable's data-input attribute. Add class ui-filterable to the form in which you wrap the search input or to the listview to have the framework adjust the margin between the text field and listview.
The deprecated behavior whereby the filterable injects a text field before the element whose children are to be filtered is retained for version 1.4.0 to help with the transition from the listview filter extension, however, it will be removed in 1.5.0.
You are not limited to using filters on listviews. To create a filter for a table widget, set
data-filter="true" on the table element to generate a filter for table rows.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
The filter widget can be used on other widgets, too. To filter a list of controlgroup buttons, declare data-filter="true" on the element that creates the controlgroup (Note that you can also use the data-filtertext attribute to declare the text string used for filtering the respective element.
The widget can be used for filtering on any element containing other elements, like a div containing p elements.
These Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
tags nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Tags erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
are et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Filterable Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
The filter widget supports the same attributes as the previous listview extension. Use data-filter-theme to declare a specific theme for the text field (overriding inheritance). data-filter-placeholder allows you to customize the input's placeholder text. In addition, the filterable widget will synchronize options shared between the textinput widget and the widget whose children it filters to make sure that the value of the textinput widget options is the same as the value of the widget options. So, for example, if you set data-inset="true" on the listview, then the corresponding textinput widget will also be inset.
NOTE: This behavior is deprecated and will be removed in 1.5.0. The correct way forward is to provide the text field (or any other widget that emits the "change" signal) as part of the original markup and to pass a selector that will retrieve it to the filterable widget via the data-input attribute.
The filter reveal feature makes it easy to build a simple autocomplete
with local data. When a filter has the data-filter-reveal="true"
attribute, it will auto-hide all the list items when the search
field is blank. The data-filter-placeholder attribute can be
added to specify the placeholder text for the filter. If you need to search
against a long list of values, we provide a way to create a filter with a
remote
data source.
As with the listview extension, you can provide custom callback functions to the filter or override the filter altogether on the filterablebeforefilter event. Please note that the filter has a delay of 250ms before the filter actually triggers. This prevents running the filtering function multiple times while the user is typing.
To set a custom filtering function that will become the new default for all filterable widgets, override the filterCallback option in the filterable widget prototype in a "mobileinit" signal handler:
$( document ).one( "mobileinit", function() {
$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
// In this function the keyword "this" refers to the element for which the
// code must decide whether it is to be filtered or not.
// A return value of true indicates that the element referred to by the
// keyword "this" is to be filtered.
// Returning false indicates that the item is to be displayed.
//
// your custom filtering logic goes here
});
});
To set a custom filtering function for a single filterable widget, set the filterCallback option:
$.mobile.document.one( "filterablecreate", "#myFilterable", function() {
$( "#myFilterable" ).filterable( "option", "filterCallback", function( index, searchValue ) {
// The previous example explains the signature of the callback function.
//
// your custom filtering logic goes here.
});
});
To override the filter altogether (for example when loading data server-side
or from localStorage), bind to the filterablebeforefilter event.
$( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
var value;
e.preventDefault();
value = data.input.value;
// trigger own request to database
});
});The filterable widget runs the filter a single time during startup to make sure the list of children reflects the value entered in the search input. You can avoid this step by specifying the data-enhanced="true" attribute. When set to true, the filterable will assume that you have correctly applied the class ui-screen-hidden to those children that should be initially hidden.
The filterable widget is able to use the search input whether or not the search input is itself pre-rendered. In the example below, both the search input and the filterable are pre-rendered.
PLEASE NOTE: This is not a jQuery Mobile widget and is not supported by jQuery Mobile.
This demo uses the jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile. This widget has all the same options and methods as the jQuery UI widget.
For documentation on the Datepicker widget please see jQuery UI API docs http://api.jqueryui.com/datepicker/.
For information and support on the jQuery Mobile Wrapper please see https://github.com/arschmitz/jquery-mobile-datepicker-wrapper.
The Popup does not always position well for use on small screens and mobile devices there for the wrapper adds an inline option this option makes the calendar for the datepicker show up inline after the input which it is called on avoiding the issues related to popups
Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
While textinputs are not officially supported by the controlgroup they can be made to work with some simple css.
To make this work you will need to add one css rule and use textinput's wrapperClass option to set two classes on the textinput wrapper.
You can supply pre-rendered markup for any controlgroup to save startup time. The example below illustrates the markup you have to provide for a pre-rendered controlgroup. Note that the widgets inside the controlgroup need not necessarily be pre-rendered.
This demo shows how you can dynamically make changes to a controlgroup.
An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.
Collapsible sets start with the same markup as individual collapsibles which have a heading followed by the collapsible content. By adding a parent wrapper with a data-role="collapsibleset" attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.
I'm the collapsible content for section 1
I'm the collapsible content for section 2
I'm the collapsible content for section 3
For full width collapsibles without corner styling add the data-inset="false" attribute to the set. This makes the collapsible set look more like an expandable listview.
For a more compact version that is useful in tight spaces, add the data-mini="true" attribute to the set.
This is good for tight spaces.
Here's some collapsible content.
Final bit of collapsible content.
The default icons of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes, either at the collapsibleset level or on any of its collapsibles individually.
Specify the open and close icons on the set to apply it to all the collapsibles within.
This collapsible also gets the icon from the set.
The icons here are applied to this collapsible specifically, thus overriding the set icons.
The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute, either at the collapsibleset level or on any of its collapsibles individually.
Inherits icon positioning from data-iconpos="right" attribute on set.
Set via data-iconpos="left" attribute on the collapsible
Set via data-iconpos="bottom" attribute on the collapsible
Set via data-iconpos="top" attribute on the collapsible
Add the data-corners="false" attribute to get an inset collapsible set without rounded corners.
Collapsible content
Collapsible content
Collapsible content
Add a data-theme attribute to the set to set the color of each collapsible header in a set. Add the data-content-theme attribute to specify the color of the collapsible content.
Content
Content
To have individual sections in a group styled differently, add data-theme and data-content-theme attributes to specific collapsibles.
Content
Content
Content
Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.
To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Directly inside this container, add any header (H1-H6) or legend element. 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 header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Add the data-theme attribute to set a theme for the collapsible, and the data-content-theme attribute to the wrapper and specify a theme swatch letter.
I'm the collapsible content with a themed content block set to "b".
The collapsible content inherits a theme by default. Set data-content-theme to false to have no theme at all.
I'm the collapsible content without a theme.
To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.
For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.
The default icons of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes. In the example below, data-collapsed-icon="carat-d" and data-expanded-icon="carat-u".
The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute. In the below case, data-iconpos="right".
data-iconpos="right"
For forms, use a fieldset and legend for the collapsible.
By default collapsibles have an inset appearance. To make them full width without corner styling add the data-inset="false" attribute to the element.
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
This is an example of a series of individual collapsibles. The difference with a "Collapsible Set" is that multiple collapsible rows can be open at once.
To avoid "double" borders the framework removes the top border of collapsibles that are immediately preceded by another collapsible. Here we show how to negate this with custom CSS.
You can supply pre-rendered markup for any collapsible to save startup time. The example below illustrates the markup you have to provide for a pre-rendered collapsible.
This demo shows how you can dynamically add a collapsible to a collapsible set (accordion). It also shows how you can use the expand and collapse events to dynamically open or close a collapsible.
I'm the collapsible content.
Radio inputs are used to provide a list of options where only a single option can be selected. Radio buttons are enhanced by the checkboxradio widget.
To create a set of radio buttons, add an input with a type="radio" attribute and a corresponding label. Set the for attribute of the label to match the id of the input so they are semantically associated.
To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the container.
To make a horizontal button set, add the data-type="horizontal" to the fieldset.
For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.
To swap the position of the radio icon from the default position on the left, add the data-iconpos="right" attribute to the controlgroup.
To set the theme, add the data-theme attribute to the controlgroup or each of the individual checkbox inputs.
Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the checkboxradio widget.
To create a single checkbox, add an input with a type="checkbox" attribute and a corresponding label. If the input isn't wrapped in its corresponding label, be sure to set the for attribute of the label to match the id of the input so they are semantically associated.
For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.
Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the fieldset.
Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the data-type="horizontal" to the fieldset.
To swap the position of the check icon from the default position on the left, add the data-iconpos="right" attribute to the fieldset to create a mini version.
To set the theme, add the data-theme attribute on the fieldset to the individual checkbox inputs.
Examples of how to style input buttons; input elements with type="button", type="submit", or type="reset". See button markup for examples of a and button elements.
Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.
Add classes to style a and button elements. input buttons are enhanced by the button widget. See this page for examples.
Note that in 1.4 data- attributes will still work. The deprecated buttonMarkup method will add the applicable classes to a (with data-role="button") and button elements. This method also adds the role="button" attribute to anchor elements.
Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.
Inline:
Note: This styling option is deprecated in jQuery Mobile 1.4.0 and will be removed in 1.5.0. Accordingly, we changed the default for framework-enhanced buttons to false.
Theme B:
In 1.4 button will still be auto-enhanced. This example shows how you can prevent this.
jQuery Mobile provides classes ui-bar and ui-body for subdividing and for visually grouping content.
Add class ui-bar to create a full-width heading or a separator between sections of content. Additionally, classes ui-bar-[a-z] add the appropriate swatch from your theme.
Add class ui-body to visual group and/or emphasize a section of content. Additionally, classes ui-body-[a-z] add the appropriate swatch from your theme.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.
Content
jQuery Mobile provides an HTML5-based user interface for all popular mobile device platforms, but it does not influence how you organize and structure your app's JavaScript. Many jQuery Mobile users turn to a variety of other popular third-party libraries, including MV* frameworks and dependency management tools, to help structure their code.
Backbone.js and Require.js are two of the most popular third-party libraries that are used with jQuery Mobile to provide a rich JavaScript tech stack for developers.
Backbone.js is a great client-side MV* JavaScript framework that provides structure to JavaScript applications by providing View, Model, Collection, Router, and Event class objects.
Require.js serves a few different purposes than Backbone.js. Require.js is an AMD (Asynchronous Module Definition) script loader that asynchronously loads your JavaScript to improve page load performance, while also helping with script dependency managagement and allowing you to organize your JavaScript into self contained modules (files).
Although there is a high amount of developer interest with using jQuery Mobile, Backbone.js, and Require.js together, there is a high barrier of entry. Many users are confused about how to use the Backbone.js Router class object with the jQuery Mobile routing system.
View example pageThe technique used in this example page is by no means the only technique available, but it is one of the most elegant. The Backbone.js router is used exclusively to handle all hashchange events, and the jQuery Mobile $.mobile.changePage() method is used to programmatically change the page.
Below are two internal jQuery Mobile properties that are turned off to allow this to happen:
$.mobile.linkBindingEnabled
$.mobile.hashListeningEnabled
To illustrate how the above internal jQuery Mobile properties are turned off, let's examine our example page code.
Inside of the head section of our index.html page, we first include the Require.js JavaScript library and set the data-main attribute of our script tag to the JavaScript file that we want Require.js to include on the page first (this file will contain all of our Require.js configurations). In this example, we are telling Require.js to look inside of the js folder and then load mobile.js.
<head>
<script src="js/libs/require.js" data-main="js/mobile"></script>
</head>
If we look inside of mobile.js, we will find that the $.mobile.linkBindingEnabled and $.mobile.hashListeningEnabled jQuery Mobile attributes are set to false.
// Sets the require.js configuration for your application.
require.config( {
// 3rd party script alias names
paths: {
// Core Libraries
"jquery": "../../../js/jquery",
"jquerymobile": "libs/jquerymobile",
"underscore": "libs/lodash",
"backbone": "libs/backbone"
},
// Sets the configuration for your third party scripts that are not AMD compatible
shim: {
"backbone": {
"deps": [ "underscore", "jquery" ],
"exports": "Backbone" //attaches "Backbone" to the window object
}
} // end Shim Configuration
} );
// Includes File Dependencies
require([ "jquery","backbone","routers/mobileRouter","jquerymobile" ], function( $, Backbone, Mobile ) {
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
// Instantiates a new Backbone.js Mobile Router
this.router = new Mobile();
} );
Next, inside of the Backbone.js Router class object, we can respond to haschange events and manually call the jQuery Mobile changePage() method. Below is a small snippet of mobileRouter.js.
// Backbone.js Routes
routes: {
// When there is no hash bang on the url, the home method is called
"": "home",
// When #category? is on the url, the category method is called
"category?:type": "category"
},
// Home method
home: function() {
// Programatically changes to the categories page
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
}
The example page illustrates how to render a jQuery Mobile ListView that is populated with dynamic JSON data asynchronously. Feel free to take a deeper look into the source code to see how Require.js and Backbone.js are used.
The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.
" ); $( document ).on( "pagecreate", function( event ) { $( event.target ).append( message ); }); }); }); } $( document ).on( "pagecreate", ".jqm-demos", function( event ) { var search, page = $( this ), that = this, searchUrl = ( $( this ).hasClass( "jqm-home" ) ) ? "_search/" : "../_search/", searchContents = $( ".jqm-search ul.jqm-list" ).find( "li:not(.ui-collapsible)" ), version = $.mobile.version || "dev", words = version.split( "-" ), ver = words[0], str = words[1] || "", text = ver; // Insert jqm version in header if ( str.indexOf( "rc" ) == -1 ) { str = str.charAt( 0 ).toUpperCase() + str.slice( 1 ); } else { str = str.toUpperCase().replace( ".", "" ); } if ( $.mobile.version && str ) { text += " " + str; } $( ".jqm-version" ).html( text ); // Global navmenu panel $( ".jqm-navmenu-panel ul" ).listview(); $( document ).on( "panelopen", ".jqm-search-panel", function() { $( this ).find( "input" ).focus(); }) $( ".jqm-navmenu-link" ).on( "click", function() { page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" ); }); // Turn off autocomplete / correct for demos search $( this ).find( ".jqm-search input" ).attr( "autocomplete", "off" ).attr( "autocorrect", "off" ); // Global search $( ".jqm-search-link" ).on( "click", function() { page.find( ".jqm-search-panel" ).panel( "open" ); }); // Initalize search panel list and filter also remove collapsibles $( this ).find( ".jqm-search ul.jqm-list" ).html( searchContents ).listview({ inset: false, theme: null, dividerTheme: null, icon: false, autodividers: true, autodividersSelector: function ( li ) { return ""; }, arrowKeyNav: true, enterToNav: true, highlight: true, submitTo: searchUrl }).filterable(); // Initalize search page list and remove collapsibles $( this ).find( ".jqm-search-results-wrap ul.jqm-list" ).html( searchContents ).listview({ inset: true, theme: null, dividerTheme: null, icon: false, arrowKeyNav: true, enterToNav: true, highlight: true }).filterable(); // Fix links on homepage to point to sub directories if ( $( event.target ).hasClass( "jqm-home") ) { $( this ).find( "a" ).each( function() { $( this ).attr( "href", $( this ).attr( "href" ).replace( "../", "" ) ); }); } // Search results page get search query string and enter it into filter then trigger keyup to filter if ( $( event.target ).hasClass( "jqm-demos-search-results") ) { search = $.mobile.path.parseUrl( window.location.href ).search.split( "=" )[ 1 ]; setTimeout(function() { e = $.Event( "keyup" ); e.which = 65; $( that ).find( ".jqm-content .jqm-search-results-wrap input" ).val( search ).trigger(e).trigger( "change" ); }, 0 ); } }); // Append keywords list to each list item $( document ).one( "pagecreate", ".jqm-demos", function( event ) { $( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() { var text = $( this ).attr( "data-filtertext" ); $( this ) .find( "a" ) .append( "" + text + "" ); }); }); // Functions for highlighting text used for keywords highlight in search jQuery.fn.highlight = function( pat ) { function innerHighlight( node, pat ) { var skip = 0; if ( node.nodeType == 3 ) { var pos = node.data.toUpperCase().indexOf( pat ); if ( pos >= 0 ) { var spannode = document.createElement( "span" ); spannode.className = "jqm-search-results-highlight"; var middlebit = node.splitText( pos ); var endbit = middlebit.splitText( pat.length ); var middleclone = middlebit.cloneNode( true ); spannode.appendChild( middleclone ); middlebit.parentNode.replaceChild( spannode, middlebit ); skip = 1; } } else if ( node.nodeType == 1 && node.childNodes && !/(script|style)/i.test( node.tagName ) ) { for ( var i = 0; i < node.childNodes.length; ++i ) { i += innerHighlight( node.childNodes[i], pat ); } } return skip; } return this.length && pat && pat.length ? this.each(function() { innerHighlight( this, pat.toUpperCase() ); }) : this; }; // Function to remove highlights in text jQuery.fn.removeHighlight = function() { return this.find( "span.jqm-search-results-highlight" ).each(function() { this.parentNode.firstChild.nodeName; with ( this.parentNode ) { replaceChild( this.firstChild, this ); normalize(); } }).end(); }; // Extension to listview to add keyboard navigation $( document ).on( "mobileinit", function() { (function( $, undefined ) { $.widget( "mobile.listview", $.mobile.listview, { options: { arrowKeyNav: false, enterToNav: false, highlight: false, submitTo: false }, _create: function() { this._super(); if ( this.options.arrowKeyNav ) { this._on( document, { "pageshow": "arrowKeyNav" }); } if ( this.options.enterToNav ) { this._on( document, { "pageshow": "enterToNav" }); } }, submitTo: function() { var url, form = this.element.parent().find( "form" ); form.attr( "method", "get" ) .attr( "action", this.options.submitTo ); url = this.options.submitTo + "?search=" + this.element.parent().find( "input" ).val(); window.location = url; }, enterToNav: function() { var form = this.element.parent().find( "form" ); form.append( "" ) .parent() .trigger( "create" ); this.element.parent().find( "form" ).children( ".ui-btn" ).addClass( "ui-hidden-accessible" ); this._on( form, { "submit": "submitHandler" }); }, enhanced: false, arrowKeyNav: function() { var input = this.element.prev("form").find( "input" ); if ( !this.enhanced ) { this._on( input, { "keyup": "handleKeyUp" }); this.enhanced = true; } }, handleKeyUp: function( e ) { var search, input = this.element.prev("form").find( "input" ); if ( e.which === $.ui.keyCode.DOWN ) { if ( this.element.find( "li.ui-btn-active" ).length === 0 ) { this.element.find( "li:first" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } else { this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active"); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } this.highlightDown(); } else if ( e.which === $.ui.keyCode.UP ) { if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) { this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active"); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } else { this.element.find( "li:last" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } this.highlightUp(); } else if ( typeof e.which !== "undefined" ) { this.element.find( "li.ui-btn-active" ).removeClass( "ui-btn-active" ); if ( this.options.highlight ) { search = input.val(); this.element.find( "li" ).each(function() { $( this ).removeHighlight(); $( this ).highlight( search ); }); } } }, submitHandler: function() { if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) { var href = this.element.find( "li.ui-btn-active a" ).attr( "href" ); $( ":mobile-pagecontainer" ).pagecontainer( "change", href ); return false; } if ( this.options.submitTo ) { this.submitTo(); } }, highlightDown: function() { if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) { this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.highlightDown(); } return; }, highlightUp: function() { if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) { this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.highlightUp(); } return; } }); })( jQuery ); }); demos/_assets/js/index.js 0000644 0000000 0000000 00000151255 12424700652 014420 0 ustar root root (function( $, undefined ) { //special click handling to make widget work remove after nav changes in 1.4 var href, ele = ""; $( document ).on( "click", "a", function( e ) { href = $( this ).attr( "href" ); var hash = $.mobile.path.parseUrl( href ); if( typeof href !== "undefined" && hash !== "" && href !== href.replace( hash,"" ) && hash.search( "/" ) !== -1 ){ //remove the hash from the link to allow normal loading of the page. var newHref = href.replace( hash,"" ); $( this ).attr( "href", newHref ); } ele = $( this ); }); $( document ).on( "pagebeforechange", function( e, f ){ f.originalHref = href; }); $( document ).on("pagebeforechange", function( e,f ){ var hash = $.mobile.path.parseUrl(f.toPage).hash, hashEl, hashElInPage; try { hashEl = $( hash ); } catch( e ) { hashEl = $(); } try { hashElInPage = $( ".ui-page-active " + hash ); } catch( e ) { hashElInPage = $(); } if( typeof hash !== "undefined" && hash.search( "/" ) === -1 && hash !== "" && hashEl.length > 0 && !hashEl.hasClass( "ui-page" ) && !hashEl.hasClass( "ui-popup" ) && hashEl.data('role') !== "page" && !hashElInPage.hasClass( "ui-panel" ) && !hashElInPage.hasClass( "ui-popup" ) ) { //scroll to the id var pos = hashEl.offset().top; $.mobile.silentScroll( pos ); $.mobile.navigate( hash, '', true ); } else if( typeof f.toPage !== "object" && hash !== "" && $.mobile.path.parseUrl( href ).hash !== "" && !hashEl.hasClass( "ui-page" ) && hashEl.attr('data-role') !== "page" && !hashElInPage.hasClass( "ui-panel" ) && !hashElInPage.hasClass( "ui-popup" ) ) { $( ele ).attr( "href", href ); $.mobile.document.one( "pagechange", function() { if( typeof hash !== "undefined" && hash.search( "/" ) === -1 && hash !== "" && hashEl.length > 0 && hashElInPage.length > 0 && !hashEl.hasClass( "ui-page" ) && hashEl.data('role') !== "page" && !hashElInPage.hasClass( "ui-panel" ) && !hashElInPage.hasClass( "ui-popup" ) ) { hash = $.mobile.path.parseUrl( href ).hash; var pos = hashElInPage.offset().top; $.mobile.silentScroll( pos ); } } ); } }); $( document ).on( "mobileinit", function(){ hash = window.location.hash; $.mobile.document.one( "pageshow", function(){ var hashEl, hashElInPage; try { hashEl = $( hash ); } catch( e ) { hashEl = $(); } try { hashElInPage = $( ".ui-page-active " + hash ); } catch( e ) { hashElInPage = $(); } if( hash !== "" && hashEl.length > 0 && hashElInPage.length > 0 && hashEl.attr('data-role') !== "page" && !hashEl.hasClass( "ui-page" ) && !hashElInPage.hasClass( "ui-panel" ) && !hashElInPage.hasClass( "ui-popup" ) && !hashEl.is( "body" ) ){ var pos = hashElInPage.offset().top; setTimeout( function(){ $.mobile.silentScroll( pos ); }, 100 ); } }); }); //h2 widget $( document ).on( "mobileinit", function(){ $.widget( "mobile.h2linker", { options:{ initSelector: ":jqmData(quicklinks='true')" }, _create:function(){ var self = this, bodyid = "ui-page-top", panel = "The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.
" ); $( document ).on( "pagecreate", function( event ) { $( event.target ).append( message ); }); }); }); } $( document ).on( "pagecreate", ".jqm-demos", function( event ) { var search, page = $( this ), that = this, searchUrl = ( $( this ).hasClass( "jqm-home" ) ) ? "_search/" : "../_search/", searchContents = $( ".jqm-search ul.jqm-list" ).find( "li:not(.ui-collapsible)" ), version = $.mobile.version || "dev", words = version.split( "-" ), ver = words[0], str = words[1] || "", text = ver; // Insert jqm version in header if ( str.indexOf( "rc" ) == -1 ) { str = str.charAt( 0 ).toUpperCase() + str.slice( 1 ); } else { str = str.toUpperCase().replace( ".", "" ); } if ( $.mobile.version && str ) { text += " " + str; } $( ".jqm-version" ).html( text ); // Global navmenu panel $( ".jqm-navmenu-panel ul" ).listview(); $( document ).on( "panelopen", ".jqm-search-panel", function() { $( this ).find( "input" ).focus(); }) $( ".jqm-navmenu-link" ).on( "click", function() { page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" ); }); // Turn off autocomplete / correct for demos search $( this ).find( ".jqm-search input" ).attr( "autocomplete", "off" ).attr( "autocorrect", "off" ); // Global search $( ".jqm-search-link" ).on( "click", function() { page.find( ".jqm-search-panel" ).panel( "open" ); }); // Initalize search panel list and filter also remove collapsibles $( this ).find( ".jqm-search ul.jqm-list" ).html( searchContents ).listview({ inset: false, theme: null, dividerTheme: null, icon: false, autodividers: true, autodividersSelector: function ( li ) { return ""; }, arrowKeyNav: true, enterToNav: true, highlight: true, submitTo: searchUrl }).filterable(); // Initalize search page list and remove collapsibles $( this ).find( ".jqm-search-results-wrap ul.jqm-list" ).html( searchContents ).listview({ inset: true, theme: null, dividerTheme: null, icon: false, arrowKeyNav: true, enterToNav: true, highlight: true }).filterable(); // Fix links on homepage to point to sub directories if ( $( event.target ).hasClass( "jqm-home") ) { $( this ).find( "a" ).each( function() { $( this ).attr( "href", $( this ).attr( "href" ).replace( "../", "" ) ); }); } // Search results page get search query string and enter it into filter then trigger keyup to filter if ( $( event.target ).hasClass( "jqm-demos-search-results") ) { search = $.mobile.path.parseUrl( window.location.href ).search.split( "=" )[ 1 ]; setTimeout(function() { e = $.Event( "keyup" ); e.which = 65; $( that ).find( ".jqm-content .jqm-search-results-wrap input" ).val( search ).trigger(e).trigger( "change" ); }, 0 ); } }); // Append keywords list to each list item $( document ).one( "pagecreate", ".jqm-demos", function( event ) { $( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() { var text = $( this ).attr( "data-filtertext" ); $( this ) .find( "a" ) .append( "" + text + "" ); }); }); // Functions for highlighting text used for keywords highlight in search jQuery.fn.highlight = function( pat ) { function innerHighlight( node, pat ) { var skip = 0; if ( node.nodeType == 3 ) { var pos = node.data.toUpperCase().indexOf( pat ); if ( pos >= 0 ) { var spannode = document.createElement( "span" ); spannode.className = "jqm-search-results-highlight"; var middlebit = node.splitText( pos ); var endbit = middlebit.splitText( pat.length ); var middleclone = middlebit.cloneNode( true ); spannode.appendChild( middleclone ); middlebit.parentNode.replaceChild( spannode, middlebit ); skip = 1; } } else if ( node.nodeType == 1 && node.childNodes && !/(script|style)/i.test( node.tagName ) ) { for ( var i = 0; i < node.childNodes.length; ++i ) { i += innerHighlight( node.childNodes[i], pat ); } } return skip; } return this.length && pat && pat.length ? this.each(function() { innerHighlight( this, pat.toUpperCase() ); }) : this; }; // Function to remove highlights in text jQuery.fn.removeHighlight = function() { return this.find( "span.jqm-search-results-highlight" ).each(function() { this.parentNode.firstChild.nodeName; with ( this.parentNode ) { replaceChild( this.firstChild, this ); normalize(); } }).end(); }; // Extension to listview to add keyboard navigation $( document ).on( "mobileinit", function() { (function( $, undefined ) { $.widget( "mobile.listview", $.mobile.listview, { options: { arrowKeyNav: false, enterToNav: false, highlight: false, submitTo: false }, _create: function() { this._super(); if ( this.options.arrowKeyNav ) { this._on( document, { "pageshow": "arrowKeyNav" }); } if ( this.options.enterToNav ) { this._on( document, { "pageshow": "enterToNav" }); } }, submitTo: function() { var url, form = this.element.parent().find( "form" ); form.attr( "method", "get" ) .attr( "action", this.options.submitTo ); url = this.options.submitTo + "?search=" + this.element.parent().find( "input" ).val(); window.location = url; }, enterToNav: function() { var form = this.element.parent().find( "form" ); form.append( "" ) .parent() .trigger( "create" ); this.element.parent().find( "form" ).children( ".ui-btn" ).addClass( "ui-hidden-accessible" ); this._on( form, { "submit": "submitHandler" }); }, enhanced: false, arrowKeyNav: function() { var input = this.element.prev("form").find( "input" ); if ( !this.enhanced ) { this._on( input, { "keyup": "handleKeyUp" }); this.enhanced = true; } }, handleKeyUp: function( e ) { var search, input = this.element.prev("form").find( "input" ); if ( e.which === $.ui.keyCode.DOWN ) { if ( this.element.find( "li.ui-btn-active" ).length === 0 ) { this.element.find( "li:first" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } else { this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active"); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } this.highlightDown(); } else if ( e.which === $.ui.keyCode.UP ) { if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) { this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active"); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } else { this.element.find( "li:last" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); } this.highlightUp(); } else if ( typeof e.which !== "undefined" ) { this.element.find( "li.ui-btn-active" ).removeClass( "ui-btn-active" ); if ( this.options.highlight ) { search = input.val(); this.element.find( "li" ).each(function() { $( this ).removeHighlight(); $( this ).highlight( search ); }); } } }, submitHandler: function() { if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) { var href = this.element.find( "li.ui-btn-active a" ).attr( "href" ); $( ":mobile-pagecontainer" ).pagecontainer( "change", href ); return false; } if ( this.options.submitTo ) { this.submitTo(); } }, highlightDown: function() { if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) { this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.highlightDown(); } return; }, highlightUp: function() { if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) { this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" ); this.highlightUp(); } return; } }); })( jQuery ); }); // View demo source code function attachPopupHandler( popup, sources ) { popup.one( "popupbeforeposition", function() { var collapsibleSet = popup.find( "[data-role='collapsibleset']" ), collapsible, pre; $.each( sources, function( idx, options ) { collapsible = $( "