Tag Archives: jQuery Mobile

jQuery Mobile Filterable Collapsible Listview with Smart Expansion

Wow, that’s a mouthful. Basically, I wanted to make use of the data-filter option to search a listview, but instead of a listview, I wanted it to be a collection of collapsible elements. Do accomplish this I needed some custom CSS to make it look right. Here is the example code with the ID iamalist. The page’s content section ID is iama, which is used in the CSS.
Continue reading

jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>

Continue reading

HTML5 and jQuery Mobile Shortcut and Tip Sheet

jQuery MobileI’ve been exploring jQuery Mobile lately and consequently, HTML5 and mobile HTML design. What I’ve come to realize is that the framework is incredibly powerful and looks fantastic! I first looked at it almost 2 years ago and was overwhelmed, so either it has gotten that much better, or I have. Either way, I’m incredibly satisfied.
Continue reading