Michael Pierce
Posts: 0
Joined: Mon Apr 22, 2013 12:36 am

Sliding menu Panels

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

Igor
Posts: 0
Joined: Tue Apr 02, 2013 12:05 pm

Sliding menu Panels

Hello.

Please add more description what you want to do.

Michael Pierce
Posts: 0
Joined: Mon Apr 22, 2013 12:36 am

Sliding menu Panels

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
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Sliding menu Panels

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
Posts: 0
Joined: Mon Apr 29, 2013 1:14 am

Sliding menu Panels

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
Posts: 0
Joined: Thu Mar 28, 2013 6:30 pm

Sliding menu Panels

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
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Sliding menu Panels

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
Posts: 0
Joined: Thu Mar 28, 2013 6:30 pm

Sliding menu Panels

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
Posts: 0
Joined: Thu Mar 28, 2013 6:30 pm

Sliding menu Panels

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

 &#47;&#47; initialize to avoid jQM error 
 $navPanel&#46;panel(); 

 &#47;&#47; add a header button to toggle nav panel display 
 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/pre

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

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Sliding menu Panels

Planned.

Return to “Issues”