KEY CHANGES

1.3: A responsive focus

Since the inception of the jQuery Mobile project, we have embraced the idea of designing for all devices and platforms in a “One web” approach. To that end, we built everything on a progressive enhancement foundation and every widget is designed to be 100% width to fit within a flexible or responsive grid.

jQuery Mobile-first

jQuery Mobile is also designed and fully tested to work not just on mobile phones, but tablets and even desktop browsers. Think of it as mobile-first, not mobile only. In fact, in our next release we’re going to be starting the process of integrating closer with the jQuery UI with the goal of having even more shared code and conventions. The UI tabs widget will be the first to be ported into our library and theming system.

We’ve seen the question “What should I use: RWD or jQuery Mobile?” many times on Twitter and our response is an unqualified “both”. Think of jQuery Mobile as a set of touch-friendly UI elements that are designed to fit within your responsive design. Even at 1.0, our demos & docs used media queries for a responsive experience, but we decided that we could do a better job helping people use responsive design techniques in their own projects.

Our focus for the 1.3 release has been to educate the community on responsive web design (RWD) by adding responsive documentation and demos that explain key concepts and also by adding new widgets like responsive tables, panels and grids that make it easy to build responsive sites and apps.

Bundling breakpoints

Media queries are a difficult thing for any framework to include in the codebase because responsive is all about designing for your specific content. For that reason alone, it’s impossible to pick a single “ideal” breakpoint that will work for everyone.

For example, in our responsive table widget we need to select a screen width to switch between the tabular and stacked presentation for reflow mode. That breakpoint width will completely depend on both the visual design (typography, other layout elements) and the content (number of columns, content length). To address this, in the docs for each responsive widget, we spend a lot of time explaining how to write a custom breakpoint that will be tailored to your unique needs.

Breakpoint classes to the rescue

The flipside is that people use a framework because they want things to be easy and it’s hard to explain that a responsive widget won’t work at all until you write a bunch of CSS. So the compromise we took for responsive widgets is to include a single breakpoint “preset” in the structural CSS that we hope will be useful in a fair amount of typical situations. This breakpoint is applied by adding a class like ui-responsive to the widget markup to opt into the breakpoint. This opt-in is important because overriding a breakpoint baked into the CSS is very cumbersome if you want to use a custom breakpoint — you’d need to negate all the CSS rules from our breakpoint before adding your own.

We think this strikes a good balance between convenience and educating folks on how to use media queries. When we finalize 1.3 in a few weeks, we’ll accompany this with an all-new demos site that will have RWD tutorials and lots of cool demos showing off how to write custom styles and breakpoints to deeply customize jQuery Mobile.

New Widget: Panels

One of the most common mobile UI patterns we see right now are Facebook-style panels that open to reveal a menu, form or other content. We spent a lot of time prototyping different ideas and are really happy with our new panel widget. It offers a ton of flexibility. Panels can be positioned on the left or right of the screen and be placed flexibly in the HTML source order.

There are three different ways a panel can animate open. The default reveal display slides the page away to show the panel beneath, the push display animates both the panel and page, and the overlay display places the panel on top of the page. Panels can be closed by swiping, tapping onto the page, or hitting the Esc key on the keyboard.

To take this widget responsive, it’s easy to add media queries to make the panel stay open at wider widths instead of auto-closing when you click on the page content. This makes this panel more like a collapsible column, like the folder list in a mail program. We’ve included a breakpoint preset to add this behavior by adding a class to the page container. Here’s an example of a typical panel setup with a left nav panel and right panel with a form.

For such a simple looking widget, panel were really challenging to get right across all our platforms. We ended up going through four different re-factors leading up to beta in order to get the animations as smooth as possible and are really happy with the result. In the new docs, there are examples of how to apply custom panel styles and open panels on swipe.

Panel API docs >

New: Responsive tables

There are a lot of possible ways to handle tabular data in responsive designs. We’ve decided to tackle two different responsive table modes in 1.3, each with its own strengths and uses.

The reflow table mode swaps to a stacked label/data style presentation at narrow screen widths and best for situations where the content length is fairly long and comparing data across rows in a table is less critical. For example, a product or movie list might be a good choice for reflow mode.

Reflow table API docs >

The column toggle table mode hides columns at narrower page widths according to a priority you set on each column as a sensible default to ensure that the table fits on-screen. A dynamically generated column chooser popup allows the user to select which columns they want to see for full control. This mode is best for situations where comparing data across rows and columns is critical. For example, a complex table of financial data might be a good choice for column toggle mode.

Column toggle API docs >

We’ve built some cool demos showing how you can customize these basic table tools to make a comparison chart or present complex financial data with grouped headers and more.

New: Range slider

Adding support for dual handle sliders for collecting range values has been a popular request and we’re happy to add this new widget in 1.3. The new dual handle range slider starts with a pair of HTML5 range inputs and essentially two sliders with a shared track. All the normal slider options work with ranges: mini sizing, theming, etc.

We’ve also refined the size and styling of the inputs that accompany sliders to make them integrate better visually and leave more room for the slider. The inputs are now mini sized with bold text and no border or spinner arrows (seen in desktop browsers).

All sliders now respect step values smaller than whole numbers which is great for scientific and financial applications that need inputs that capture values to the 0.1 or 0.01 level of accuracy. Slider behavior has been refined so dragging will snap to the closest step position to provide better feedback.

Range slider API docs >

New: Responsive grids

The cornerstone of any responsive design are responsive grids. We believe that the best grid systems are content-specific and not something that can be easily generalized into a framework but for people using our simple grid blocks, there are now detailed instructions on how to create your own media queries to adjust grids at various breakpoints.

We’re also shipping with a breakpoint preset that can be applied by adding a class to your grid wrapper. This will apply a CSS breakpoint at narrower screen widths that stack all the grid blocks instead of floating them. This is a simple way to make your grids a bit responsive and fit better on phones.

Grid API docs >

Navigate event and method

There are two new additions to the navigation functionality in jQuery Mobile. A navigate event that normalizes the URL alteration events hashchange/popstate, and a $.mobile.navigate method that allows users to receive extended traversal information in navigate bindings (eg, directionality).

The navigate event is a lightweight attempt to unify bindings to a browser’s URL alteration events hashchange and popstate. It also handles differences in the way setting the hash on the location object interacts with the two browser events (ie, stop the world popstate triggering), and provides event hooks to control the event lifecycle.

The $.mobile.navigate method forms the bulk of the new functionality. By using the $.mobile.navigate method to do URL manipulation instead of doing it directly with the location object, replaceState, or pushState you get history management and support for both modes of URL state tracking. The history management provides a state object to navigate event bindings whether the browser supports the new history API or not. It also contains the logic to determine whether navigation is moving forward or back in the browser history.

Both the event and the method are available as modules apart from other navigation functionality in jQuery Mobile, with minor dependencies on other parts of the library. More info can be found in the navigation page and teh issue for this refractor.

Navigate API: Event and Method

Page transitions: Support for IE10/WP8

Our CSS keyframe animations were written with vendor prefixes to date, but we’ve now added non-prefixed keyframe rules to bring transition support for IE10/WP8 and all future browsers. This also required updating the 3D support feature tests.

Listview: two new ways to make into an auto-complete

Everyone loves the listview filter feature and we heard quite a few requests to make this work as an autocomplete. Rather than create a new widget, we found two clever ways to make the current listview more powerful.

First, we’ve added the filter reveal feature makes is easy to build a simple autocomplete with local data. When a filterable list has the data-filter-reveal="true", it will auto-hide all the list items when the search field is blank and will display matching items as the user types into the search field. The data-filter-placeholder attribute can be added to specify the placeholder text for the filter. Any listview filter with a lot of items may be slow to perform on a mobile device so we recommend using this feature for a relatively small number of items.

To use the listview filter as an autocomplete that taps into remote data sources, you can use the listviewbeforefilter event 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.

We’ve added corner and shadow options for inset listviews for consistency with other widgets and made it possible to set theme on list dividers via the data-divider-theme attribute. On mobile devices, when using a listview filter, the submit button on the on-screen keyboard will now blur the input to dismiss the keyboard to improve usability.

Dialog: close button option for control

If the dialog has a header the framework will automatically add a close button at the left side of the header. You can now 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 prefer to add your own custom close button, you can use data-close-btn="none".

Dialogs now have a corners option like other widgets to control whether rounded corners are applied.

Popup: dismissible option

We’ve heard requests to prevent the click-out-to-close behavior of popups to make them modal. To address this, we’ve added a new dismissible option so you can add the data-dismissible attribute to a popup container. When set to false, the popup won’t close when you tap outside it onto the page.

Inputs: clear button option, support for file inputs

We’ve added a new feature to let you add the clear button we originally created for search inputs to any input type (text, date, number, etc.) by adding the data-clear-btn="true" attribute. The text for this clear button can be customized via the data-clear-btn-text="clear input" attribute. Search buttons have the clear button by default but can be controlled by this option. Note that this is available for all the input types except for textareas.

Now that file input types are becoming more supported by mobile platforms, we’ve added automatic styling for these as part of jQuery Mobile. Browser support for styling these is surprisingly good and even the clear button option seems to work with these on better browsers.

In addition, we’ve made lots of small improvements to inputs: fixed the height and alignment of text inputs on IE9/WP, textarea auto-grow now also works when you paste text, and text inputs now work much better with multibyte strings.

Selects: themable optgroups, header position support

If you’re using selects with custom menus, we’re fixed some focus issues and made optgroup themeable in custom menus via the new data-divider-theme option. We’ve also made selects work nicely inside headers when positioned with the ui-btn-left or ui-btn-right classes.

Button: programatic theme updates

It is now possible to change button‘s data-theme programatically via _setOption.

Collapsibles: corner option

We’ve added a new corners option for inset collapsibles and accordions (collapsible sets) to make this consistent with other widgets.

Fixed header improvements & extension

Fixed toolbars are tricky business with all the browser bugginess. Since 1.2, we’ve closed 37 fixed toolbar issues including the 1px jitter when scrolling, Android 2.x transition bugs, on-screen keyboard and input focus bugs, and iOS next/prev form controls causing the fixed header revealing itself.

Since the majority of these fixes are for older, but popular versions of Android 2.x and iOS, we’ve packaged these fixes and workarounds into an extension to fixed toolbars called fixedToolbar.workarounds.js that can be omitted in the download builder if you’re targeting only newer mobile browsers to save bandwidth and complexity.

Controlgroup is now a widget

We’ve upgraded controlgroup from a function into a proper widget so it has a full set of options (mini, shadow, corners, etc.) and a create event to help with enhancement.

Controlgroup API >

Less JS, More CSS

In 1.4, we’re planning on dramatically simplifying the amount of JavaScript we use to modify markup or apply classes, and instead use forward-looking CSS techniques which will be more performant. In 1.3.0, we switched away from our fairly complex JS-based logic to apply corner classes and instead use CSS inheritance for corner styling. As part of this process, we have removed the corner classes (ex. corner-top, corner-bl) from theme.css since this can be done with CSS now and it saves us valuable bandwidth and complexity.

Removing these classes and JS logic yielded substantial savings: roughly 1k (gzipped) from the library. We look forward to much bigger changes like this in 1.4.0.

Icons: New icons, ability to switch color and remove the disc

We’ve had a lot of requests to add specific icons to our icon sprite and with the current sprite-based approach, we’ve been trying to keep the set pretty simple and make it easy to use 3rd party sets. However, we realized that we need the now standard “3 bar” icon to accompany the new panels to support people using these for menus. While we were at it, we added a edit icon (pencil) because this was a very popular request.

The theme system always had a white and black icon set but it required a bit of CSS to switch between colors. Now use class ui-icon-alt to switch from the white to black icons in the default theme (configurable via ThemeRoller). If you don’t need the dark circle behind the icons, simply add the ui-icon-nodisc to the element or its container to remove the icon background. In keeping with our theme of using less JS, you’ll notice both of these features are classes, not data-attributes to reduce the script overhead.

In 1.4, we’re looking at re-vamping our theming and icon system and hope to be switching to SVGs with a PNG fallback which will make it easier to offer a larger icon set and maintain the best quality since we will be working with vectors.

Swipe event extensibility

The swipe event can now be extend to add your own logic or functionality. The following methods can be extended:

• $.event.special.swipe.start – This method recieves a touchstart event and returns an object of data about the starting location.
• $.event.special.swipe.stop – This method recieves a touchend event and returns an object of data about the ending location.
• $.event.special.swipe.handleSwipe – This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.

We’ve also been building some real-world swipe demos like the swipe page nav and the swipe listview item to delete.

Swipe event API >

New demos site: Launching today for 1.3.0

The demos and docs grew organically out of our original development work for 1.0 and it was easy to find the information you needed. With 1.3, we’ve been hard at work building whole new API site (see below) and companion demo center.

The widget reference is designed to make it easy to quickly browse every widget and variation and grab the code via the an integrated ‘view source’ tool. There is an demo showcase that shows you how to customize and extend the framework and a Q&A section that covers common issues and solutions.

Navigation is now much improved with a navigation panel with quick access to all widgets, a global search, and a panel to jump to a section within a page. If you are interested in helping us improve the demos by contributing fixes, demos or Q&A pages, please let us know or submit a pull request.

New API site: Launching today for 1.3.0

Our current demo and docs format has mixed reviews: some folks like our simpler, tutorial style docs while others have said that it’s hard to just get all the info they need quickly.

To address this, we’ve been working hard on porting all our docs over to the same API style API format as jQuery core and UI. This will provide a complete reference for every option, method and event in one centralized, searchable place. Since the docs are all XML-based, you’ll be able to remix them in any way you want for complete flexibility.

We’d like to take a moment to thank team member Anne-Gaelle Colom who has spent an incredible amount of time over the last year building these docs from scratch and we really appreciate her dedication.

The new API docs are in beta now and when we hit 1.3 final, we’re going to switch over to those as our authoritative place for API info. Our plan is to retire the current docs and have an all-new demos site to accompany the new API docs.

Support for jQuery 1.9.1 (and 2.0.0)

jQuery Mobile 1.3.0 supports versions of jQuery core 1.7.2 – 1.9.1 and we’re actively testing the upcoming 2.0 version too. We will be keeping in sync with their releases to let you take full advantage of the new goodness.

Nested listviews: Now deprecated, will be removed in 1.4.0

We are depreciating the nested list feature now and will be dropping support for this in 1.4.0. Nested lists auto-generate pages based on nested UL structures but these have a number of important drawbacks. First, these generated pages complicate the AJAX navigation system and introduce a wide range of edge cases (and bugs) that make it impossible to maintain with our navigation model. Second, these dynamic pages are of limited value because they can’t be controlled without introducing a templating engine so they are not flexible enough to be useful without adding a lot of functionality.

The same effect can be achieved by creating a multi-page document which give you full control of the page layout and styles. The nested listview plugin will be removed in 1.4.0 and moved to an external repo for those that still want to access the code.

Supported Platforms: Always Expanding

Our test lab has grown to over 70 phone, e-readers and tablets over the past few years. Luckily, our dedication to web standards and feature detection has meant that most new devices “just work” when they arrive. As of 1.3.0, we’ve added a few notable A grade platforms into testing rotation: BlackBerry 10, IE10 and Microsoft Surface RT, WP7.8, Kindle Fire HD (7″ and 10″), and more.

Upgrade notes

• We are depreciating the nested listview feature and will be dropping support for this in 1.4.0.
• We have removed the corner classes (ex. ui-corner-top, ui-corner-bl) from theme.css since this can be done with CSS now and it saves us valuable bandwidth and complexity.
• All links containing a hash were truncated at the hash and then appended to the current base tag value. This was a blanket solution for dialogs and nested listviews. As of 1.3.9, we will now only apply this to dialogs and nested listviews by looking for &ui-page and &ui-state. All other urls will be allowed to pass through normally.
• AJAX nav – iOS 4 will now receive hash-based navigation only because of it’s buggy history implementation.
• We changed the media query for the HD icon sprite to include devices with a slighty lower resolution which should make graphics crisper in some devices.
• Inputs are now always wrapped in a div. This fixes the alignment of full width inputs on IE7/8 and WP7 + input type color on Chrome
• Slider: we modified the style of the input next to the slider to make it mini sized, bold font-weight, no border and no spinner.
• Fixed headers: an optional extension for browser-specific workarounds is available.
• Multipage documents result in a sluggish back button performance on IE7 due to browser issues. The back button still works, but you have to click it several times to go back a single step in the history. The further you try to go back in history the more work you have to do for a single backwards step. Single-page AJAX-linked documents are a better approach if IE7 support is essential.

Change Log for 1.3.0

Button

.buttonMarkup() doesn’t work correctly while binding with the button itself (Issue #3637) – Track addition/removal of up/down/hover classes to reconstruct button state during re-enhancement

Button inner elements corner styling inheritance

Changing button’s data-theme programatically (Issue #4317) – Implement _setOption()

Do not assume that a button’s className will contain only classes assigned by buttonMarkup()

IE9 , if custom SELECT button is on the right border of the window, it expand the select menu over the whole window width
(Issue #4577) – Button: width auto for div’s with class ui-btn-text to prevent custom selects breaking on IE.

No need to add class ui-btn-corner-all to inner element because it inherits the border-radius.

Prevent margin top/bottom on selects, checkboxes and radio buttons with class ui-btn-left/right.

Checkboxradio

Adding new behaviour to widget definition

Checkboxradio not losing its icon when added to controlgroup post-enhance (Issue #5264) – Checkboxradio: hiding the icon in horizontal controlgroups with CSS instead of JS.

Determination as to whether the widget is inside a horizontal controlgroup or not needs to be made during refresh(), not during _create(), because otherwise an already-enhanced checkbox added to a horizontal controlgroup will not start using the activeBtnClass to render its checked state and neither will checkboxes initially added to a vertical controlgroup which is then converted to a horizontal controlgroup

.live() and checkbox labels
(Issue #2383) – Checkboxradio: allow vclick event to bubble.

No need to set margin for the buttons because we already set it for .ui-btn and .ui-btn-mini. Repeating it makes it only more difficult to override when needed.

Remove fieldset from being a form

Request: mini-Option in checkboxradio & textinput (Issue #4070) – Allow to set option mini programmatically.

Restore active state for buttons in horizontal controlgroups

Simplifying code in light of the fact that CSS maintains whether the icon is shown or not (as a function of whether the parent controlgroup is vertical resp. horizontal)

Turn off icon if part of a horizontal controlgroup

Use .buttonMarkup() to update icon instead of class manipulation

Collapsible

Added corner styling reset to collapsible CSS to avoid conflicts when an enhanced collapsible is appended to a set.

Added info and demo of collapsible coner styling to the docs.

Added info and demo of corner styling to the docs.

Added option corners to option page and data- attribute reference.

Added option corners to option page and data- attribute reference.

Added pure CSS corner styling for collapsible and collapsible set

Adjusted selector to avoid problems with nested collapsibles.

Adjusted to CSS for collapsibles without icon.

Also add "themed-content" class to non-inset collapsibles for collapsible lists border styling.

Cleanup code indent

Collapsible iconpos via mobileinit differs from documentation (Issue #4899)

Maintain ui-first-child and ui-last-child during refresh()

Make option corners work on a set.

Move default values from collapsedIcon / expandedIcon / iconPos in the "options" section of the widget instead in the main code so we have the ability do not display a icon for collapsible.

Set icon options according widget factory. Use preferences of collapsible set for icon options.

Update first/last classes using common behaviour

Ui-first-child/ui-last-child for corner styling

Controlgroup

Added missing selector for corner styling

Allow controlgroup buttons to be wrapped in a LI

Convert to widget

Container() function tells people where to put their buttons

Changed selectors for controlgroup corner and border styling to make mixed controlgroups work

Changed selectors for negating border-radius on buttons in controlgroups

Changed selector from class -last to :last-child for border bottom on last controlgroup item.

Corner styling

Cross browser border styling solution for controlgroups

Delay registration of enhancement hook until dom-ready (cherry picked from commit d952878bb076c2fc4c25c3b53e862e49e8d63603)

Do not assume checkboxradio widget is defined

Fixed issue with selects in horizontal controlgroup being displayed as block on IE7.

Hide labels of inputs type button as well when in a controlgroup.

Had wrong default value for option excludeInvisible

Moving flipClasses() into the widget following a suggestion by johnbender

Need to ignore value of excludeInvisible during _create(), because all children will be invisible, since the page itself is invisible during enhance

New option: "corners": boolean: default: true

Remove border radii for all controlgroup members before specifying that the first and last children should have rounded corners

Re-introduce refresh() method, to mark first and last visible child

Refresh the child checkboxradio widgets when the controlgroup type (horizontal/vertical) changes

Reinstate <= 1.2.0 functionality whereby running .controlgroup() on an already-enhanced controlgroup is the same as running .controlgroup( "refresh" )

Smarter selectors for controlgroup corner styling

Turn off shadow for children, but not if ui-focus is present

Ui-first-child/ui-last-child for corner and border styling

Update first/last classes using common behaviour

Use enhanced buttonMarkup corner-encoding ability instead of setting corner classes manually — Fixes #3635
(Issue #3635) Use enhanced buttonMarkup corner-encoding ability instead of setting corner classes manually

Was using wrong calling convention for this._super()

Dialog

Added info and demo of option closeBtn to the docs.

Added info and example for option corners.

Added option corners for dialogs

Added option corners to option-page and data- attribute reference.

Append close button to first found header to prevent a close button being added to popup on same page as well. Fixes #5382.
(Issue #5382) Append close button to first found header to prevent a close button being added to popup on same page as well.

Attach pagebeforeshow handler using ._on(). Fixes #2215. (Issue #2215) – Dialog: Attach pagebeforeshow handler using ._on().

Hide X/close button option on Dialogs
(Issue #3886) – New option: closeBtn: default "left": possible values: "left","right","none"

Prevent dialogs re-using initial ui state from going back

Make sure close button inherits header theme.

Missing round corners
(Issue #4277) – Corner styling for dialog and popup header/content/footer. Also fixes #4277

Removed code that removes active state from buttons on pagehide. Fixes #5111.
(Issue #5111) Removed code that removes active state from buttons on pagehide.

Events

Modified event dispatching which was impacting proper dispatching of scrolling events under jQuery 1.9.0. Thanks erikyuzwa!

Fieldcontain

Cannot use $.mobile namespace here because these files do not depend on core

Changed from 450px to 28em breakpoint. Fixes #5276
(Issue #5276) – Changed from 450px to 28em breakpoint.

File Input

File input support
(Issue #5050) – Added file inputs to the auto init so they now receive consistent theme styling.

Fixed toolbars

Fixed incorrect event binding in _on (Issue #5487) – Page padding should be applied before transition starts

Fixed header jumps around when iOS keyboard disappears (Issue #5332)- added iOS6 to iOS workarounds

Fixed incorrect event binding in _on (Issue #5487) – Page padding should be applied before transition starts

Fixed header jumps around when iOS keyboard disappears (Issue #5332)- added iOS6 to iOS workarounds

_destroy()
(Issue #3880)
– FixedToolbar: change destroy to _destroy per ui 1.9 upgrade guide widget was not being destroyed previously. Fixes #3880 – fixedToolbar _destroy()

Added a workaround to prevent conflicts with fixedtoolbars – the css workaround is in the fixedtoolbar css

Added extension with browser specific workarounds
(Issue #3748, Issue #4113, Issue #4250, Issue #4337, Issue #4410)
– Added extension with browser specific workarounds Fixed: #3748 Android 2.x: Page transitions broken when fixed toolbars used #4113 Header and footer change their position after keyboard popup – iOS #4250 Persistent footer instability in v1.1 with long select lists in Android 2.3.3 #4337 Fixed header problem after scrolling content on iOS and Android ##4410 Footer navbar moves up when clicking on a textbox in an Android environment

Changed to reset padding Vs. setting to 0 to maintain user set page padding.

Declaring _thisPage explicitly — thanks arschmitz

Firefix

iOS 6 fullscreen: page can be panned left and right (wider than the screen?) (Issue #5155) – Fixed toolbars: higher specifity for border left and right 0 rule.

Make sure absolute positioning is in effect for fixed toolbars while open

Move page handlers to the widget prototype level and attach them using ._on()

Moving through form in Mobile Safari with “Next” and “Previous” system controls causes fixed position, tap-toggle false Header to reveal itself
(Issue #4724) Wait for stack to unwind before showing tollbars on focusout to make sure we have not jumped to another input. Fixed #4724 – Moving through form in Mobile Safari with "Next" and "Previous" system controls causes fixed position, tap-toggle false Header to reveal itself

Only fix toolbar conflicts on push and reveal

Persistent headers and footers placed under content after transition
(Issue #4019) – Persistent headers and footers placed under content after transition – Header and footer were both being appended broke out to prepend header and append footer.

Positioning for overlay should allow for fixed positioning toggles as usual

Prevent the content padding adjustments for fullscreen from being applied to popups.

Revert to using .one(). Re: #5361

Switched to double quotes for consistency

This should be the last change needed for 2.3′s fixies

Transitions with Pages that have Fixed Toolbars (Issue #4424) – Transitions with Pages that have Fixed Toolbars – Remove class in class after transition completes

Updating description metadata with reference to new workarounds extension

When you call destroy on the fixedToolbar widget it does not restore page padding
(Issue #5261) added logic to set page padding back to 0 on destroy. Fixed #5261 – When you call destroy on the fixedToolbar widget it does not restore page padding

Forms

New behaviour that allows form widgets to become aware of the fact that the form they are in has been reset

Grid

Responsive Grid
(Issue #4955) Added responsive docs page and "ui-responsive" breakpoint preset.

Icons

Added new bars (nav) and edit icons

Corrected 18px black sprite size and icon position

Listview

Added option corners and shadow for listviews

Added parameters to _addFirstLastClasses()

Adjusted min-height of list item with thumbnail.

Avoid filtering twice for ":visible"

Bind to input event as well. Fixes: #2834.

Corner styling

Create remote auto-complete demo using new listview filter hooks
(Issue #5096)
- https://github.com/jquery/jquery-mobile/issues/5096

Cross browser listview border bottom on last item solution

Fix list-dividers use data-theme attribute first

Iphone : Go button does not close the keyboard with Data filter
(Issue #3303) – Blur the search field on submit

List autodividers (Issue #5197) – use trim() to avoid issues with newlines and spaces in markup. Thanks @demonslord!

New option to start with all items hidden when search input in blank (Issue #5090) – New option to start with all items hidden when search input in blank Please meet: data-filter-reveal

Option filter can’t be set programmatically
(Issue #5245) – Listview: make it possible to set option filter programmatically.

Prevent onKeyUp handler to be called twice for the same value

Remove functions and calls related to corner manipulation

Replaced class ui-li-last by :last-child selector

Restored left/right border on list dividers

Title attribute of a split button pulls in extra spaces (Issue #5182) Title attribute of a split button pulls in extra spaces. Cause: entire text node is copied for the title attribute, including any leading or trailing spaces. Solution: Apply $.trim() to the text node value before assigning to the title attribute. Files Impacted: listview.js

Ui-first-child/ui-last-child for corner and border styling

Update first/last classes using common behaviour

Use the new class to select the themed collapsible content

Navigation

Fix the extra hidden inputs being added on click (Issue #5593 and #5590) – Append value of named button to form data if the form was submitted by a click of that button without resorting to a hidden input.

Incompatibity with jQuery.noConflict() (Issue #5448) – Fixed by wrapping the path helper module in an anonymous func.

Nav incorrectly adding an empty hash in Chrome (Issue #5442)

Disabling hashListeningEnabled in 1.3 beta doesn’t work (Issue #5445)

Add to history without modifying the location.hash when history is turned off

Make it possible to disable history in dialogs (Issue #5465) – Retreat in the urlHistory stack when closing with history disabled.

Incompatibity with jQuery.noConflict() (Issue #5448) – Fixed by wrapping the path helper module in an anonymous func.

Nav incorrectly adding an empty hash in Chrome (Issue #5442)

Disabling hashListeningEnabled in 1.3 beta doesn’t work (Issue #5445)

Add to history without modifying the location.hash when history is turned off

Make it possible to disable history in dialogs (Issue #5465) – Retreat in the urlHistory stack when closing with history disabled.

Abstract path helpers

Add active class to submit button if form will be handled via AJAX. Addresses parts of #5009.

Add config to disable base changes all together

Add parameter calculateOnly to getAjaxFormData when the data itself is not important

Address issue with opera and dialog back button

Allow users to provide state to further normalize the navigation events

Basic hash assignment handling

ChangePage: Re-examine whether toPage is a string after having issued pageBeforeChange, because the handler might have replaced a jQuery object with a string (in the case of a redirect)

Correct query param preservation on urls

Corrected first pass at query params to embedded pages

Create, store, and pass the absolute url in all page lifecycle events on the trigger data object

Default to the base href when dynamiceBase is disabled

Disable base tag reset on stale dialog url

Dynamic Page Generation & Page Refresh (Issue #5085) – first pass at supporting query params in the hash

Factor out calculation as to whether form submit will happen over AJAX

Fix initial state for alternate init case

Fix for transitions

Fix for pagechange value and test of 3 page change events

Include the navigate method to do history tracking and state inclusion for hashchange

Leading whitespace in href results in a synchronous load, when async is desired
(Issue #4882) – Changed urlParseRE to ignore space at beginning. This is expected behavior in browsers. This used to result in pages changing to destination.html instead of the now destination.html

LoadPage: When loading a blank page, do not end up with <div data-role="page">undefined</div>

Merge the search params when squashing makes absolutely no sense since it ruins the new url

Move event blocking to navigator object

Move navigate events under events directory

Move navigation and history tracking into objects

Move the hash alteration below the snippets that determine the data that will go into a navigate call

Navigator object may exist in browser like FF

No history entry is added when the hash handling is turned off

Path.getDocumentUrl is defined twice

Prefer backward history movement, tests to accompany

Provide history and directionality to popstate based navigate event

PushState is broken on certain browsers (Issue #5414) – address browsers that don’t fire popstate on hash assignment

Reduce number of declared variables and reduce manipulation via jQuery objects in favour of doing it via DOM elements

Rename parameter for getAjaxFormData ($this -> $form)

Save the initial hash key in urlHistory

Split out hash monkeying from the navigate method for testing

Split out navigation objects into their own files

Split out path for future direct reference

Strip initial hash character off initialDst

Support disabling pushstate with option

The first urlHistory entry cannot be a stale dialog hash state

Try to get rid of call to .closest( ".ui-btn" ) by making use of buttonElements data added during buttonMarkup()

Use existing api property name for consistency

Use originalEvent in preference to from

Vclick handler: Do not add active class if already added

Vclick handler: Do not avoid removing active class off button that already has it

Vclick handler: be more paranoid about the possibility that target.parentNode is null, and improve buttonMarkup data retrieval heuristics

Wait for DOM ready in addition to nav ready before listening for "navigate" events

Page

Dialog themed incorrectly when re-created (Issue #2215) – Attach handlers using ._on().

Needs to depend on core because it uses things from the $.mobile namespace (such as getInheritedTheme and pageContainer)

Orientation Change

Added $.mobile.iosorientationfixEnabled option, which can be disabled at mobileinit

Disabled the iOS orientationchange fix in iOS6+ as it’s no longer needed

Panel

Make sure active state is applied to and removed from buttons in header (Issue #5588)

Set min-height when panel is open (Issues #5456 and #5471). Prevents vertical scrollbar.

Panel should close after, and not during, page animation (Issue #5480) – changed event listener to pagehide. Thanks jhogervorst!

Use extend in the create method also exposed resetActivePageHeight in mobile.navigation so panel can use it.

Chrome Issue: CSS column-count and data-role=”panel” (Issue #5508) – Bit more hardware acceleration of content-wrap required for Chrome.

Only apply active state to button styled links, not standard links

Only set page theme to panel theme for reveal and push mode.

Auto-close panel when clicking on a link in the panel with data-ajax="false".

Set min-height when panel is open (Issues #5456 and #5471). Prevents vertical scrollbar.

Panel should close after, and not during, page animation (Issue #5480) – changed event listener to pagehide. Thanks jhogervorst!

Use extend in the create method also exposed resetActivePageHeight in mobile.navigation so panel can use it.

Chrome Issue: CSS column-count and data-role=”panel” (Issue #5508) – Bit more hardware acceleration of content-wrap required for Chrome.

Only apply active state to button styled links, not standard links

Only set page theme to panel theme for reveal and push mode.

Auto-close panel when clicking on a link in the panel with data-ajax="false".

Popup

Popup over selectmenu focus issue (Issue #5519) – Cleaned up focus restriction handling.

Prevent opening a panel while another panel is already open (Issue #5510) – Don’t start opening a panel before other panels are closed.

Set default theme for panel to “c”

Fixed incorrect fixed toolbar width and position if animate is false.

Popup over selectmenu focus issue (Issue #5519) – Cleaned up focus restriction handling.

Prevent opening a panel while another panel is already open (Issue #5510) – Don’t start opening a panel before other panels are closed.

Set default theme for panel to “c”

Fixed incorrect fixed toolbar width and position if animate is false.

Cannot reclaim dialog hash state when a data-rel="back" button is clicked inside a popup, because we cannot tell the difference between a link of the form href="page-where-we-came-from" and a link of type data-rel="back"

Check if link is in listview

Chrome popup stops launching if transition is “slideup” (Issue #5094) – Re-introduce interruptible transitions

Data-tolerance="0" did not work.

"detached retina" fix – the window height on iStuff with a retina display seems to fluctuate by one pixel during scroll, causing a spurious resize event right after popup open, even though window size is constant during the entire opening sequence

Do not pass link into open() because it is not used there.

Fixed the popup theme

Flatten widget methods: move timeout that triggers focus and "popupafteropen" to the widget level

Generate history entry when opening from an initial URL containing a hash key

Get rid of _globalHandlers and use ._on() instead

Get rid of a bunch of "self" declarations

Made images inherit the corner styling when they are the only child in the popup.

Make sure close() only acts if the popup on which it is called is the currently open popup

New method: reposition() – emits "popupbeforeposition" and repositions the popup based on coordinates passed in.

Pass placement through "popupbeforeposition" to allow handlers to modify the popup positioning

New option: "dismissable": default: true, whether a click on the screen or pressing Esc will dismiss the popup – note: pressing the "Back" button on the browser will dismiss the popup no matter what

Popup widget depends on selectmenu css
(Issue #5217) – Renamed class ui-selectmenu-hidden to ui-popup-hidden

Popup("destroy") never ends
(Issue #5244) – Avoid infinite recursion by detach()ing the payload from the container before attempting to put it back to its original place in the DOM (which may not exist, if the popup was created based on a detached element)

Popup disappears on iDevice with orientation change in standalone mode (Issue #5153) – Initiate resize expectation during orientationchange

Popup Reappears after closing when textarea input field expanded on iOS 6 (Issue #5157) – Only rapid-open the popup if it is open

Popup remove firing popupafterclose
(Issue #5123) – When destroying a popup, run close() before un-enhancing if it is the currently active popup

Removing stack unwind introduced in 84163152be7e2344976cc20f4b896cf87315b1f7 to prevent blue flash on Android, since the real reason for the blue flash may have been the triggering of the focus-capture code induced by a superfluous mouseup that results in a focusin on an element beneath the popup.

Rename function _maybeRefreshTimeout to _expectResizeEvent

Return from the dialogHashKey state when the back link takes the form of a link to the page that opened the dialog.

Scroll to top when popup is closed on iOS (Issue #5334) – Record scrollTop upon open and close, and restore it upon hashchange.

Systematically merge link options and widget options during _open().

There is a case when bindings must not be released during _closePopup()

Try to keep keyboard focus inside the popup while it’s open (Issue #5130) – Restrict focus to elements inside the popup

Unable to close popup in Android 2.3 if transition was used when opening it (Issue #5189) – Correctly handle the case when the fallback transition is "none" — Fixes #5189

Unbind nav and click delegate events as soon as the process of closing the popup starts.

Rangeslider

Missing argument in function _dragFirstHandle – exception was thrown in Firefox. Thanks stforek!

Missing argument in function _dragFirstHandle – exception was thrown in Firefox. Thanks stforek!

Added missing ui-mini class.

Added new event beforechange to slider which we return false on when we want to eat the change event in rangeslider

New input styling, keep inputs always next to slider.

Simplified updating of the highlight, changed the default layout to the split style. updated slider to snap to steps as long as the step is larger then 1px. Made clicks on the extremes register to closest slider.

Select

Get rid of hasAttribute calls. (Issue #5506) Thanks erikyuzwa.

Get rid of hasAttribute calls. (Issue #5506) Thanks erikyuzwa.

Add a check to not add ui-popover-container if it’s already on the page
(Issue #4661) – Implement _destroy()

Adding new behaviour to widget definition

Android 4.1 with Chrome – Select on footer with data-position=”fixed” no response
(Issue #5140) – Select menus inside elements in Android 4.1 Chrome now work after scrolling.

Can’t open popup from select menu.
(Issue #5254) – Give IDs to the popup and the dialog, and open popup/dialog via nav — Fixes #5254

Custom select menu header corner styling (Issue #5215) – headers of custom select menus shouldn’t inherit the popup corner styling. Fixes #5215.

Make sure the UL ends up inside the popup when the menu is closed so that the next time its size needs to be measured to decide whether to show a dialog or a popup its size /can/ be measured. Also, centralize the close behaviour in the close method.

Mark as closed after dialog closes – Re: #5195 – Thanks martenbohlin

Must depend on navigation to open.

Older versions of jQuery report 0 for .attr( "tabindex" ) if the attribute is absent. Check for its presence first.

Prevent-focus-zoom doesn’t work
(Issue #5333) – improved preventFocusZoom

Prevent horizontal scrollbar on ui-content if only one custom select on the page. Fixes regression from commit 67e6fbc.

Select data-overlay-theme not changing from ‘a’ past jqm1.1.1
(Issue #5051) – fixed listbox overlayTheme regression. Select data-overlay-theme not changing from ‘a’

Select menu refresh() does not refresh popup title (Issue #5275) – Update placeholder during _buildList().

Select-element with class ui-btn-left inside header-div has no width (Issue #5073) – Remove class ui-btn-left/right from the select element itself during enhancement. Fixes #5073

The preventFocusZoom option check needs to be insde the event binding.

Slider

Actually include disabled changes mentioned previous commit

Adding new behaviour to widget definition

Restoring slider according to the FIXME now that we have a widget factory that includes a fix for UI issue #8724

Fix incorrect variable name which caused error in firefox

Flip toggle switch broken on IE7
(Issue #5391) – unset slider handle top offset for flip toggle switch.

Move triggering before change to fix regression with highlight breaking out on track click with rangeslider.

Position input next to label on small screens and make slider full width.

Removed CSS for regular sized input. Became superfluous now that the input is always mini sized.

Removed JS and CSS for option inline that does not exist.

Slider fill the whole width? (Issue #5045) – Made the slider and input together fill full width. Changed class ui-slider-mini to ui-mini for consistency.

Unset ui-btn-inner border-top for mini flip toggle switch handle because of the negative margin.

Wrap input, slider, and label in a div for styling

Support

Added unprefixed properties to transitions CSS for IE10 support.

Adds test for unprefixed `perspective` property."

Ensures IE10 passes transition test; checks for unprefixed transitions to avoid qualifying Windows Phone.

Fix cssTransition support test (properly this time) for ie < 10

Fix cssTransition test to kick out all ie versions < 10

Fix cssTransition test to kick out all ie versions < 10

Opts IE9 (back) out of page transitions.

Switch to $.mobile.browser.oldIE FIX: #4881 – Move $.mobile.ie to $.mobile.oldIE

Update to $.mobile.browser.oldIE

Update to latest version of support

Swipe

Scrolling up and down causes swipe event (Issue #2328) – Swipe Event: made it possible to hook to the start and stop objects and swipe event handler to allow custom implementations and extensions. Fixes #2328 – Scrolling up and down causes swipe event

Table

A data-mini button in a data-role table doesn’t work (Issue #5531) – reset line-height for buttons in table

Bug with Table reflow on Safari
(Issue #5380) – Fixes table rendering when switching between breakpoints in Safari <= 5. Closes 5380.

Changed the check for table cell visibility to check if display === table-cell, because this is happening before pageshow and the :visible check will always be false. Now the columntoggle menu is updated properly at init. addresses issue #5093

Textarea

On pasting to a textarea, no auto grow occurs until one taps into and starts editing
(Issue #4854) – Make textarea autogrow also work on paste and with multibyte chars. Fixes #4854.

Textinput

Text Input had too much padding on the right (Issue #5470) – Only set more padding right if option clear button is true

The textinput(‘enable’) method not working properly (Issue #5447)

Text Input had too much padding on the right (Issue #5470) – Only set more padding right if option clear button is true

The textinput(‘enable’) method not working properly (Issue #5447)

Adjusted clear button position for mini sized.

Adjustments to fieldcontain CSS

Always wrap input in a div. This fixes: alignment of full width inputs on old IE/WP, input type color on Chrome, input type file on FF, inputs with and without clear button equal height.

Box-sizing border-box when the wrapper div has a specific width (i.e. in field container) instead of auto.

Changed option name to clearBtnText for consistency

Clear button not optional for Search.

Clear input button for text inputs
(Issue #1834) – modified css to add clear button to input type text, deprecated clearSearchButtonText, removed duplicate code.

Fixed a specificity issue

Fixed box-sizing for text input with clear button.

Fixed margin for ui-mini with clear button.

Fixed right padding for text input with clear button.

Fixed the width of text input element with clear button.

Fixed the disabled styling of textinput elements.

IE9 – the descender (tail) part of some lowercase letters such as g, p, q or y are clipped
(Issue #5307) – added min-height to make text fit on IE/WP.

No option clearBtn for textarea, padding on input instead of wrapper, full width inputs.

Prevent the slider number input from being wrapped in a div.

Reorganizing and cleanup CSS

Request: mini-Option in checkboxradio & textinput
(Issue #4070) – Allow to set option mini programmatically.

Slider number input should never get a clear button

Text input placeholder text not grayed out in Firefox (Issue #5166) – Modify placeholder text color in Firefox to use standard in FF 15+, add important to resolve issue in build process where other CSS overrides :-moz-placeholder setting later on., use input prefix for -moz-placeholder fix instead of important override.

Toggle clear button on input event as well.

Width of textinput depends on its type (Issue #5131) – add margin 0 for webkit-inner-spin-button/webkit-outer-spin-button to resolve android 4.1 width issue for type=number fields, remove webkit-inner-spin-button and webkit-appearance:none as they caused an unwanted change in Chrome.

Theme

Make it easy for people to override the icon color by just adding the ui-icon-alt class to the element or a container.

Added ui-icon-nodisc class to make it easy to have an icon without background.

Removed any remaining blur on text shadows for better performance

Slightly lightened up the drop shadow opacity to remove muddiness

Replaced icon sprite and update and set icon bg position for both SD and HD.

Cleaned up SD icons for clarify and alignment

Slidefade CSS: add two missing semicolons. This enables using the CSS as SCSS without compile errors.

Make it easy for people to override the icon color by just adding the ui-icon-alt class to the element or a container.

Added ui-icon-nodisc class to make it easy to have an icon without background.

Removed any remaining blur on text shadows for better performance

Slightly lightened up the drop shadow opacity to remove muddiness

Replaced icon sprite and update and set icon bg position for both SD and HD.

Cleaned up SD icons for clarify and alignment

Slidefade CSS: add two missing semicolons. This enables using the CSS as SCSS without compile errors.

Correction webkit prefixed value for background-clip. Removed moz prefixed prop/val because it is not used in FF4+.

Fieldcontain CSS
(Issue #5277) – changed class ui-br to only set border color and style. Border width is set in structure CSS (fieldcontain).

Removed superfluous corner classes

Widgets

Moving references to widget instances to the new namespaced key

Touch events

Modified event dispatching which was impacting proper dispatching of scrolling events under jQuery 1.9.0. Thanks erikyuzwa!

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.3.0.js (useful for debugging)
• Minified: jquery.mobile-1.3.0.min.js (full library, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.3.0.css (useful for debugging)
• Minified with Default theme: jquery.mobile-1.3.0.min.css (full library, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.3.0.css (useful for theme development)
• Minified structure without a theme: jquery.mobile-1.3.0.min.css (full library, ready to deploy)

 

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

 

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.3.0.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

 

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.3.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

* Note: If jQuery core 1.8+ is used with jQuery Mobile, iOS 3.x and BB5 are re-graded to C level support because core dropped support for methods these platforms need for full functionality.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

• Apple iOS 3.2*-6.1 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3 / 5.1 / 6.1), iPad 3 (5.1 / 6.0), iPad Mini (6.1), 3GS (4.3), 4 (4.3 / 5.1), and 4S (5.1 / 6.0), and 5 (6.0)
• Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
• Android 3.2 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
• Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
• Windows Phone 7.5-7.8 – Tested on the HTC Surround (7.5), HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800 (7.8)
• Blackberry 6-10 – Tested on the Torch 9800 (6) and Style 9670 (6), BlackBerry® Torch 9810 (7), BlackBerry Z10 (10)
• Blackberry Playbook (1.0-2.0) – Tested on PlayBook
• Palm WebOS (1.4-3.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0), HP TouchPad(3.0)
• Firefox Mobile 18 – Tested on Android 2.3 and 4.1 devices
• Chrome for Android 18 – Tested on Android 4.0 and 4.1 devices
• Skyfire 4.1 - Tested on Android 2.3 device
• Opera Mobile 11.5-12: Tested on Android 2.3
• Meego 1.2 – Tested on Nokia 950 and N9
• Tizen (pre-release) – Tested on early hardware
• Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
• UC Browser – Tested on Android 2.3 device
• Kindle 3, Fire, and Fire HD - Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
• Chrome Desktop 16-24 - Tested on OS X 10.7 and Windows 7
• Safari Desktop 5-6 - Tested on OS X 10.8
• Firefox Desktop 10-18 – Tested on OS X 10.7 and Windows 7
• Internet Explorer 8-10 – Tested on Windows XP, Vista and 7, Windows Surface RT
• Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

• Blackberry 5.0*: Tested on the Storm 2 9550, Bold 9770
• Opera Mini 7 - Tested on iOS 6.1 and Android 4.1
• Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
• Internet Explorer 7 – Tested on Windows XP

C-grade – Basic, non-enhanced HTML experience that is still functional

• Internet Explorer 6 and older – Tested on Windows XP
• iOS 3.x and older – Tested on original iPhone (3.1), iPhone 3 (3.2)
• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
• All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

]]> http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/feed/ 19 http://jquerymobile.com/blog/2013/02/04/jquery-mobile-1-3-0-rc1-released/ http://jquerymobile.com/blog/2013/02/04/jquery-mobile-1-3-0-rc1-released/#comments Mon, 04 Feb 2013 17:59:58 +0000 Todd Parker http://jquerymobile.com/?p=3410 Continue reading →]]> The jQuery Mobile team is excited to announce the first release candidate for 1.3.0. This release is focused on elevating responsive web design (RWD) and brings lots of cool new widgets including panels, dual handle range sliders, and two different responsive table modes. We’ve also been doing a lot of work on re-factoring our AJAX nav system to make is easier to use and more consistent across browsers. Try it now: 1.3.0 RC1 demos

Demos & docs | Changes since Beta | Download & CDN

Changes since 1.3.0 Beta

There are lots of great new features in 1.3.0: panel widget, two responsive table modes: reflow and column toggle, dual handle range slider, responsive grids, new Navigate event and method, a listview reveal feature to make autocomplete with local data easy, and much more.

Check out the 1.3.0 Beta blog post for details of everything new in this release. For those following along, here are the fixes and improvements we’re added since Beta based on your testing and feedback.

Events

Modified event dispatching which was impacting proper dispatching of scrolling events under jQuery 1.9.0. Thanks erikyuzwa!

Fixed toolbar

Fixed incorrect event binding in _on (Issue #5487) – Page padding should be applied before transition starts

Fixed header jumps around when iOS keyboard disappears (Issue #5332)- added iOS6 to iOS workarounds

Panel

Set min-height when panel is open (Issues #5456 and #5471). Prevents vertical scrollbar.

Panel should close after, and not during, page animation (Issue #5480) – changed event listener to pagehide. Thanks jhogervorst!

Use extend in the create method also exposed resetActivePageHeight in mobile.navigation so panel can use it.

Chrome Issue: CSS column-count and data-role=”panel” (Issue #5508) – Bit more hardware acceleration of content-wrap required for Chrome.

Only apply active state to button styled links, not standard links

Only set page theme to panel theme for reveal and push mode.

Auto-close panel when clicking on a link in the panel with data-ajax="false".

Nav

Incompatibity with jQuery.noConflict() (Issue #5448) – Fixed by wrapping the path helper module in an anonymous func.

Nav incorrectly adding an empty hash in Chrome (Issue #5442)

Disabling hashListeningEnabled in 1.3 beta doesn’t work (Issue #5445)

Add to history without modifying the location.hash when history is turned off

Make it possible to disable history in dialogs (Issue #5465) – Retreat in the urlHistory stack when closing with history disabled.

Popup

Popup over selectmenu focus issue (Issue #5519) – Cleaned up focus restriction handling.

Prevent opening a panel while another panel is already open (Issue #5510) – Don’t start opening a panel before other panels are closed.

Set default theme for panel to “c”

Fixed incorrect fixed toolbar width and position if animate is false.

Rangeslider

Missing argument in function _dragFirstHandle – exception was thrown in Firefox. Thanks stforek!

Selects

Get rid of hasAttribute calls. (Issue #5506) Thanks erikyuzwa.

Tables

A data-mini button in a data-role table doesn’t work (Issue #5531) – reset line-height for buttons in table

Text inputs

Text Input had too much padding on the right (Issue #5470) – Only set more padding right if option clear button is true

The textinput(‘enable’) method not working properly (Issue #5447)

Theming

Make it easy for people to override the icon color by just adding the ui-icon-alt class to the element or a container.

Added ui-icon-nodisc class to make it easy to have an icon without background.

Removed any remaining blur on text shadows for better performance

Slightly lightened up the drop shadow opacity to remove muddiness

Replaced icon sprite and update and set icon bg position for both SD and HD.

Cleaned up SD icons for clarify and alignment

Slidefade CSS: add two missing semicolons. This enables using the CSS as SCSS without compile errors.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.3.0 RC1 release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (see our contributing guidelines for a test template). If all goes well, we hope to release the final build in 2 weeks.

Try it now: ThemeRoller and Download Builder have 1.3.0 RC1

We will now support pre-release versions to both the ThemeRoller and Download Builder tools to help you test. Please be patient, these may take a while to update for each release.

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.3.0-rc.1.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.3.0-rc.1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.3.0-rc.1.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.3.0-rc.1.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.3.0-rc.1.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.3.0-rc.1.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>

ZIP File: If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.3.0-rc.1.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

]]> http://jquerymobile.com/blog/2013/02/04/jquery-mobile-1-3-0-rc1-released/feed/ 24 http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/ http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/#comments Tue, 15 Jan 2013 04:25:25 +0000 Todd Parker http://jquerymobile.com/?p=3297 Continue reading →]]> The jQuery Mobile team is thrilled to announce the beta release of 1.3.0. This release is focused on elevating responsive web design (RWD) and brings lots of cool new widgets including panels, dual handle range sliders, and two different responsive table modes. We’ve also been doing a lot of work on re-factoring our AJAX nav system to make is easier to use and more consistent across browsers. Try it now: 1.3.0 Beta demos

Demos & docs | Key changes | Download & CDN

1.3: A responsive focus

Since the inception of the jQuery Mobile project, we have embraced the idea of designing for all devices and platforms in a “One web” approach. To that end, we built everything on a progressive enhancement foundation and every widget is designed to be 100% width to fit within a flexible or responsive grid.

jQuery Mobile-first

jQuery Mobile is also designed and fully tested to work not just on mobile phones, but tablets and even desktop browsers. Think of it as mobile-first, not mobile only. In fact, in our next release we’re going to be starting the process of integrating closer with the jQuery UI with the goal of having even more shared code and conventions. The UI tabs widget will be the first to be ported into our library and theming system.

We’ve seen the question “What should I use: RWD or jQuery Mobile?” many times on Twitter and our response is an unqualified “both”. Think of jQuery Mobile as a set of touch-friendly UI elements that are designed to fit within your responsive design. Even at 1.0, our demos & docs used media queries for a responsive experience, but we decided that we could do a better job helping people use responsive design techniques in their own projects.

Our focus for the 1.3 release has been to educate the community on responsive web design (RWD) by adding responsive documentation and demos that explain key concepts and also by adding new widgets like responsive tables, panels and grids that make it easy to build responsive sites and apps.

Bundling breakpoints

Media queries are a difficult thing for any framework to include in the codebase because responsive is all about designing for your specific content. For that reason alone, it’s impossible to pick a single “ideal” breakpoint that will work for everyone.

For example, in our responsive table widget we need to select a screen width to switch between the tabular and stacked presentation for reflow mode. That breakpoint width will completely depend on both the visual design (typography, other layout elements) and the content (number of columns, content length). To address this, in the docs for each responsive widget, we spend a lot of time explaining how to write a custom breakpoint that will be tailored to your unique needs.

Breakpoint classes to the rescue

The flipside is that people use a framework because they want things to be easy and it’s hard to explain that a responsive widget won’t work at all until you write a bunch of CSS. So the compromise we took for responsive widgets is to include a single breakpoint “preset” in the structural CSS that we hope will be useful in a fair amount of typical situations. This breakpoint is applied by adding a class like ui-responsive to the widget markup to opt into the breakpoint. This opt-in is important because overriding a breakpoint baked into the CSS is very cumbersome if you want to use a custom breakpoint — you’d need to negate all the CSS rules from our breakpoint before adding your own.

We think this strikes a good balance between convenience and educating folks on how to use media queries. When we finalize 1.3 in a few weeks, we’ll accompany this with an all-new demos site that will have RWD tutorials and lots of cool demos showing off how to write custom styles and breakpoints to deeply customize jQuery Mobile.

New Widget: Panels

One of the most common mobile UI patterns we see right now are Facebook-style panels that open to reveal a menu, form or other content. We spent a lot of time prototyping different ideas and are really happy with our new panel widget. It offers a ton of flexibility. Panels can be positioned on the left or right of the screen and be placed flexibly in the HTML source order.

There are three different ways a panel can animate open. The default reveal display slides the page away to show the panel beneath, the push display animates both the panel and page, and the overlay display places the panel on top of the page. Panels can be closed by swiping, tapping onto the page, or hitting the Esc key on the keyboard.

To take this widget responsive, it’s easy to add media queries to make the panel stay open at wider widths instead of auto-closing when you click on the page content. This makes this panel more like a collapsible column, like the folder list in a mail program. We’ve included a breakpoint preset to add this behavior by adding a class to the page container. Here’s an example of a typical panel setup with a left nav panel and right panel with a form.

For such a simple looking widget, panel were really challenging to get right across all our platforms. We ended up going through four different re-factors leading up to beta in order to get the animations as smooth as possible and are really happy with the result.

Panel API docs >

New: Responsive tables

There are a lot of possible ways to handle tabular data in responsive designs. We’ve decided to tackle two different responsive table modes in 1.3, each with its own strengths and uses.

The reflow table mode swaps to a stacked label/data style presentation at narrow screen widths and best for situations where the content length is fairly long and comparing data across rows in a table is less critical. For example, a product or movie list might be a good choice for reflow mode.

Reflow table API docs >

The column toggle table mode hides columns at narrower page widths according to a priority you set on each column as a sensible default to ensure that the table fits on-screen. A dynamically generated column chooser popup allows the user to select which columns they want to see for full control. This mode is best for situations where comparing data across rows and columns is critical. For example, a complex table of financial data might be a good choice for column toggle mode.

Column toggle API docs >

We’ve built some cool demos showing how you can customize these basic table tools to make a comparison chart or present complex financial data with grouped headers and more.

New: Range slider

Adding support for dual handle sliders for collecting range values has been a popular request and we’re happy to add this new widget in 1.3. The new dual handle range slider starts with a pair of HTML5 range inputs and essentially two sliders with a shared track. All the normal slider options work with ranges: mini sizing, theming, etc.

We’ve also refined the size and styling of the inputs that accompany sliders to make them integrate better visually and leave more room for the slider. The inputs are now mini sized with bold text and no border or spinner arrows (seen in desktop browsers).

All sliders now respect step values smaller than whole numbers which is great for scientific and financial applications that need inputs that capture values to the 0.1 or 0.01 level of accuracy. Slider behavior has been refined so dragging will snap to the closest step position to provide better feedback.

Range slider API docs >

New: Responsive grids

The cornerstone of any responsive design are responsive grids. We believe that the best grid systems are content-specific and not something that can be easily generalized into a framework but for people using our simple grid blocks, there are now detailed instructions on how to create your own media queries to adjust grids at various breakpoints.

We’re also shipping with a present breakpoint that can be applied by adding a class to your grid wrapper. This will apply a CSS breakpoint at narrower screen widths that stack all the grid blocks instead of floating them. This is a simple way to make your grids a bit responsive and fit better on phones.

Grid API docs >
Responsive grids >

Navigate event and method

There are two new additions to the navigation functionality in jQuery Mobile. A navigate event that normalizes the URL alteration events hashchange/popstate, and a $.mobile.navigate method that allows users to receive extended traversal information in navigate bindings (eg, directionality).

The navigate event is a lightweight attempt to unify bindings to a browser’s URL alteration events hashchange and popstate. It also handles differences in the way setting the hash on the location object interacts with the two browser events (ie, stop the world popstate triggering), and provides event hooks to control the event lifecycle.

The $.mobile.navigate method forms the bulk of the new functionality. By using the $.mobile.navigate method to do URL manipulation instead of doing it directly with the location object, replaceState, or pushState you get history management and support for both modes of URL state tracking. The history management provides a state object to navigate event bindings whether the browser supports the new history API or not. It also contains the logic to determine whether navigation is moving forward or back in the browser history.

Both the event and the method are available as modules apart from other navigation functionality in jQuery Mobile, with minor dependencies on other parts of the library. More info can be found on the issue for this refractor.

Navigate API: Event and Method

Page transitions: Support for IE10/WP8

Our CSS keyframe animations were written with vendor prefixes to date, but we’ve now added non-prefixed keyframe rules to bring transition support for IE10/WP8 and all future browsers. This also required updating the 3D support feature tests.

Listview: two new ways to make into an auto-complete

Everyone loves the listview filter feature and we heard quite a few requests to make this work as an autocomplete. Rather than create a new widget, we found two clever ways to make the current listview more powerful.

First, we’ve added the filter reveal feature makes is easy to build a simple autocomplete with local data. When a filterable list has the data-filter-reveal="true", it will auto-hide all the list items when the search field is blank and will display matching items as the user types into the search field. The data-filter-placeholder attribute can be added to specify the placeholder text for the filter. Any listview filter with a lot of items may be slow to perform on a mobile device so we recommend using this feature for a relatively small number of items.

To use the listview filter as an autocomplete that taps into remote data sources, you can use the listviewbeforefilter event 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.

We’ve added corner and shadow options for inset listviews for consistency with other widgets and made it possible to set theme on list dividers via the data-divider-theme attribute. On mobile devices, when using a listview filter, the submit button on the on-screen keyboard will now blur the input to dismiss the keyboard to improve usability.

Dialog: close button option for control

If the dialog has a header the framework will automatically add a close button at the left side of the header. You can now 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 prefer to add your own custom close button, you can use data-close-btn="none".

Dialogs now have a corners option like other widgets to control whether rounded corners are applied.

Popup: dismissible option

We’ve heard requests to prevent the click-out-to-close behavior of popups to make them modal. To address this, we’ve added a new dismissible option so you can add the data-dismissible attribute to a popup container. When set to false, the popup won’t close when you tap outside it onto the page.

Inputs: clear button option, support for file inputs

We’ve added a new feature to let you add the clear button we originally created for search inputs to any input type (text, date, number, etc.) by adding the data-clear-btn="true" attribute. The text for this clear button can be customized via the data-clear-btn-text="clear input" attribute. Search buttons have the clear button by default but can be controlled by this option. Note that this is available for all the input types except for textareas.

Now that file input types are becoming more supported by mobile platforms, we’ve added automatic styling for these as part of jQuery Mobile. Browser support for styling these is surprisingly good and even the clear button option seems to work with these on better browsers.

In addition, we’ve made lots of small improvements to inputs: fixed the height and alignment of text inputs on IE9/WP, textarea auto-grow now also works when you paste text, and text inputs now work much better with multibyte strings.

Selects: themable optgroups, header position support

If you’re using selects with custom menus, we’re fixed some focus issues and made optgroup themeable in custom menus via the new data-divider-theme option. We’ve also made selects work nicely inside headers when positioned with the ui-btn-left or ui-btn-right classes.

Button: programatic theme updates

It is now possible to change button’s data-theme programatically via _setOption.

Collapsibles: corner option

We’ve added a new corners option for inset collapsibles and collapsible sets to make this consistent with other widgets.

Fixed header improvements & extension

Fixed toolbars are tricky business with all the browser bugginess. Since 1.2, we’ve closed 37 fixed toolbar issues including the 1px jitter when scrolling, Android 2.x transition bugs, on-screen keyboard and input focus bugs, and iOS next/prev form controls causing the fixed header revealing itself.

Since the majority of these fixes are for older, but popular versions of Android 2.x and iOS, we’ve packaged these fixes and workarounds into an extension to fixed toolbars called fixedToolbar.workarounds.js that can be omitted in the download builder if you’re targeting only newer mobile browsers to save bandwidth and complexity.

Controlgroup is now a widget

We’ve upgraded controlgroup from a function into a proper widget so it has a full set of options (mini, shadow, corners, etc.) and a create event to help with enhancement.

Controlgroup API >

Icon additions: menu and edit

We’ve had a lot of requests to add specific icons to our icon sprite and with the current sprite-based approach, we’ve been trying to keep the set pretty simple and make it easy to use 3rd party sets. However, we realized that we need the now standard “3 bar” icon to accompany the new panels to support people using these for menus. While we were at it, we added a edit icon (pencil) because this was a very popular request.

In 1.4, we’re looking at re-vamping our theming and icon system and hope to be switching to SVGs with a PNG fallback which will make it easier to offer a larger icon set and maintain the best quality since we will be working with vectors. More on that after 1.3 is finalized.

Swipe event extensibility

The swipe event can now be extend to add your own logic or functionality. The following methods can be extended:

• $.event.special.swipe.start – This method recieves a touchstart event and returns an object of data about the starting location.
• $.event.special.swipe.stop – This method recieves a touchend event and returns an object of data about the ending location.
• $.event.special.swipe.handleSwipe – This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.

We’ve also been building some real-world swipe demos like the swipe page nav and the swipe listview item to delete.

Swipe event API >

New API site: Launching with 1.3!

Our current demo and docs format has mixed reviews: some folks like our simpler, tutorial style docs while others have said that it’s hard to just get all the info they need quickly.

To address this, we’ve been working hard on porting all our docs over to the same API style API format as jQuery core and UI. This will provide a complete reference for every option, method and event in one centralized, searchable place. Since the docs are all XML-based, you’ll be able to remix them in any way you want for complete flexibility.

We’d like to take a moment to thank team member Anne-Gaelle Colom who has spent an incredible amount of time over the last year building these docs from scratch and we really appreciate her dedication.

The new API docs are in beta now and when we hit 1.3 final, we’re going to switch over to those as our authoritative place for API info. Our plan is to retire the current docs and have an all-new demos site to accompany the new API docs.

Support for jQuery 1.9 and 2.0

jQuery Mobile 1.3.0 is being actively tested to support versions of 1.9 and 2.0 of jQuery core and will be keeping in sync with their releases to let you take full advantage of the new hotness. The 1.3.0 Beta includes 1.8.3 because 1.9.0 just shipped today (congrats). When we hit the final release, 1.9.0 will be our default. We will offer support back to 1.7.0 of core for folks on older versions.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.3.0 Beta release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (see our contributing guidelines for a test template). If all goes well, we hope to release the final build in 3-4 weeks.

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.3.0-beta.1.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.3.0-beta.1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.3.0-beta.1.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.3.0-beta.1.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.3.0-beta.1.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.3.0-beta.1.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>

ZIP File: If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.3.0-beta.1.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

]]> http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/feed/ 61 http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/ http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/#comments Tue, 02 Oct 2012 18:25:36 +0000 Todd Parker http://jquerymobile.com/?p=3109 Continue reading →]]>

The jQuery Mobile team is excited to announce the final release of 1.2.0. This release brings a new popup widget, an autodivider and collapsible option for listviews, and over 100 enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try it now!

We’d like to thank the community, sponsors and most of all our amazing list of almost 200 contributors who have supported and guided the project. We encourage you to participate wherever you can, you input and help are always appreciated.

Demos & docs | Key changes | Change log | Download & CDN | Supported Platforms

KEY CHANGES

New Widget: Popups

The biggest feature of 1.2 is the new popup widget. The idea with popups is to create a flexible element that makes it easy to place any content or widget in an overlay that floats above the current page. This makes it easy to build a simple tooltip, menu, popup form, map overlay, or lightbox with this same widget.

Popups follow the markup pattern of dialogs and consist of a container with a data-role of popup and a link with a data-rel of popup that points to the ID of that container. When the link is clicked, the popup is shown. Clicking outside the popup, hitting the back button, or pressing the Escape key all close the popup.

Here is the basic markup you need: a link and popup container.

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup.<p>
</div>

We’ve worked hard to make the popups as flexible as possible to let you get creative. By default, popups are styled as a simple box with the same theme as the current page, rounded corners, and a drop shadow. Popups don’t have padding which makes it really easy to drop in a widget like a listview to create a menu.

Out of the box, there are options to control whether how it’s positioned (centered over the thing you tapped, the window, or any selector), add a semi-transparent overlay layer behind the popup, use an animated transition when the popup opens, adjust theming, and more. We’ve also added a few advanced demos showing how to build a lightbox by working with image scaling, use embedded iframes in popups for maps and videos, and even make a very custom looking side panelby tweaking styles and working with the API.

Check out the popup docs for more on the options, methods, and events APIs.

Popup history tracking: Optional

We heard feedback at alpha that some developers didn’t want to track popups in the history stack. Using the browser Back button to dismiss popups and menus is an important UI convention on many mobile platforms but there may be use cases like an iOS app where this is less of a concern.

Since we had to exclude WP7 from the history support to workaround a bug anyway, we decided to surface this mechanism in the popup API as the history option, a boolean that defaults to true but can be set via the data-history="false" attribute or when calling popup:

$( ".selector" ).popup({ history: false });

Popups must live within the page wrapper (for now)

After alpha went out, we also heard pretty clear feedback that folks want to re-use popups across pages by placing them outside the page container. At the moment this won’t work because many widgets (listviews, toolbars) are built with the assumption that they live inside a page container for theme inheritance and enhancement to work. Until these widgets are re-factored to work outside of pages at a future release, popups should only be added within a page.

Collapsible Lists

We’ve had lots of requests to make collapsible listviews that would reveal a nested listview when a row is tapped. Rather than create a new extension for listviews, we realized we could adapt of existing collapsible widget to do the trick (thanks to sjdecaires for the suggestion).

Now collapsibles have a data-inset option which still defaults to true to keep the current collapsible appearance. When this is set to false, the collapsible goes to the edges of the screen, just like a non-inset listview does. By then placing a listview inside these full width collapsible, we achieve the effect of a collapsible list.

To make what looks like a collapsible list that allows multiple sections to be open at once, stack up a series of individual collapsibles with a listviews inside. To force only one section to be expanded at once, use the collapsible set (accordion) to get this behavior.

We’re really excited to bring this new capability to the library by just adding a single option to the existing plugin set and hope to find similar opportunities to add powerful features with minimal code.

Custom collapsible icons

We forgot to mention in the alpha post that we added the ability to configure the icons for the expanded and collapsed states of a collapsibles and collapsible sets. Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes and choosing any of the standard icons for each.

Listview Autodividers

Speaking of listivews, we have a cool new feature in 1.2: autodividers. Simply add the data-autodividers attribute to any listview and the framework will automatically add alphabetical list dividers based on the contents of your list.

<ul data-role="listview" data-autodividers="true">


This is especially helpful when generating lists dynamically. Best of all, this feature is designed to work seamlessly with our listview filter extension so dividers will be added and removed to stay in sync with the current set of filtered items.

Read-only Lists: Flat Visual Style

We’ve tweaked the design of read-only listviews in 1.2 to make them look less clickable by removing the gradient from the list items and only using the flat background color. It’s a subtle change, but it does help to provide a clearer visual separation between clickable and read-only lists.

Prior to 1.2, read only lists were also given a bit less padding because we figured that these didn’t need to be as touch-friendly as normal, clickable listviews. However, we found that some folks were using listviews with a mixture of linked and non-linked list items and that shift in padding didn’t look right.

We now use the same padding for both read-only and linked list items.

Controlgroup Icon Buttons: Easier to Tap

When icon-only buttons were used in controlgroups, they were simply too small to be finger-friendly so in 1.2, we’ve improved the design to increase the padding around the icons to make them easier to tap.

If you still need to smaller style, you can add the data-mini="true" option to the controlgroup or individual buttons to reduce the size of the button groups to be closer to the way they were in 1.1, but they are still large enough to still be usable.

Buttons in Toolbars: Now Mini by Default

Prior to 1.2, link-based buttons were mini by default, but not buttons based on input and button elements. Now, we automatically make these mini sized for visual consistency. If you ever need to revert to larger buttons, that option is available via the data-mini attribute.

All Form Elements: Width Adjustments in Fieldcontainers

We recommend that most folks use the fieldcontainer markup pattern when building forms to take advantage of the responsive label styling. This stacks the label above the input at narrow widths and floats it to the left of the input at wider widths to take full use of tablet and desktop devices.

In 1.2, we’ve made some refinements to the design for this pattern to make sure we’re using as much of the horizontal space as possible for the form element. Labels have always been 20% + 2% margin and now the form element widths have been increased from 60% to 78% so they go as full width as possible.

We’ve carefully tested every form element in a wide variety of situations to ensure that the spacing and sizing of each is as consistent as we can for a polished experience.

Touch and vmouse events: Now available for standalone use

We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible. However, we heard that some developers just wanted to grab the virtual mouse events that normalize between touch and mouse inputs (vmouse) or the touch events like swipe or touchstart but don’t want to use the rest of the jQuery Mobile library.

In this latest release, we’ve refactored a bit to eliminate the dependency on mobile core for utilities like these. Now if you want to take advantage of just our vmouse events, simply check that box in the download builder and grab the file. Other utilities like orientationchange and throttledresize are also available without the core dependency in the builder.

This additional decoupling is only available if you choose 1.2.0 or latest in the version dropdown of the download builder tool.

Note that the file generated by the download builder is always jquery.mobile.custom.zip which contains the .js, .min.js, .css, .min.css.

Support for jQuery core 1.8 added: Impact on BB5 and iOS3

jQuery Mobile 1.2 now supports up to version jQuery core 1.8.2. However, there was an important change in jQuery core 1.8.x that removed a lot of old code for offset() in favor of the more modern getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() methods. The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these methods, which broke widgets like the loader, popup and slider.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ is in use and if getBoundingClientRect() isn’t supported, we don’t enhance the page and keep it as simple HTML. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). If you use version 1.7.x, these will be enhanced as before.

jQuery core 1.6.x: Support dropped

As a project, we generally support the two latest major versions of jQuery core. Now that 1.8 has been out for a while, we’re dropping support for 1.6.x in this release. If you use version 1.6.x, things should work fine now, but going forward, we will won’t actively test 1.6.x or fix issues that only occur with this version.

Supported Platforms: Always Expanding

Our test lab has grown to over 70 phone, e-readers and tablets over the past few years. Luckily, our dedication to web standards and feature detection has meant that most new devices “just work” when they arrive. As of 1.2, we’ve added a few notable A grade platforms into testing rotation: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox for Android, and Kindle Fire HD.

Change Log for 1.2

Button

Added padding for icon-only buttons in controlgroup (Issue: #1998)

Adjusted CSS selector for fullsize button in toolbar (Issue: #4619) — The search input clear button now gets the correct padding when placed in a header or footer.

Make button elements default to mini in header and footer (Issue: Override default margin if controlgroups or form elements have class ui-btn-left/right (Issue: #4713)

CSS

Adjusting comment to be simple apostrophe rather than special character  — Remove an unusual character in CSS comment that was causing compilation problems. Thanks @ecaron!

Outline style “auto” for browsers that don’t support box-shadow so it is the same as outline on regular links

Remove a typo in jquery.mobile.theme CSS (Issue: #4910) — Corrected a typo in button hover CSS. Mitch64!

Set webkit-text-size-adjust to 100% instead of “none” (Issue: #4218) — Fixes a desktop webkit browser bug that prevents text zoom.

CheckboxRadio

Filter for first label. Fixes label conflict issue (Issue: #3879) — Fixes the double label issue which was raised if checkboxes or radios had associated more than one label.

Checkboxradio

Remove explicit left and right margin 0 to allow margins when used in grid  — CSS improvement for checkboxes and radios to look more graceful when placed in grids.

Collapsible

Add support for same expanded/collapsed non default icon (Issue: #4801) — Collapsibles now can have the same non-default icon for collapsed/expanded state.

Added inset option for Collapsible / Collapsible sets. Adjusted CSS for inset collapsible (removed -8px margin) and added CSS for non-inset collapsibles. (Issue: #3976) — Collapsibles and Collapsible-Sets now have a new inset option to remove all margins and give them a non-inset listview look.

Added rule that prevents double borders in a serie of individual collapsibles  — To avoid double borders (top and bottom) in a serie of standalone collapsibles a CSS rule was added that can be easily overwritten if collapsibles with different swatches are used.

Custom collapsible icons  — Adds the ability to change the icon used for collapsible headers through data-* attributes and prototype options. Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks jakeboone02!

Made non-inset listviews exactly fit inside ui-collapsible-content.

Make sure the collapsibles inherit a theme if nothing is set  — Collapsibles now show the right hover/button-up/button-down styling.

CollapsibleSet

Make sure only one collapsible in a set is expanded at the same time.  — Improved collapsible set functionality.

Controlgroup

Float none for select and checkboxradio ui-btn because their container div already has float left

Keep the possibility to center the controls with vertical-align property (Issue: #4765)

Make icon-only buttons default to mini in toolbars  — Toolbar buttons without text (data-iconpos="notext") now get the mini style by default.

Prevent small bottom margin that some browsers add because of display inline-block  — Horizontal controlgroups now getting centered vertical alignment to prevent a small margin, that some browsers add to buttons.

Prevent the controls inside controlgroups from being wrapped multiple times (Issue: #4716)

Core

Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828) — Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

Introduce $.mobile.supportsTouch as a supported API and resuscitated $.support.touch though it is still unsupported

Moves fixed positioning blacklist to jquery.mobile.support.js  — Made the frameworks browser detection for fixed positioning support a central component.

Moving to jQuery 1.8 as the default version  — jQuery 1.8 (1.8.1) ist now the default version for jQuery Mobile 1.2.x

Reference widget factory version (Issue: #2838) — jQuery UI’s widget file includes its actual version now.

When the hash portion of the initial URL is exactly equal to the dialog hash key, we must trigger a hashchange (Issue: #5021)

Download Manager

CSS metadata were pointing at jquery.mobile.transitions.*  — Fix for the jQuery Mobile download manager.

Fixed CSS path had an extra dotdot  — Path fix for the jQuery Mobile download manager.

Form

Full width forms (Issue: #3301) — The width of fieldcontainers has been changed from 60% to 78% so the form will be full width now.

Framework, general

Added new jQM logo to docs homepage  — Learn more about the New jQuery Mobile Logo!

Grid

Grid CSS refactoring (Issue: #4835) — Grids with more than two columns and multiple rows now get the correct CSS. Thanks diamondq!

Listview

Add extra listview autodivider check (Issue: #4901) — If a listview was nested inside a normal list then the listviewcreate event for autodividers would also fire for the parent list causing an error as this list did not contain listview data. An extra check was added to ensure the parent list is actually a listview. Thanks marcins!

Added a “listviewbeforefilter” event (Issue: #4721) — Listview filter function improvement.

Added filter input as a data attribute of the event

Added missing webkit prefix for border-radius on Android 2.1 and iOS 3.2.

Always filter the full list of items (Issue: #4133) — Custom filter methods for listviews now always filter all list items.

Improved border styling of listview inside collapsible content  — Improved CSS for listviews and listview filter items inside collapsible content.

Increase the level of specificity of the margin 0 rule for listview buttons to avoid margins when used in grid (Issue: #4945) — CSS improvement for listviews to be more solid when placed in grids.

Listview autodividers: Fix for text links in list items  — Autodividers now work as expected if list items contain links.

Merge branch ‘townxelliot-autodividers’  — New Listview option Autodividers. Thanks townxelliot!

New styling for read-only lists (Issue: #4347) — Adding theming support and new styling for read only lists.

Navbar

Added clearfix for navbar (Issues: #5008 #5032) — CSS improvement to avoid styling issues when Navbars placed in listviews.

Capture and retrigger clicks on the parent list item element in navbars (Issue: #4663) — Fix for an issue on chrome/android where buttons in navbars are functionless after scroll.

Move active state regain code out of _create() and into its own prototype-level function and use ._on() to invoke it during “pagebeforeshow”

Persistent navbar broken on scroll, Chrome for Android. (Issue: #4663) — Persistent navbars now work as expected. Thanks mmavko!

Set margin to 0 to avoid the top/bottom margin of .ui-mini being applied

Navigation

Abstract backward movement in history (Issue: #4950) — “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Avoid string concat where possible  — Code refining.

Handle the case where the initial URL contains a non-path hash that points to a non-existing page

Handle URLs with parentheses properly (Issue: #4849) — The regular expression used to parse the jqmData psuedo selector restricts the
use of parentheses which are valid in urls. This breaks data-ns-url selection.
The fix is to avoid the pseudo selector.

Make sure the username and password in the url are encoded (Issue: #4787)

Overwrite stale dialog urlHistory entry instead of reusing it as-is (Issue: Replace location.href references with a centralized method so we can address a XSS/cross-site-scripting issue (Issue: #4787)

Strip authority to avoid exploits in parse regex (Issue: #4787) — As explained by @mala in Issue #4787, most browsers simply strip the authority from `location.href` anyway. We can simply mimick this more secure behavior for the browsers that don’t thereby avoiding the decoding XSS.

When showing a dialog, do not append dialogHashKey if the URL already contains it (Issue: #2656)

Page

Header buttons: Added “button” to the selector (Issue: #4638) — Manual added header buttons now placed in the same line as the title.

Phonegap

Added a note to the docs about using underscores within foldernames in PhoneGap for Android (Issue: #4991)

Popup

Add afteropen trigger to setTimeout with android fix  — The select menu’s (now that they depend on popups) require that the first item is focused after they are open. The focus of the popup itself was deferred until after the trigger of afteropen which the select menu uses to focus its first item. As a result the focus was stolen from the select menu by the popup to the popup container.

Add hashListeningEnabled to the intersection that establishes whether we will use history or not

Adding header/content/footer border support for popups (Issue: #5000) — Adds corner support for header/content/footer container inside popups having data-corners attribute set to true

Bind vclick handler to the document on Android  — To implement click-on-screen-to-dismiss-popup one must bind the “vclick” handler to the document rather than the screen, in order to prevent unpleasantness on Android 4.0. WP7 nevertheless requires the code to remain as is, because handling the screen vclick after it has bubbled to the document causes text and inputs underneath the screen to handle and then swallow the event.

Disable popup history managment in old IE by default (Issue: #4784) — Cause of a Windows Phone 7 (WP7) scroll position caching issue, the new popup history option is disbaled by default for old IE browsers.

Do not allow the event to bubble up to the document, after all  — Refactoring the popup close process to stop bubbling up to the document.

Do not fiddle with the focus when rapid-opening/closing during reposition (Issue: #4797) — Fix for a native keyboard issue preventing data-input in forms in popups when popup-reposition occurs.

Do not forget about the no-history-manipulation case when calling _open()  — Popups open method improvement when no-history feature is used.

Do not use history when there is no AJAX (Issue: #5006) — Fix for non working popups on BlackBerry 5.

Eliminate the need for a popup IE6/7-specific workaround class, as well as additional scripting  — Popup background fix for IE6/7.

Enable close button when history is disabled  — Make the popup close button work even if the new popup history option is disabled.

Exclude internal attributes from dom element (Issue: #4967) — Fixed markup issue when popup is opened.

First pass at disabling history with an option in popup  — Added a popup option for disabling URL history management. This new option sets whether to alter the URL when a popup is open to support the browsers back button. URL history management is enabled by default.

First pass at popup simplification  — Refactoring popup code for simplification.

Fixed the order of the tolerance parameters (Issue: #4856) — The values for the popup tolerance option to set the distance between the popup and the window, now were interpreted as the documention says: top, right, bottom, left.

Focus parent link on close when opened by a parent link  — Popup calling links now get focus back when popup closed.

Hide fixed toolbars on Android ICS native browser when popups are opened (Issues: #4816 #4844 #4874) — When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Make sure the popup is closed on destroy (including cleanup)  — Popup code refactoring

On WP7, you get “” for an empty background, not undefined, like in IE8  — Fix for a WP7 popup issue.

Perform the visual open only when the nav hook has been acquired (Issue: #4949) — Fixed an iOS popup / custom select positioning issue.

Prevent positioning context bug for close buttons within popups in Opera Mini

Properly handle popups in dialogs, make sure dialog closes on page changes  — Refactoring popup chaining from dialogs to keep proper page navigation and URL history.

Remove default fade animation from popup overlays. (Issue: #4915) — The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup display significantly faster so this change is now applied across the board. The overlay now pops into place without a transition.

Remove link focus, unwind stack before applying focus and tabindex  — To prevent popup transition issues on Android 4.0 devices, the order of applying focus and tabindex was changed when popups are opened.

Remove styles related to popup overlay fade  — Tidied up popup CSS after removing overlay-transitions.

Resolve the popup screen deferred immediately  — Popup refactoring.

Restrict the application of the exclusions to the recording of the new option value in the data-* attributes. Do still chain up to mobile.widget with every option.  — Popup widget improvement.

Reuse dialog hash if already present and tack on another if it is part of the initial hash (Issue: #4994) — Popup refactoring to support browser refresh when a popup is open.

The popup screen leaves a 1px gap at the bottom of the screen to avert Android 4.0 hangage  — Popups now get a 1 Pixel bottom gap due to an display issue on Android 4.0.

Unhook hash listeners from popup when aborting

Use $.inArray, because IE does not seem to have .indexOf() on arrays

Use just the hash as a selector in IE7/WP 7.0 (Issue: #4917) — Fixed an IE7/Windows Phone 7.0 popup open issue caused by the handling of hashes and absolute hrefs in that browsers.

Use new ._on() binding method to attach handlers such that they are removed upon _destroy()

Use ui-overlay-* for overlay theme  — Popups overlay now use the ui-overlay class

Use widget factory to trigger events

Using “position: fixed” blacklist to fix popup overlays in browsers that know what they are doing with “position: fixed” to avoid monstrous overlays on long pages in some cases.

Select

Add ui-btn-down- to initially focused menu item to make tab selection consistent

Event timing difference in iOS 6 was causing zoom to be disabled and immediately re-enabled prior to the zoom taking place (Issue: #5041) — Fix for iOS 6 which reintroduces a select input page-zoom issue.

Slider

Bind to sliders vmouseup for refresh (Issue: #4756) — Browsers like Chrome provide an up and down arrow for range/number inputs but they don’t fire the change event until the control is blurred. We now bind to the mouseup event and check if the value has been altered. If it has, we refresh now the slider position to reflect the value change.

Correct slider to use _on, and guard the unbinding test

Increase level of specificity to avoid conflicts when sliders used in a grid (Issue: #4944) — CSS improvement for sliders to be more solid when placed in grids.

Merge branch ‘memory-leaks’  — Slider widget functional and memory improvements

Move _preventDocumentDrag function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Move _sliderMouseUp function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Partly fixes an issue on Safari/Mac where the input width is decreased when the browser implements the spinner

Stop the call structure for slider updates earlier on disabled inputs (Issues: #3058 #4770) — Improved behavior for disabled sliders.

Support slidestart and slidestop events (Issue: #1589) — Sliders now support slidestart and slidestop events

Textinput

Move _keyup function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Unbind document handlers to prevent memory leaks on textinput

Toolbar

A negative indent of -99999em can cause native Android 4.x to freak out, since its so absurdly high. Switched to -9999px.

Added class ui-popup to tapToggleBlacklist  — The tap toggle feature for fixed toolbars now is disabled when popups are open.

Fix for fixed persistent toolbar padding issues (Issues: #4176 #4219) — Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks MauriceG!

Prevent `0` from being appended to the document when using a persistent footer with jQuery 1.8.x (Issue: #4887)

Widget Factory

Upgrade widget factory to 1.9 beta version (Issue: #4629)

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.2.0.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.2.0.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.2.0.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.2.0.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.2.0.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.2.0.min.css (6KB, ready to deploy)

 

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.2.0.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

 

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.2.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

* Note: If jQuery core 1.8+ is used with jQuery Mobile, iOS 3.x and BB5 are re-graded to C level support because core dropped support for methods these platforms need for full functionality.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

• Apple iOS 3.2*-6.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / 6.0), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1 / 6.0)
• Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
• Android 3.2 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
• Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
• Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
• Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
• Blackberry 7 – Tested on BlackBerry® Torch 9810
• Blackberry Playbook (1.0-2.0) – Tested on PlayBook
• Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 – Tested on HP TouchPad
• Firefox Mobile 15 – Tested on Android 2.3 and 4.1 devices
• Chrome for Android 18 – Tested on Android 4.0 and 4.1 devices
• Skyfire 4.1 - Tested on Android 2.3 device
• Opera Mobile 11.5-12: Tested on Android 2.3
• Meego 1.2 – Tested on Nokia 950 and N9
• Tizen (pre-release) – Tested on early hardware
• Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
• UC Browser – Tested on Android 2.3 device
• Kindle 3 and Fire - Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
• Chrome Desktop 11-21 - Tested on OS X 10.7 and Windows 7
• Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
• Firefox Desktop 4-15 – Tested on OS X 10.7 and Windows 7
• Internet Explorer 7-10 – Tested on Windows XP, Vista and 7
• Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

• Blackberry 5.0*: Tested on the Storm 2 9550, Bold 9770
• Opera Mini 7 - Tested on iOS 5.1 and Android 2.3
• Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
• All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

]]> http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/feed/ 24 http://jquerymobile.com/blog/2012/09/21/jquery-mobile-1-2-0-release-candidate-2/ http://jquerymobile.com/blog/2012/09/21/jquery-mobile-1-2-0-release-candidate-2/#comments Fri, 21 Sep 2012 16:47:51 +0000 Todd Parker http://jquerymobile.com/?p=3220 Continue reading →]]> #page article h3.widget-header { font-size:16px !important; padding-top:24px; }

The jQuery Mobile team is excited to announce the second release candidate for 1.2.0. We had a few bugs come in with RC1 that we wanted to fix up before going final. Notably, we’ve re-enabled the fix for selects and inputs zooming in unnecessarily in iOS6 and improved popup support in Opera Mini (though positioning is still less than ideal).

There are a ton of great new features in 1.2.0 so if you haven’t been following along, see the alpha, beta, and RC1 blog posts for full details of features and changes leading up to this RC. 

We’re hoping this will be the last RC before heading to the final release. If we don’t see a showstopper bug come in, this will be the same code we’ll release as 1.2.0 stable. Please help us test and report issues before we move to the final version. Try it now!

Demos & docs | Change log | Download & CDN

Change log (since 1.2.0 RC1)

CSS

Adjusting comment to be simple apostrophe rather than special character  – Remove an unusual character in CSS comment that was causing compilation problems. Thanks @ecaron!

Core

When the hash portion of the initial URL is exactly equal to the dialog hash key, we must trigger a hashchange (Issue: #5021)

Framework, general

Added new jQM logo to docs homepage – Learn more about the new jQuery Mobile Logo

Navbar

Added clearfix for navbar (Issues: #5008 #5032) – CSS improvement to avoid styling issues when Navbars placed in listviews.

Popup

Add hashListeningEnabled to the intersection that establishes whether we will use history or not 

Do not use history when there is no AJAX (Issue: #5006) – Fix for non working popups on BlackBerry 5.

Prevent positioning context bug for close buttons within popups in Opera Mini 

Reuse dialog hash if already present and tack on another if it is part of the initial hash (Issue: #4994) – Popup refactoring to support browser refresh when a popup is open.

Use $.inArray, because IE does not seem to have .indexOf() on arrays 

Select

Event timing difference in iOS 6 was causing zoom to be disabled and immediately re-enabled prior to the zoom taking place (Issue: #5041) – Fix for iOS 6 which reintroduces a select input page-zoom issue.

Toolbar

Added class ui-popup to tapToggleBlacklist – The tap toggle feature for fixed toolbars now is disabled when popups are open.

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.2.0-rc.2.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.2.0-rc.2.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.2.0-rc.2.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.2.0-rc.2.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.2.0-rc.2.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.2.0-rc.2.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.2.0-rc.2.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

]]> http://jquerymobile.com/blog/2012/09/21/jquery-mobile-1-2-0-release-candidate-2/feed/ 14 http://jquerymobile.com/blog/2012/09/19/new-jquery-mobile-logo/ http://jquerymobile.com/blog/2012/09/19/new-jquery-mobile-logo/#comments Wed, 19 Sep 2012 21:29:42 +0000 Todd Parker http://jquerymobile.com/?p=3183 Continue reading →]]> The jQuery Mobile team is very excited to announce our new project logo. Up until today, we’ve been using a mobile green of the jQuery logo but we’re thrilled to now have our own unique identity.

The new logo expresses the central idea of our project: a unified UI library that adapts to all devices. The abstract, converging screens not only look cool, they represent the wide range of devices we support, from phones to tablets and desktops. The bright center point of greatest overlap is where we come in: the library that makes it possible to support this diversity with a single codebase that adapts to all sizes, input methods and capabilities.

We’d like to thank Ira F. Cummings, Ethan Marcotte, and the whole Filament Group crew for spearheading this effort.

We’ll be rolling this new logo out across the site and docs very soon.

Here are vector versions in PDF format.

]]> http://jquerymobile.com/blog/2012/09/19/new-jquery-mobile-logo/feed/ 10 http://jquerymobile.com/blog/2012/09/14/jquery-mobile-release-candidate-1-released/ http://jquerymobile.com/blog/2012/09/14/jquery-mobile-release-candidate-1-released/#comments Fri, 14 Sep 2012 22:22:29 +0000 Todd Parker http://jquerymobile.com/?p=3195 Continue reading →]]> #page article h3.widget-header { font-size:16px !important; padding-top:24px; }

The jQuery Mobile team is excited to announce the first release candidate for 1.2.0. We only had a few serious bugs come in with our recent beta release now that those are patched up, we’re moving on the RC1. There are a ton of great new features in 1.2 so if you haven’t read up, see the 1.2 alpha blog post for full details, we’re just going to cover what’s new here. 

Please help us test and report issues before we move to the final version. Try it now!

Demos & docs | Change log | Download & CDN

Note: jQuery core 1.8.x with BB 5 and iOS 3 = C grade experience

In jQuery core 1.8.0, the team removed a lot of old offset code in favor of getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() which are very widely supported. John Resig even wrote a blog post about the wonders of getBoundingClientRect() and we think this was a smart move because it cut a lot of code weight.

The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these more modern methods. When we tested jQuery Mobile on these platforms with 1.8.x, there were errors that broke the page because we use getBoundingClientRect() for the loader, popup and slider.

We’ve been coordinating with the core team to find a fix and in the forthcoming jQuery core 1.8.2 release, getBoundingClientRect() will return 0,0 if not supported to at least avoid errors. We’ve been looking to find ways to work around this method in our widgets but we’re concerned about adding a lot of code bloat to support these older browsers.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ and lack of suport for getBoundingClientRect() and don’t enhance the page in these cases. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). We’re assessing our policy on what grade we should have for browsers that jQuery core doesn’t support anymore so stay tuned on that front.

Change log (since 1.2 beta)

Checkboxradio

Remove explicit left and right margin 0 to allow margins when used in grid 
– CSS improvement for checkboxes and radios to look more graceful when placed in grids.

Core

Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828)
– Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

Moves fixed positioning blacklist to jquery.mobile.support.js 
– Made the frameworks browser detection for fixed positioning support a central component.

Listview

Added missing webkit prefix for border-radius on Android 2.1 and iOS 3.2. 

Increase the level of specificity of the margin 0 rule for listview buttons to avoid margins when used in grid (Issue: #4945)
– CSS improvement for listviews to be more solid when placed in grids.

Navigation

Abstract backward movement in history (Issue: #4950)
– “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Phonegap

Added a note to the docs about using underscores within foldernames in PhoneGap for Android (Issue: #4991)

Popup

Adding header/content/footer border support for popups (Issue: #5000)
– Adds corner support for header/content/footer container inside popups having data-corners attribute set to true

Do not forget about the no-history-manipulation case when calling _open() 
– Popups open method improvement when no-history feature is used.

Exclude internal attributes from dom element (Issue: #4967)
– Fixed markup issue when popup is opened.

Perform the visual open only when the nav hook has been acquired (Issue: #4949)
– Fixed an iOS popup / custom select positioning issue.

Restrict the application of the exclusions to the recording of the new option value in the data-* attributes. Do still chain up to mobile.widget with every option. 
– Popup widget improvement.

Using “position: fixed” blacklist to fix popup overlays in browsers that know what they are doing with “position: fixed” to avoid monstrous overlays on long pages in some cases. 

Slider

Increase level of specificity to avoid conflicts when sliders used in a grid (Issue: #4944)
– CSS improvement for sliders to be more solid when placed in grids.

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.2.0-rc.1.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.2.0-rc.1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.2.0-rc.1.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.2.0-rc.1.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.2.0-rc.1.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.2.0-rc.1.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.js"></script>

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.2.0-rc.1.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

]]> http://jquerymobile.com/blog/2012/09/14/jquery-mobile-release-candidate-1-released/feed/ 4