Over a million developers have joined DZone.

How to Build a Mobile Panel with jQuery Mobile

DZone's Guide to

How to Build a Mobile Panel with jQuery Mobile

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

A recent post by Thoriq Firdaus at hongkiat.com provides a complete tutorial on how to build a mobile panel using jQuery Mobile. Specifically, Firdaus models his mobile panel on the Facebook mobile app for iOS - particularly the left and right icons in the fixed menu that allow you to open up sidebars for more menu options - which is an ideal design for devices with limited screen real estate.

The tutorial covers all the requirements for implementing the panels, including HTML markup, CSS, and jQuery links, and no extra JavaScript is required, because everything needed is handled by the framework.

While it is a relatively straight-forward tutorial, it offers a simple way to get your app easily navigable and modern looking without having to put a lot of work in. It may be a common design, but in terms of user experience, it's an effortlessly usable design. If you're interested in a quick, clean, and space-efficient panel-based design for your app, check out the full post.


Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}