-
Notifications
You must be signed in to change notification settings - Fork 2.4k
1.2 blog post
Collecting items for the 1.2 blog post
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, popup form, map overlay, or lightbox with this same widget.
Popups 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. There are options to control whether how it's positioned, add a semi-transparent overlay layer behind the popup, add an animated transition to the popup and more.
We've had lots of requests to make collapsible listviews that would reveal a list 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. Now collapsibles have a data-inset option which defaults to true to keep the current collapsible appearance. When this is set to false, the listview goes to the edges of the screen, just like a non-inset listview. 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 add this capability by just adding a single option to the existing plugin set and hope to enrich the library by fining similar opportunities.
Speaking of listivews, we have a cool new feature in 1.2: autodividers. Simple add the data-autodivider attribute to your listview and the framework will automatically add the list dividers based on the contents of your list which is a helpful when generating lists dynamically. Best of all, this 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.
We've tweaked the design of read-only lists to make them look less clickable by removing the gradient from the list items and only using the flat color. This provides a clearer visual separation between clickable and read-only lists.
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 use the mini option to reduce the size of the button groups to be closer to the way they were in 1.1, but they are still more usable.
Prior to 1.2, link-based buttons were mini by default, but not inputs and button elements. Now, we automatically make these mini for visual consistency, but if you ever need to revert to larger buttons, that option is available via the data-mini attribute.
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 right at wider widths. In 1.2, we've made additional 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 full width. https://github.com/jquery/jquery-mobile/issues/3301
Change Log http://test.jqmobile.de/commit-112-120.html