Sliding menu Panels

[Michael Pierce]

Is there a way to create a sliding panel that slides open onto the same page with a button click?

[Igor]

Hello.

Please add more description what you want to do.

[Michael Pierce]

basically I'm trying to a have a menu slide out from the right side of a screen when a button is clicked. In jQuery mobile it is called a panel.

[maxkatz]

You can definitely add such feature, in fact, you can add any feature that's supported by the browser. Right now you would need to code it. We will be adding a component and you will be able to implement this via drag and drop.

[Chris Lieber]

This would be a nice addition as a drag and drop component. I am also interested in using them. Here's the link to jquery mobile's latest version of them:
http://view.jquerymobile.com/1.3.1/di...

[Michael Johnson]

I don't think you can code this using the real jQuery Mobile widget given the current capabilities of Appery. Per the documentation at http://api.jquerymobile.com/panel/ : "A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page". I don't think there is any way in Appery to add an element outside the content, header, and footer area except to export your app and manually edit the code. To do this inside Appery, you would need to simulate the jQuery panel by coding up your own from scratch.

EDIT: On second thought, you could do this inside the Appery app builder by using jQuery to insert the jQuery Mobile Panel markup into the page on load. I am trying this now and will share my results.

[maxkatz]

Appery.io is an app builder.. think of it as IDE in the cloud. It does provide many visual features, but you can do pretty much anything jQuery Mobile 1.3 supports by running JavaScript.

We are trying to cover as many features as possible via visual tools and soon will be adding the option to edit the source code as well.

[Michael Johnson]

What I'm doing right now is something like this and it works pretty well:
code
// i put this into a custom javascript file
// since my panel is shown on all pages,
// i bind at the document level
$(document).on( 'pageinit',function(event){

// append a panel to the page after
// the header, content, and footer
$('&#46;ui-page')&#46;append('<div data-role="panel" id="navigation-panel"><&#47;div>');

&#47;&#47; find anything with class &#46;navigation-menu
&#47;&#47; in the page and move it inside the new panel
$('&#46;navigation-menu:first')&#46;appendTo("#navigation-panel")&#46;show();

&#47;&#47; initialize the panel to avoid a jquery mobile error
$('#navigation-panel')&#46;panel();

&#47;&#47; while i'm at it, i dynamically add a button
&#47;&#47; to my header that toggles the panel
var imageUrl = Appery&#46;getImagePath('nav-icon&#46;png');
$('div[name=mobileheader]')&#46;append('<a href="#navigation-panel" class="navigation-button"><img src="'+imageUrl+'"><&#47;a>');
});
/code
There are probably some improvements that could be made to this... just a first pass.

EDIT: This doesn't work for anything except the start page, because I am adding my panel to the first page, which ends up being the hidden start page. Also, a check to make sure the menu does not already exist wouldn't be a bad idea.

[Michael Johnson]

Here's a better version that works for any page -- you can avoid having a navigation panel in a page by just not adding an element with class .navigation-menu. Forgot to mention this would require an image with name nav-icon.png (I'm using one of those little 3-bar menu buttons):

precode
$(document)&#46;on('pageinit', function(event){
var $page = $(event&#46;target);
var $nav = $('&#46;navigation-menu:first', $page);
if ($nav&#46;length) {
var navMarkup = '<div data-role="panel" id="navigation-panel"><&#47;div>';
var $navPanel = $(navMarkup)&#46;appendTo($page);
$nav&#46;appendTo($navPanel)&#46;show();

Code: Select all

 // initialize to avoid jQM error 
 $navPanel.panel(); 

 // add a header button to toggle nav panel display 
 var imageUrl = Appery.getImagePath('nav-icon.png'); 
 $('div[name=mobileheader]')&#46;append('<a href="#navigation-panel" class="navigation-button"><img src="'+imageUrl+'"><&#47;a>'); 

}
});
/code/pre

Next stop, responsive styling so it is displayed by default on a wide screen

[maxkatz]

Planned.