Get started with jsPanel

a JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution 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.

Enjoy life,

Stefan Sträßer (Flyer53)

License

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


Dependencies

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


Compatibility

At time of writing version 4 should work with , , , and Brave.

I'm not that much focused on mobile devices, but it seems to work quite well.


Download

right away or go to the downloads page to select the required version.

The download package contains:
  • The dist folder with all necessary files to run jsPanel in production.

  • The source folder with the developement files.

  • index.html a very basic HTML template.


HTML Template

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

    <!-- Your HTML goes here -->

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

jsPanel.create();

A default jsPanel is created via the method .create() of the global object jsPanel.

The method accepts a plain object as argument to pass the desired panel configuration.

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

Of course there are a lot more configuration options, properties, methods and events to work with.

Take a look at the docs for detailed information about all features.

jsPanel on GitHub, npm, CDNJS, Twitter
jsPanel is Open Source and free. And that's what it will remain. However, if you like my work and want to support it I'd be very grateful for a small donation.
Donate