Posts tagged with “jQuery Mobile”

jQuery Mobile Filterable Collapsible Listview with Smart Expansion

Wednesday, 12 February, 2014

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.
Read the rest of this entry »

jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

Friday, 1 February, 2013

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>

Read the rest of this entry »

HTML5 and jQuery Mobile Shortcut and Tip Sheet

Saturday, 19 January, 2013

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.
Read the rest of this entry »