jsPanel a jQuery plugin to create multifunctional floating panels

Don't miss jsPanel v4.x.x which is free of any dependencies.

A jsPanel is highly configurable by a bunch of options, properties, methods and events. And it's not limited to the use as a floating panel. You can further use it as modal, tooltip or even as hint. Configuration options include additional toolbars for the header and/or footer sections, support for right-to-left text direction, numerous themes, built in bootstrap support and much more. Content can be loaded by a variety of options including jQuery's AJAX methods.

$.jsPanel( { options } )

$.jsPanel() is a jQuery function that will create and append a jsPanel to the first element of the jQuery collection specified by the selector expression in the options object.

Dependencies/Requirements

  • jQuery 1.9.1 or greater (including 2.1.4)
  • jQuery UI 1.9.2 or greater at least with core, widget, mouse, resizable and draggable (due to a bug in jQuery-UI 1.10.3 and 1.10.4 I currently recommend using version 1.11.4)
  • HTML5/CSS3 capable browser and the use of <!DOCTYPE html>
  • Bootstrap (only in case you intend to use the bootstrap option of jsPanel)

Argument

  • options Type: object

Return value

  • The generated jsPanel

Globals

The jsPanel script exposes one global object: jsPanel

The most basic way to create a jsPanel is:

$.jsPanel();

This appends a basic jsPanel with all its default options to the body element.

Example loading table data into a jsPanel.

For more examples and documentation go to the API page

Third party code used in jsPanel:

jsPanel and touch devices:

The download package of jsPanel includes the JavaScript files of jQuery UI Touch Punch.

Query UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.