How to create a close button that closes a specific jsPanel

[Vincent Teyssier]

Hi,

I try to add a button to my footer which will close the jsPanel the same way as the header x button.
For that I implement in the callback of my panel instanciation the following :

var this_panel = $.jsPanel({......

callback: function(){
$('.btn-danger', this_panel).on('click', function (e) {
this_panel.close();
});
.....

But when I open several jsPanel, this closes all the panels, not only the one where the button is clicked.

[Stefan Sträßer]

Hi there,
with footer, do you mean a footer toolbar in your jsPanel?
If so take a lookat http://jspanel.de/api/option/removeheader
There you find an example with a footer toolbar having a button to close the panel.
Or here is a simple example code

var arr = [
    {
        item: '<button type="button"></button>',
        event: 'click',
        btntext: 'Close',
        callback: function( event ){ event.data.close() }
    }
];

$.jsPanel({
    removeHeader:  true,
    toolbarFooter: arr,
    position:      'center'
});

[Vincent Teyssier]

Well, kind of, but I will have several buttons on the footer so I try to bind the .close() action to one button by selecting it , and that it closes the panel in which it is contained.

For ex in your code, the footer is limited to one button... I can still do xxx + arr + yyy... but I am not familiar with the way you coded arr. And don't understand where data comes from.

[Stefan Sträßer]

Did you take a look at the api for the footer toolbar?
http://jspanel.de/api/option/toolbarfooter
The example there has 3 items in the footer toolbar and should explain everything you need.
Quick explanation: As you can see in the example code above the toolbar is described by an Array. And the array has an object for each toolbar item you want to add. So you can have as much items in your toolbar as you want. Example code for 2 items:

var arr = [
    { // this item is the close button
        item: '<button type="button"></button>',
        event: 'click',
        btntext: 'Close',
        callback: function( event ){ event.data.close() }
    },
    { // this item is the second button and shows the id of the panel
        item: '<button type="button"></button>',
        event: 'click',
        btntext: 'Show id',
        callback: function( event ){ event.data.content.append(event.data.attr('id')) }
    }
];

$.jsPanel({
    removeHeader:  true,
    toolbarFooter: arr,
    position:      'center'
});

The callback function for each item in the toolbar receives the event object as argument. And event.data is the jsPanel where the button is located in.

[Vincent Teyssier]

ok thanks, will try this out!