The filterable widget provided by jQuery Mobile (jQM) allows the user to filter child elements by typing search text into a text box. The built-in behavior is to see if the search text is contained in any of the children elements’ text or a special data attribute called data-filtertext. But what if you want the filter to only show elements that start with the typed in search text?
To accomplish this, we can override the default filtering by assigning the filterCalback property to a function. This function is then called for each child element with an index parameter and a second parameter for the search text the user typed. Within this function we can perform our own filter matching and return true if the child element should be filtered (hidden). So, lets build our Starts With Filter. Continue reading
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
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.
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