Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including jspanel3 with all npm packages installed. Try it out:

jspanel3 lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("jspanel3/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

jspanel3 v3.10.0

A jQuery Plugin to create highly configurable multifunctional floating panels

Build Status CDNJS license MIT npm version Gitter

jsPanel 3.10.0 released 2017-08-19

A jQuery plugin to create highly configurable multifunctional floating panels.

jsPanels can be used as a floating, draggable and resizable panel, modal, tooltip or hint/notifier.


News:

  • I'm working on a jsPanel version that does without dependencies (not even jQuery). For now it's strictly experimental and works with FF, Chrome, Edge, Brave, Opera and IE10/11. Interested? A simple demo page is here
  • Want to stay up to date about new jsPanel releases, bugfixes, plans and other jsPanel related topics? Then sign up for the monthly newsletter

jsPanel homepage: http://jspanel.de

API and examples: http://jspanel.de/api

npm

npm install jspanel3

bower

bower install jspanel3

A few standard example jsPanels

modal jsPanel

stacked modal jsPanels - short demo video on youtube

jsPanels as hints/notifiers - short demo video on youtube

jsPanels as tooltip - short demo video on youtube

some more toolbar examples

Getting started

If you used jsPanel 2.x already please check the API docs for the migration infos on each jsPanel 3.x option/method/property since a few things changed significantly in jsPanel 3.x.

Dependencies

  • jQuery 2.x or 3.x
  • HTML5/CSS3 compatible browser like FF, Chrome, EDGE, Brave and IE11. IE10 and other older browsers are not supported by jsPanel 3.
  • As of version 3.5.0 jQuery ui and jQuery ui touch punch are only required if you still want to use the jQuery ui draggable/resizable interactions

Get the files

Download and extract the jsPanel package to a folder of your choice. You find at least the two folders source and vendor.

The source folder contains all the necessary jsPanel specific files (.js, .css and font). Copy this folder to your project and rename it as you like if necessary.

The vendor folder contains the dependencies jsPanel relies on. Whether you use these files, load them from a CDN or download the desired versions yourself doesn't matter.

CDN

jsPanel v3.x is available via CDNJS as well

Include the files

The following example shows a complete html file with the minimium setup:

<!DOCTYPE html>
<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>
        <!--  optional: loading jQuery UI css (which theme doesn't matter regarding jsPanel) -->
        <link rel="stylesheet" href="vendor/jquery-ui-1.12.1.complete/jquery-ui.min.css">
        <!-- loading jsPanel css -->
        <link rel="stylesheet" href="source/jquery.jspanel.css">
    </head>
    <body>

        <!-- Your HTML goes here -->

        <!-- loading jQuery -->
        <script src="vendor/jquery-3.1.1.min.js"></script>
        <!-- optional: loading jQuery UI and jQuery UI Touch Punch -->
        <script src="vendor/jquery-ui-1.12.1.complete/jquery-ui.min.js"></script>
        <script src="vendor/jquery.ui.touch-punch.min.js"></script>
        <!-- loading jsPanel javascript -->
        <script src="source/jquery.jspanel-compiled.js"></script>
    </body>
</html>

And then ...

After including all the necessary files in your project you can create a jsPanel like ...

$.jsPanel( options );

// or
var myPanel = $.jsPanel( options );

... where options is an object passing the configuration options to the function.

Example:
$.jsPanel({
    position: {
        my: "left-top",
        at: "left-top"
    },
    contentSize: {
        width:  600,
        height: 350
    },
    contentAjax: {
        url:  // some url,
        done: function (data, textStatus, jqXHR, panel) {
            // the keyword "this" inside the function refers to the panel
        },
        fail: function (jqXHR, textStatus, errorThrown, panel) {
            //the keyword "this" inside the function refers to the panel
        }
    },
    headerTitle: "my example jsPanel",
    theme:       "rebeccapurple",
    callback: function (panel) {
        // do whatever you like
        // the keyword "this" inside the callback function refers to the panel
    }
});

jsPanel options in alphabetical order:

optiondescription🔗
autocloseautomatically close a jsPanel after a specified timeAPI
borderset border-width and border-style for a jsPanel, border-color is taken from themeAPI
callbacka callback function or array of callback functionsAPI
closeOnEscapeenables closeOnEscape for the individual panel (not global as with jsPanel.cloesOnEscape)API
configpasses a prepared configuration objectAPI
containerthe container element to append the jsPanel toAPI
contentcontent to append to the jsPanelAPI
contentAjaxcontent to append to the jsPanel using $.ajax();API
contentIframeappends an iframe to the jsPanel content section and loads the urlAPI
contentOverflowsets the overflow property for the content sectionAPI
contentSizesets the size of the content section of the jsPanelAPI
dblclicksconfigures doubleclick handlers for header, content and footer sectionsAPI
delayClosesets a delay for the actual removal of a panel upon closing itAPI
dragitconfigures the buitl-in draggable interactionAPI
draggableconfigures the draggable interactionAPI
footerToolbarconfigures a toolbar for the footer sectionAPI
headerControlsconfigures the controls (close, minimize buttons etc.)API
headerLogoadds a logo to the header barAPI
headerTitlesets the title/heading of the jsPanelAPI
headerRemoveremoves the complete header sectionAPI
headerToolbarconfigures a toolbar for the header sectionAPI
idsets the id attribute for the jsPanelAPI
maximizedMarginsets margins for a maximized jsPanelAPI
minimizeToallows to select a container the minimnized replacement is appanded to or to skip the replacement elementAPI
onbeforeclosesets a hendler for the jspanelbeforeclose eventAPI
onbeforemaximizesets a hendler for the jspanelbeforemaximize eventAPI
onbeforeminimizesets a hendler for the jspanelbeforeminimize eventAPI
onbeforenormalizesets a hendler for the jspanelbeforenormalize eventAPI
onbeforesmallifysets a hendler for the jspanelbeforesmallify eventAPI
onbeforeunsmallifysets a hendler for the jspanelbeforeunsmallify eventAPI
onbeforeresizesets a hendler to call before a panel is resized when using the method .resize()API
onclosedsets a hendler for the jspanelclosed eventAPI
onfrontedsets a hendler for the jspanelclosed eventAPI
onmaximizedsets a hendler for the jspanelmaximized eventAPI
onminimizedsets a hendler for the jspanelminimized eventAPI
onnormalizedsets a hendler for the jspanelnormalized eventAPI
onresizedsets a hendler for the jspanelresized eventAPI
onsmallifiedsets a hendler for the jspanelsmallified eventAPI
onunsmallifiedsets a hendler to call after a smallified jsPanel was unsmallifiedAPI
onwindowresizeenables responsivenes to a window resize eventAPI
paneltypeconfigures a jsPanel for use as modal, tooltip or hint/notifierAPI
positionsets the position of a jsPanelAPI
resizeitconfigures the built-in resizable interactionAPI
resizableconfigures the resizable interactionAPI
rtlset RTL text direction for the complete jsPanelAPI
setstatuscreates a jsPanel with a specified status (maximized, minimized etc.)API
showset an entry animation for the jsPanelAPI
templateassign a modified html template for the jsPanelAPI
themeassign a theme to the jsPanel (includes support for bootstrap themes)API

jsPanel methods in alphabetical order:

methoddescription🔗
close()closes a jsPanel and removes it from the DOMAPI
closeChildpanels()closes jsPanels that are appended to the content section of another jsPanel and removes them from the DOMAPI
contentReload()reloads content of aa exsisting jsPanelAPI
contentResize()resizes the content section of an exsisting jsPanelAPI
headerControl()configures individual controls of an exsisting jsPanelAPI
headerTitle()sets the title of an exsisting jsPanelAPI
front()gets a jsPanel to the front by manipulating its z-indexAPI
maximize()maximizes an exsisting jsPanelAPI
minimize()minimizes an exsisting jsPanelAPI
normalize()normalizes an exsisting jsPanelAPI
reposition()repositions an exsisting jsPanelAPI
resize()resizes an exsisting jsPanelAPI
setTheme()switches the theme of an already existing jsPanelAPI
smallify()smallifies/unsmallifies an exsisting jsPanelAPI
toolbarAdd()adds a header or footer toolbar to an exsistinf jsPanelAPI

jsPanel properties in alphabetical order:

propetydecription🔗
contentrepresents the jqueryfied div element holding all the content of the jsPanelAPI
footerreferences the jqueryfied div element holding the footer toolbar itemsAPI
headerreferences the header section of the jsPanelAPI
header.logoreferences the logo containerAPI
header.titlereferences the title elementAPI
header.controlsreferences the container for the controlsAPI
header.toolbarreferences the header toolbarAPI
optionstores the complete jsPanel configuration object and makes it available for later useAPI
statusthe current status of a jsPanel is stored in the data attribute statusAPI

jsPanel events: | API 🔗

  • jspanelloaded
  • jspanelstatuschange
  • jspanelbeforeclose
  • jspanelclosed
  • jspanelfronted
  • jspanelbeforemaximize
  • jspanelmaximized
  • jspanelbeforenormalize
  • jspanelnormalized
  • jspanelbeforeminimize
  • jspanelminimized
  • jspanelbeforesmallify
  • jspanelsmallified
  • jspanelsmallifiedmax
  • jspanelbeforeunsmallify
  • jspanelunsmallified
  • jspanelstatuschange

jsPanel defaults: | API 🔗

$.jsPanel.defaults = {
    autoclose: false,
    border: false,
    callback: false,
    container: 'body',
    content: false,
    contentAjax: false,
    contentIframe: false,
    contentOverflow: 'hidden',
    contentSize: {
        width: 400,
        height: 200
    },
    custom: false,
    dblclicks: false,
    draggable: {
        handle: 'div.jsPanel-hdr, div.jsPanel-ftr',
        opacity: 0.8
    },
    dragit: {
        axis:        false,
        containment: false,
        handles:     '.jsPanel-titlebar, .jsPanel-ftr.active',
        opacity:     0.8,
        start:       false,
        drag:        false,
        stop:        false,
        disableui:   false
    },
    footerToolbar: false,
    headerControls: {
        buttons: true,
        iconfont: 'jsglyph',
        close: false,
        maximize: false,
        minimize: false,
        normalize: false,
        smallify: false
    },
    headerLogo: false,
    headerRemove: false,
    headerTitle: 'jsPanel',
    headerToolbar: false,
    id: () => `jsPanel-${jsPanel.ID += 1}`,
    maximizedMargin: {
        top: 5,
        right: 5,
        bottom: 5,
        left: 5
    },
    minimizeTo: true,
    onbeforeclose: false,
    onbeforemaximize: false,
    onbeforeminimize: false,
    onbeforenormalize: false,
    onbeforesmallify: false,
    onbeforeunsmallify: false,
    onclosed: false,
    onmaximized: false,
    onminimized: false,
    onnormalized: false,
    onbeforeresize: false,
    onresized: false,
    onsmallified: false,
    onunsmallified: false,
    onfronted: false,
    onwindowresize: false,
    position: {
        my: 'center',
        at: 'center'
    },
    resizable: {
        handles: 'n, e, s, w, ne, se, sw, nw',
        autoHide: false,
        minWidth: 40,
        minHeight: 40
    },
    resizeit: {
        containment: false,
        handles:     'n, e, s, w, ne, se, sw, nw',
        minWidth:    40,
        minHeight:   40,
        maxWidth:    10000,
        maxHeight:   10000,
        start:       false,
        resize:      false,
        stop:        false,
        disableui:   false
    },
    rtl: false,
    setstatus: false,
    show: false,
    template: false,
    theme: 'default'
};

// deviating defaults for modal jsPanels
$.jsPanel.modaldefaults = {
    draggable: 'disabled',
    dragit: false,
    headerControls: {controls: 'closeonly'},
    position: 'center',
    resizable: 'disabled',
    resizeit: false,
    onwindowresize: true,
};

// deviating defaults for jsPanel tooltips
$.jsPanel.tooltipdefaults = {
    draggable: 'disabled',
    dragit: false,
    headerControls: {buttons: 'closeonly'},
    position: {fixed: false},
    resizable: disabled,
    resizeit: false,
};

// deviating defaults for jsPanel hints
$.jsPanel.hintdefaults = {
    autoclose: 8000,
    draggable: 'disabled',
    dragit: false,
    headerControls: {buttons: 'closeonly'},
    resizable: 'disabled',
    resizeit: false,
};

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free