Sliding menu Panels

[maxkatz]

Thanks for posting this. I'm going to add link in our docs to this post.

[Rommel Paras]

I tried testing your code on a test page but I couldn't get it to work:

http://appery.io/app/view/2e8f03ae-1f...

Any ideas why?

[Igor]

Do you change the names of the components?
How do you invoke this code?

[Rommel Paras]

I just re-wrote the code to something simpler:
http://appery.io/app/view/2e8f03ae-1f...

[Alena Prykhodko]

Is it working as expected? Can you please share the code you use?

[Michael Johnson]

Several things can cause this to not work:

• Make sure pageinit is being called using console.log(""), I am not sure if pageinit is called for each page if you are using the jQuery single-page template option.

• You need a list in the page with class .navigation-menu, the list is moved into the slide-out panel. Make sure if($nav.length) is true.

• nav-icon.png is not a standard icon image, it is something I added to my project.

• Your page needs to display a header, otherwise $('div[name=mobileheader]') will be empty.

  Sounds like you found your own way though.

[Kateryna Grynko]

Hi Michael,[quote:]
Make sure pageinit is being called using console.log(""), I am not sure if pageinit is called for each page if you are using the jQuery single-page template option.
[/quote]Start screen Load event is run only once, when you run the app. Other pages load after every navigation. Page Show is called for any page after every navigation. It doesn't matter that pages are together.

Another answers can be found here: https://getsatisfaction.com/apperyio/...

[Kapow36]

Michael, here is some modified code from what you have above. I modified it so that you can use components added to the builder via drag and drop. I've also added some more features. I figured that panels seem to be a pretty heavy topic on this forum and here is another full example of one in action.

code
$(document).on('pageinit', function(event){//on page load

//get local var set on page load to which side the panel is on, if you don't want to have options, just set this to 'right' or 'left' If you do want this option, be sure to set the local storage variable on each page to what you want
var pageLocation = localStorage.getItem("pageNavLocation");

var $page = $(event.target);//get page object

//here you can add any components to the panel that you would like. I created one grid with everything inside, but you can add as many components as you would like, just make sure the if statement checks to make sure they exist and you append the objects to the panel down below
var $dashGrid = Appery('DashGrid');

//if there is a list (or other objects you add) (make sure you include all your objects)
if ($dashGrid.length) {

Code: Select all

   console.log("dashboard created"); 
   var newID = "navigation-panel"+$page.attr('id');//get page id and set it so that each panel is unique 
   var navMarkup = '<div data-role="panel" id= '+newID+' data-position='+pageLocation+' data-position-fixed="true" data-theme = "b" data-content-theme = "b"<&#47;div>';&#47;&#47;create panel div 
   var $navPanel = $(navMarkup)&#46;appendTo($page);&#47;&#47;append panel to the page 

   $dashGrid&#46;appendTo($navPanel);&#47;&#47;append components to the panel here 

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

 &#47;&#47;add swipe event for each side of page to open the panel 
   if (pageLocation == "right") 
   { 
       $page&#46;swipeleft(function() { 
           console&#46;log("swipe left"); 
   $("#"+newID)&#46;panel("open");&#47;&#47;open panel 
       }); 
   } 
   else 
   { 
    $page&#46;swiperight(function() { 
         console&#46;log("swipe right"); 
   $("#"+newID)&#46;panel("open");&#47;&#47;open panel 
     }); 
   } 

 &#47;&#47; add a header button to toggle nav panel display, this could be any button placed on a page, just change the name 
   Appery('DashboardButton')&#46;off()&#46;on({ 
       click: function(){ 
           $("#"+newID)&#46;panel("toggle"); 
       } 
   }); 

   &#47;&#47;add button events to items in panel if you want here 

}
});

/code

The one thing I did notice is that when I build an apk and run it, the header bar for pages does not slide over like the rest of the page. This makes the header cover part of the panel. Any ideas as to why this happens?

[Kateryna Grynko]

Hello!

Try running your app not as installed APK but from mobile browser. On Android 4.х you can use remote page debugging: https://developers.google.com/chrome-...

[Kapow36]

Thanks Katya, I've found the issue. It is because I did not have the android target sdk version set to 4.2.x