Forum | Appery.io

I followed the sliding panel tutorial, and it works fantastic!

I have two sliding panel questions:

1) How do I put two different sliding panels on the same Page?

2) How can I update Label text information on the sliding panel? I had created the Label no problem; however, I want it to read the text from a localStorage variable.

Thanks!

Actually, disregard #1. Just got the multiple panels to work!

Hi Doug,

Let's do the following example.

Custom JavaScript code:prevar Panel = function(id) {
var that = {},
_panel = $(id);

var page = panel.parents("[data-role=page]");
page.append(panel);

_panel.on("panelbeforeopen", function( event, ui ) {
$(".view_alert").die().live("click", function() {
alert("view alert")
});

 $(".close_panel").die().live("click", function() { 
     that.close(); 
 });     

});
that.open = function() {
_panel.panel("open");
}
that.close = function() {
_panel.panel("close");
}

return that;
};/pre
Component HTML code:precode
<div data-role="panel" data-position="right" id="mypanel" data-display="overlay" data-theme="a">
<a data-role="button" class="view_alert">View Alert<&#47;a>
<a data-role="button" class="close_panel">Close<&#47;a>
<&#47;div>/code/preFor every Panel you should set its own mypanel (we'll use mypanel and mypanel2).

On Page Load run the following code:prepanel = new Panel("#mypanel");
panel2 = new Panel("#mypanel2");/pre
Then call the Panel: on button click add panel.open(), or panel2.open(), accordingly.

That's awesome, thank you!

How about the labels from localStorage on the sliding panel?

Doug,

Add a Label to SlidePanel: precode<label id="mylabel">sample text<label>/code/pre
Then paste your value into it:
pre$("#mylabel")&#46;text(localStorage&#46;getItem("myValue"));/pre
where myValue is your variable name

Perfect, thank you!

Hi,

Where is the "sliding panel tutorial" that you spoke about in your original post please?

thanks

Hello! Please take a look here http://docs.appery.io/documentation/u... (Panel section)

Hi,

That's where I looked, and I have attached the panel to my UI (and added a button and text field) but i do not see it in the web preview nor on my phone.

thanks

You need to open Panel on some event (for example button click).