Get started with jsPanel 4

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.

Happx coding,

Stefan Sträßer (Flyer53)

License

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

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

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

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

<!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="dist/jspanel.css">
</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>
        // create a default jsPanel
        jsPanel.create();
    </script>
</body>
</html>

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?');
    }
});

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

Thanks a lot to JetBrains for granting an All Products Pack Open Source License to jsPanel.