I have to admit that I just figured out the proper way to use
pagecontainerbeforechange; previously known as
pagebeforechange. Before I explain how to utilize this event, let me tell why it is important and handy.
This is a follow-up post on the main one where I will explain some special events that fire when loading external pages via Ajax. Those events are also part of “Page Container” widget, however, they are emitted when an external page (URL) is loaded either by anchor
href="link.html" statically, loading a page without navigating to it
$.mobile.pageContainer.pagecontainer("load", "URL") or when moving to an external page programmatically
The jQuery Mobile (jQM) library includes a great popup widget, which can be used for tooltips, context menus, modal forms, lightboxes, etc. Unfortunately, as of version 1.4, the jQM popup still does not support chaining (having one popup on top of another). The API Documentation makes this statement:
The framework does not currently support chaining of popups so it’s not possible to embed a link from one popup to another popup. All links with a
data-rel="popup"inside a popup will not do anything at all.
Imagine you have a use case where the user clicks a button to launch a popup form. On that form the user must select at least one checkbox. If the user clicks OK and no checkboxes are selected, the applications should launch a new popup warning the user that no checkboxes are selected. The user clicks OK on this second popup, which returns focus to the first popup where the user can either select a checkbox or click cancel to dismiss the popup.
data-position=”fixed” on the footer stops the footer from appearing in the middle of the page, but prevents it from being “pushed” down with longer content:
The trick to make this work is to use the same calculation from the original article to get the available space of the content, but instead of setting the height of the content DIV, we set the CSS min-height attribute. Continue reading
The listview widget in the jQuery Mobile (jQM) library allows for divider listitems which can be inserted manually or for sorted lists even be created automatically by the library. The dividers organize larger sets of listitems into smaller groups making it easier for the user to view the desired information. In this article I will implement a small trick that uses clicks/taps on the divider items to collapse expand the listitems in the divider group. This works particularly well for autodivider lists saving you the need to manually create collapsible widgets with separate contained lists.
For the example I will use a longish list of names with autodividers enabled. The markup for the list looks like this: Continue reading