jQuery Mobile Facebook Panel

jQuery Mobile Facebook Panel

It just so happens that jQuery Mobile comes out with 2 killer features, responsive tables and facebook-style panels, just when I can use them on a project. Responsive tables in jQuery Mobile allowed me to rip out custom code to achieve a similar and much better solution, and now the new panel in jQuery Mobile provides a fantastic solution for displaying configuration screens, shopping carts, and other data that needs to be available, but not necessarily in the face of the visitor! You can read more about responsive tables in jQuery Mobile, but I am now loving the new Facebook-like panel, too!

jQuery Mobile Panel

All mobile web developers know screen real-estate is precious, but visitors want quick access to more and more data. The new panel in jQuery Mobile provides a nice way to tuck away information, but still make it available to the user by the swipe of a finger or the touch of a button. I am working on a jQuery Mobile project where the user has the ability to use various configuration controls to change/manipulate the data. The important part is the data and it needs to be in full view, but the configuration controls need to be one swipe away so the visitor can interact with that data. The new panel in jQuery Mobile is a nice fit and the requested solution, albeit there are other possible solutions to the problem.

You can't get the full appreciation of the panel until you play with it on the jQuery Mobile website or use it yourself, but below is a quick picture for illustration purposes. The confguration panel on the left is normally hidden and via a touch or swipe is opened on demand.

jQuery Mobile Facebook Panel

The open-and-close panel animation is one of either 3 settings at the moment:

  • Overlay - Panel slides out and partially covers underling main area.
  • Reveal - Main area slides to reveal the panel.
  • Push - Both panel and main area slide together.

Once the panel is open the user is able to play with all the wonderful jQuery Mobile form widgets to manipulate the data and then either close the widget with a swipe or touch of a button. The jQuery Mobile developers have made this all painless and intuitive!

It is important to note that you can't just place the panel anywhere in the markup of the page. Per the documentation:

"A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version."

Once you get the panel placed properly on the page the most important attributes on the panel  are:

  • id="configpanel" - You need an id.
  • data-role="panel" - Identify it as a panel
  • data-position="left" - It's on the left or the right.
  • data-display="reveal" - Specify the animation.

In the end it is in a <div> tag such as:

<div id="configpanel" data-role="panel"
          data-position="left" data-display="reveal">
     <!-- panel contents -->
</div>

Conclusion

Like I mentioned, you can't appreciate this from a blog post, but I wanted to let other jQuery Mobile developers know it is available. Head to the jQuery Mobile website to read the docs and play with the demos. The panel and responsive tables are two really sweet features!