The defaults object

A standard jsPanel without a specific configuration is created with a default value for all available options. When you specify a setting in the options object of a jsPanel the respective default value will be replaced by your setting while retaining all the other default settings.

The defaults object is shown below:

$.jsPanel.defaults = {
    "addClass": {
        header: false,
        content: false,
        footer: false
    "ajax": false,
    "autoclose": false,
    "bootstrap": false,
    "callback": undefined,
    "content": false,
    "controls": {
        buttons: true,
        iconfont: 'jsglyph',
        close: false,
        maximize: false,
        minimize: false,
        normalize: false,
        smallify: false,
        maxtoScreen: false
    "dblclicks": false,
    "draggable": {
        handle: 'div.jsPanel-hdr, div.jsPanel-ftr',
        stack: '.jsPanel',
        opacity: 0.7
    "id": function () {
        jsPanel.ID += 1;
        return 'jsPanel-' + jsPanel.ID;
    "iframe": false,
    "load": false,
    "offset": {
        top: 0,
        left: 0
    "paneltype": false,
    "overflow": 'hidden',
    "position": 'auto',
    "removeHeader": false,
    "resizable": {
        handles: 'n, e, s, w, ne, se, sw, nw',
        autoHide: false,
        minWidth: 150,
        minHeight: 93
    "rtl": false,
    "selector": 'body',
    "show": 'fadeIn',
    "size": {
        width: 400,
        height: 222
    "template": false,
    "theme": 'default',
    "title": 'jsPanel',
    "toolbarFooter": false,
    "toolbarHeader": false

How to change defaults globally

To change defaults globally you have to edit the respective parameter in the defaults object prior the first call of $.jsPanel().

Example 1:
Changing the theme globally

$.jsPanel.defaults.theme = 'primary';

Example 2:
Changing the used iconfont globally

$.jsPanel.defaults.controls.iconfont = 'font-awesome';

To change more than one default parameter you have to make a seperate call for each paramter:

$.jsPanel.defaults.theme = 'primary';
$.jsPanel.defaults.controls.iconfont = 'font-awesome';

The following code doesn't work because it overwrites the complete defaults object, effectively deleting all defaults except the two provided.

// don't do this !!
$.jsPanel.defaults = {
    theme:    "primary",
    controls: { iconfont: "font-awesome" }