logo Get started with jsPanel 4

Download latest
A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.

A few words #

Some years ago I needed to make a backend for a site (derpanoramafotograf.com) that the owner (my brother) wanted to be highly configurable. Nearly all content comes from a database with meanwhile thousands of datasets. For management purposes all those datasets need to be displayed in various configurations.

So I looked for something like a "window manager" to display a variable number of "windows" at once. Those "windows" of course need to be draggable and resizable, so that you can arrange them as needed. And yes, it needs to be free.

In short ... I couldn't find something I really liked. So I started to make my own "window" tool with help from jQuery and jQuery UI.

jsPanel was born.

The first two versions worked quite well, but I didn't think of making them available to anyone else. By profession I never had anything to do with programming. Meanwhile I'm retired and programming is just a spare time occupation to keep my brain working.

But I had fun and my third version found its way to GitHub as jsPanel v1.0.0 in March 2014.

Version 2.0.0 already followed in August 2014 and version 3.0.0 was released in June 2016.

Now I'm working on this fourth version which is the first one without dependencies.

Happy coding,

Stefan Sträßer (Flyer53)

License #

MIT: https://en.wikipedia.org/wiki/MIT_License

jsPanel is Open Source and free. And I don't have plans to change that.

Dependencies #

As of version 4.0.0 there are no more dependencies other than a modern browser with javascript enabled.

It's important to realize that jsPanel v4 doesn't depend on jQuery anymore. This for example means that you cannot use jQuery methods the way you might be used to from previous jsPanel versions.

Compatibility #

At time of writing version 4 should work with one of the recent desktop/mobile versions of , , , , 11, Brave and Vivaldi.

Install #

Install with npm

npm install jspanel4

Install with bower

bower install jspanel4x

using bower install jspanel4 will install a jsPanel fork from another user.

jsDelivr CDN
<!-- jsPanel CSS -->
<link href="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/jspanel.css" rel="stylesheet">
<!-- jsPanel JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/jspanel.js"></script>

<!-- optional jsPanel extensions -->
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/modal/jspanel.modal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/tooltip/jspanel.tooltip.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/hint/jspanel.hint.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/layout/jspanel.layout.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspanel4@4.14.1/dist/extensions/dock/jspanel.dock.js"></script>
Install manual

Download the latest stable version of jsPanel and create an HTML file according to the basic setup shown below to get started.

<!DOCTYPE html>
<html lang="en">
<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</title>
    <!-- loading jsPanel css -->
    <link href="dist/jspanel.css" rel="stylesheet">
</head>
<body>

    <!-- Your HTML goes here -->

    <!-- loading jsPanel javascript -->
    <script src="dist/jspanel.js"></script>
    <!-- optionally load jsPanel extensions -->
    <script src="dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
    <script src="dist/extensions/hint/jspanel.hint.js"></script>
    <script src="dist/extensions/modal/jspanel.modal.js"></script>
    <script src="dist/extensions/tooltip/jspanel.tooltip.js"></script>
    <script src="dist/extensions/dock/jspanel.dock.js"></script>

    <script>
        // create a default jsPanel
        jsPanel.create();
    </script>
</body>
</html>
jsPanel ES6 module

The jsPanel v4 download package includes the es6module containing the files needed to run jsPanel as native ES6 module.

<!DOCTYPE html>
<html lang="en">
<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</title>
    <!-- loading jsPanel css -->
    <link rel="stylesheet" href="jspanel.min.css">
</head>
<body>

<!-- Your HTML goes here -->

<script type="module">
    // import main js
    import { jsPanel } from './jspanel.min.js';

    // import extensions as needed
    import './extensions/hint/jspanel.hint.min.js';
    import './extensions/modal/jspanel.modal.min.js';
    import './extensions/contextmenu/jspanel.contextmenu.min.js';
    import './extensions/tooltip/jspanel.tooltip.min.js';
    import './extensions/layout/jspanel.layout.min.js';
    import './extensions/dock/jspanel.dock.min.js';

    // create a demo jsPanel
    jsPanel.create({
        headerTitle: 'demo panel',
        theme: 'dark',
        content: '<p style="text-align:center;">A simple demo panel.</p>'
    });
</script>
</body>
</html>
ES6 module notes:
  • The extension modules don't export anything in particular. When imported they just run the module's global code to extend the already imported module jsPanel. See //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import for some more infos on how to use the javascript import statement. Check browser compatibility before you start using ES6 modules.
  • If you import from jspanel.min.js be sure to also import the minified extension files.
    Or if you prefer to use the unminified files then import only from unminified files.

Angular, React, Vue and the like ... #

jsPanel is written in plain javascript without any dependencies. Therefore it should work with all those libraries/frameworks.

But there are no library/framework specific versions of jsPanel. Please consider that jsPanel is a one man show and that I'm not a professional programmer. Neither do I have the time nor the knowledge to deal with all those libraries.

So if you happen to need a jsPanel version adapted to a certain library/framework I fear you have to help yourself. Of course I'm willing to help as good as I can ... but since I personally never worked with Angular, React, Vue and the like you probably know a lot more than I do about those libraries/frameworks.

Simple example panel using a few options #

jsPanel.create({
    theme:       'primary',
    headerTitle: 'my panel #1',
    position:    'center-top 0 58',
    contentSize: '450 250',
    content:     '<p>Example panel ...</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Do you really want to close the panel?');
    }
});