jsPanel Documentation
On this page:

Basic Requirements

The following requirements have to be met in order to use jsPanel:
  • jQuery 1.9.1 or greater (including jQuery 2.2.0)
  • jQuery UI 1.9 or greater with at least UI Core, Mouse, Widget, Draggable, Resizable (due to a bug in jQuery-UI 1.10.3 and 1.10.4
    I currently recommend using version 1.11.4)
  • HTML5/CSS3 compatible browser and the use of <!DOCTYPE html>
  • bootstrap only in case you want to use the bootstrap option of jsPanel.

The bootstrap option of jsPanel basically adds a few CSS classes to various elements of the jsPanel template in order to have the jsPanel styling adjust to the used bootstrap theme.

Globals: The jsPanel script exposes one global object jsPanel

Following code shows an example of how to load all required files

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jsPanel - a jQuery Plugin</title>
        <!-- loading jQuery UI css (which theme doesn't matter for jsPanel) -->
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/flick/jquery-ui.css" />
        <!-- loading Bootstrap css (required only when you intend to use option.bootstrap) -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <!-- loading font-awesome css (required only when you intend to use the font-awesome iconfont) -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- loading jsPanel css -->
        <link href="jspanel/jquery.jspanel.css" rel="stylesheet">
    </head>
    <body>

        <!-- Your HTML goes here -->

        <!-- loading jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <!-- loading jQuery UI javascript -->
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <!-- loading Bootstrap javascript (required only when you intend to use option.bootstrap) -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!-- loading jsPanel javascript -->
        <script src="jspanel/jquery.jspanel.js"></script>
    </body>
</html>

$.jsPanel( {config} )

A major difference of jsPanel version 2 compared with version 1.x is that version 2 is a jQuery function rather than a jQuery method! So jsPanel version 2 has to be called on the jQuery object with either $.jsPanel() or jQuery.jsPanel()

$.jsPanel( {config} ) is a jQuery function. So in order to create a jsPanel the function has to be called directly on the jQuery object. $.jsPanel() will create one single jsPanel and append it to the first item of a jQuery collection specified in the configuration object. Defaults are set for every available option. Unlike other jQuery methods/functions $.jsPanel() will not iterate over a collection and append a panel to each item in the collection (only the first item in the collection gets a jsPanel).

The $.jsPanel() function takes one optional argument: the configuration object

The return value of the $.jsPanel() function is the jsPanel itself to allow for further chaining of other jQuery or jsPanel methods.

So the most basic way to create a jsPanel is:

$.jsPanel();

This example creates a jsPanel with all default options and appends the panel to the top left corner of the body element.

Execute example above

Using another element than the body as container for the jsPanel in combination with a few other options:

$.jsPanel({
    selector: "#container-1",
    position: "center",
    theme:    "success",
    title:    "Another jsPanel"
});

This example creates a jsPanel with almost all default options and appends the panel to the top left corner of the element specified by option.selector.

Execute example above

NOTE: If using a container for the jsPanel other than the body element the container has to be positioned using either absolute, relative or fixed.

jsPanel Options

Options can be passed to each individual jsPanel() function by use of a configuration object { options }. All available options of course have a default value that will be overridden whenever you configure other values for a given option. The following example sets title, size, position and theme of the jsPanel.

$.jsPanel({
    title:    "Title of the jsPanel",
    size:     { width:  400, height: 200 },
    position: 'center',
    theme:    'medium'
});
Execute example above

Available options include:

addClass adds custom css classes to header, content and footer sections
ajax loads content using jQuery.ajax()
autoclose enables automatic closing of a jsPanel after a specified time
bootstrap in combination with option.theme enables automatic adaption to a used bootstrap theme
callback a function or array of functions executed when the jsPanel is loaded into the document
config allows the use of a predefined jsPanel configuration object
content loads content using jQuery's append() method
controls configures the control buttons in the top right corner of the jsPanel
dblclicks allows to bind doubleclick event handlers to title, content and/or footer sections
draggable configures jQuery's draggable interaction for the jsPanel
id sets the id attribute of the jsPanel
iframe configures an iframe as content of the jsPanel
load loads content using jQuery's .load() method
maximizedMargin sets individual jsPanel "margins" relative to browser viewport or jsPanel container
offset sets horizontal and/or vertical position offsets
onbeforeclose takes a function to execute before the jsPanel closes. If function returns false panel will not close.
onbeforemaximize takes a function to execute before the jsPanel maximizes. If function returns false panel will not maximize.
onbeforeminimize takes a function to execute before the jsPanel minimizes. If function returns false panel will not minimize.
onbeforenormalize takes a function to execute before the jsPanel normalizes. If function returns false panel will not normalize.
onclosed takes a function to execute after the jsPanel closed.
onmaximized takes a function to execute after the jsPanel maximized.
onminimized takes a function to execute after the jsPanel minimized.
onnormalized takes a function to execute after the jsPanel normalized.
overflow configures the overflow properties of the jsPanel content area
panelstatus By default any new jsPanel will have a normalized status. option.panelstatus can be used to automatically maximize, minimize or smallify a jsPanel immediately after it was created.
paneltype sets the type of jsPanel. This can either be a standard jsPanel, a modal jsPanel, a tooltip or a hint
position sets the position of the jsPanel relative to the containing element
removeHeader allows to remove the header section from the jsPanel
resizable configures jQuery's resizable interaction for the jsPanel
rtl support for right-to-left text direction
selector specifies a container to append the jsPanel to
show sets the animation used to blend in a jsPanel
size sets the size of a jsPanel
template allows use of a custom template for a specific jsPanel
theme sets one of several themes of a jsPanel
title sets the title of a jsPanel
toolbarHeader configures a toolbar in the header section of a jsPanel
toolbarFooter configures a toolbar in the footer section of a jsPanel

jsPanel Properties

Available properties include:

jsPanel.header represents the complete header section (including title, controls and toolbar)
jsPanel.header.title represents the h3 element containing the title text
jsPanel.header.controls represents the div element containing the control buttons (close, maximize, minimize, ...)
jsPanel.header.toolbar represents the div element containing the header toolbar
jsPanel.content represents the div element containing the content of the jsPanel
jsPanel.footer represents the div element containing the footer toolbar
jsPanel.status is set to the current status (normalized, maximized, minimized, ...) of the jsPanel 
// create a jsPanel and store it in a variable
var mypanel = $.jsPanel({
    position: "center",
    theme: "autumnbrown"
});
// access the content property and log the status property to it
mypanel.content.append("<p style='...'><i>jsPanel</i>.status: " + mypanel.status + "</p>");
// use the "jspanelstatechange" event to log the final status
mypanel.on('jspanelstatechange', function(){
    mypanel.content.append("<p style='...'><i>jsPanel</i>.status changed to: " + mypanel.status + "</p>");
});
Execute example above

jsPanel Methods

A bunch of methods are provided that can either be chained directly to .jsPanel() or can be called on a variable representing a jsPanel.

Example using .title();

// create a jsPanel and store it in a variable
var panel1 = $.jsPanel({
    title:    "jsPanel Title",
    size:     { width: 400, height: 200 },
    position: "center",
    theme:    "success"
});

window.setTimeout( function(){
    // call .title() on the variable representing the jsPanel (delayed in order to see the title change)
    panel1.title('jsPanel <small>a jquery plugin</small>');
}, 3000);
Execute example above

Available methods include:

addToolbar() adds a toolbar either to the header section or the footer section of a jsPanel
close() closes a jsPanel anf removes it from the DOM
closeChildpanels() removes all jsPanels that are contained within another jsPanel
front() moves a jsPanel to the front by adjusting the z-index
control() disables/enables a control of an excisting jsPanel
maximize() maximizes a jsPanel either within its containing element or within the window
minimize() minimizes a jsPanel to the lower left corner of the window
normalize() normalizes a minimized jsPanel back to its original size and position
reloadContent() reloads content loaded with either option.load, option.ajax or option.iframe
reposition() repositions an already exsisitng jsPanel and optionally moves it from one container element to another
resize() resizes an already exsisitng jsPanel
smallify() reduces the height of a jsPanel to the height of the header section
title() gets or sets the title text of a jsPanel

jsPanel Events

Following events are currently implemented in jsPanel:

jspanelloaded is triggered when the jsPanel is appended to the document and the entry animation completed - meaning the jsPanel is fully visible
jspanelbeforeclose is triggered before the jsPanel is removed from the document
jspanelclosed is triggered after the jsPanel is removed from the document
jspanelbeforeminimize is triggered before the jsPanel starts minimizing
jspanelminimized is triggered after the jsPanel is minimized to the bottom left corner of the document
jspanelbeforenormalize is triggered before the jsPanel starts normalizing
jspanelnormalized is triggered after the jsPanel is restored to "normal" size and position from either a minimized, maximized or smallified status
jspanelbeforemaximize is triggered before the jsPanel starts maximizing
jspanelmaximized is triggered after the jsPanel is maximized
jspanelsmallified is triggered after the jsPanel is smallified from a status other than maximized
jspanelsmallifiedMax is triggered after the jsPanel is smallified from a maximized status
jspanelstatechange is triggered after the status of the jsPanel changed

Important! The handler for the "jspanelclosed" event has to be attached to the <body> element.

// create a jsPanel and store it in a variable
var mypanel2 = $.jsPanel({
    position: "center",
    theme: "autumnred"
});
// bind a handler to the "jspanelstatuschange" event
mypanel2.on('jspanelstatechange', function(){
    if (mypanel2.status === "maximized" || mypanel2.status === "normalized") {
        mypanel2.content.append("<p style='...'><i>jsPanel</i>.status changed to: " + mypanel2.status + "</p>");
    }
});
Execute example above and click the maximize/normalize controls