jQuery Mobile “Page” Events – Extra

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 $.mobile.pageContainer.pagecontainer("change", "URL").

Continue reading

Advertisements

Reside-Menu for jQuery Mobile – Part 2

In my previous article regarding “Reside-Menu”, I have explained how to create it but I haven’t explained how to properly use it in navigating between pages. The trick is simple and can be achieved in many ways.

Continue reading

Chained Popups With SimpleDialog2

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.

Because the built-in popup widget does not support this, we can use a third party plugin. Fortunately, J. T. Sage has developed the SimpleDialog2 popup jQuery Mobile plugin, which is highly flexible and customizable. To include this plugin in your page, download the files and then add the SimpleDialog2 CSS file after the jQM CSS file(s), and add the SimpleDialog2 JavaScript file after the jQM JavaScript file. With the plugin in place, let’s build an example for the use case described earlier. Continue reading

Content “div” Height – Fill Page Height–Part 2

Omar has written a great article already on using JavaScript to size the jQM content DIV to fill the given device’s height; however there is one use case this does not cover. A user might want the footer to be visible and fixed  at the bottom of the page anytime the content of the page is shorter than the vertical space available, but once the content is long enough, the user might then want the footer to be “pushed” down so it appears below the content when the page is scrolled.

The part 1 article makes it so that the footer is always visible at the bottom of the page and the content div is scrolled. If instead we use a plain footer with no JavaScript and without the data-position fixed, the footer appears below the content, but if the content is less than the vertical space available, the footer appears in the middle of the page:

floatingFooter

Using 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:

fixedFooter
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

Make Listview Dividers Collapsible

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

Filterable Opens Matching Collapsibles

The jQuery Mobile  (jQM) library includes a filterable widget which can be applied to any container element by setting data-filer=”true”.  The user can then start typing in the search input box and any child elements with matching text are shown while the rest are hidden from view. The widget also provides a callback for after the filtering is complete, and in this article we shall exploit this callback to make matching collapsibles expand instead of hiding non-matching elements.

As of jQM version 1.4, we can provide the search box markup and associate its ID with the filterable widget. Because the widget will be expanding and collapsing a list of collapsibles, I have decided to provide buttons for ‘expand all’ and ‘collapse all’ as a convenience to the user. The markup for the buttons and search box looks like this: Continue reading

Fun With the Slider Widget

The jQuery Mobile  (jQM) library includes a basic slider widget, which is used to enter numeric values along a continuum. You define minimum and maximum values for the number and jQM creates a track with a handle you can drag back and forth via mouse or touch. This post presents some examples of extending the basic slider to make it more colorful.

For those of you who can’t wait and would like to see the end results first:

Example End Results

Example 1 –  Dynamic Highlight Color

Let’s take a basic slider with data-highlight set to true; but instead of just showing the default theme highlight color, let’s change the highlight color based on the current value of the slider.  The HTML markup is just the standard jQM slider markup wrapped in a DIV container : Continue reading