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> |
<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 →