Let's assume you have a jsPanel with an iframe and you want to add a reload button to the controls section.

Example #1:

1. Define a function that creates and returns a new template for the jsPanel including the extra element in the controls section. Here I chose the Zurb Foundation refresh icon wrapped in a div element. The div element has two css classes:
   • jsPanel-btn-refresh to identify the control for use in the control handler
   • jsPanel-btn-hide takes care of hiding the element when the jsPanel is minimized
2. Create the jsPanel with the previously defined function passed as value to option.template and don't forget to define a callback function that takes care of the reload

function templateOne() {
    var template = $(jsPanel.template);
    var headerR = $('.jsPanel-hdr-r', template);
    headerR.append('<div class="jsPanel-btn-reload jsPanel-btn-hide"><span class="jsglyph jsglyph-reload"></span></div>');
    return template;
}

$.jsPanel({
    template: templateOne(),
    size:     { width: 900, height: 500 },
    position: 'center',
    theme:    'info',
    iframe:   { src: 'http://jspanel.de/' },
    callback: function (panel) {
        $('.jsPanel-btn-reload', panel).click(function () {
            panel.reloadContent();
        });
    }
});

Execute example above

Example #2 (without using option.template):

$.jsPanel({
    size:     { width: 900, height: 500 },
    position: 'center',
    theme:    'info',
    iframe:   { src: 'http://jspanel.de/' },
    callback: function (panel) {
        $('.jsPanel-hdr-r', panel).append('<div class="jsPanel-btn-reload jsPanel-btn-hide"><span class="jsglyph jsglyph-reload"></span></div>');
        $('.jsPanel-btn-reload', panel).click(function () {
            panel.reloadContent();
        });
    }
});

Execute example above

Assume you don't want the close control of a jsPanel to remove the panel from the DOM. Instead you just want to hide the panel until you need it again.

Example:

var myPanel = $.jsPanel({
    position: "center",
    theme:    "medium",
    // more config as needed ...
    callback: function(panel) {
        // select the close control
        $(".jsPanel-btn-close", panel)
            // remove default handler
            .off()
            // bind new handler
            .click( function(){panel.hide()} );
    }
});

// to show the panel again
myPanel.show();

// if you - at one point - want the original close handler back
$(".jsPanel-btn-close", myPanel)
    .off()
    .click(function(){
        jsPanel.close(myPanel);
    });

Create jsPanel and hit close control to hide it Show jsPanel again Restore original close handler

• Option 1: To get a lower left resize icon for all jsPanels the necessary CSS is already in the file jquery.jspanel.css. You just need to uncomment the rules.
• Option 2: To get a lower left resize icon for a specific panel only add the callback frome the following example to your panel config

$.jsPanel( {
    position: "center",
    theme:    "light",
    callback: function(panel) {
        $(".ui-resizable-handle.ui-resizable-sw", panel).css({
            background: "none repeat scroll 0 0 rgba(0, 0, 0, 0)",
            color:      "#000",
            fontFamily: "jsglyphregular",
            fontSize:   "16px",
            lineHeight: "16px",
            textIndent: "7px",
            bottom:     "2px",
            width:      "16px",
            height:     "16px"
        }).append("");
    }
});

Execute example above

Please refer to the following posts to learn why this happens and how to fix it:

• stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call
• blog.codebusters.pl/en/click-doesn-t-work-after-ajax-load-jquery

//step 1 - create a jsPanel and assign it to a variable
var myPanel = $.jsPanel({
    position: "center",
    theme: "medium"
});

//step 2 - remove the standard handler from the close button
$(".jsPanel-btn-close", myPanel).off();

//step 3
//first prepare a footer toolbar for the modal dialog(jsPanel)
//of course you could include the buttons in the panel content
var arr = [
    {
        item: '<button href="#"></button>',
        event: 'click',
        btnclass: 'button tiny radius success',
        btntext: ' Yes',
        callback: function (event) {
            event.data.close();
            jsPanel.close(myPanel);
        }
    },
    {
        item: '<button href="#"></button>',
        event: 'click',
        btnclass: 'button tiny radius alert',
        btntext: ' No',
        callback: function (event) {
            event.data.close();
        }
    }
];
//then assign new handler to close button of initial jsPanel
//that opens a new modal jsPanel to ask for user action (close or no close)
$(".jsPanel-btn-close", myPanel).click(function(){
    var check = $.jsPanel({
        paneltype : {
            type: 'modal',
            mode: 'extended'
        },
        position:      "center",
        size:          {width: 300, height: "auto"},
        removeHeader:  true,
        draggable:     "disabled",
        resizable:     "disabled",
        toolbarFooter: arr,
        content:       "<p style='text-align:center;padding:20px;'>Do you really want to close the panel?</p>",
        callback: function(panel) {
            $("button", panel.footer).wrapAll("<div class='button-group' data-grouptype='OR' />");
        }
    });
});

//step 4 (only if needed) - restore original close handler
$(".jsPanel-btn-close", myPanel).click(function(){
    jsPanel.close(myPanel);
});

Execute example above