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.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist jsPanel v4.2.1 Sep 14, 2018
es6module jsPanel v4.2.1 Sep 14, 2018
source jsPanel v4.2.1 Sep 14, 2018
.gitattributes jsPanel v4.0.0-beta.3 Feb 17, 2018
.travis.yml jsPanel v4.0.0-beta.3 Feb 17, 2018
CHANGELOG.md jsPanel v4.2.1 Sep 14, 2018
CODE_OF_CONDUCT.md jsPanel 4.0.0-beta.1 Dec 7, 2017
LICENSE.TXT jsPanel 4.0.0-beta.1 Dec 7, 2017
README.md jsPanel v4.2.1 Sep 14, 2018
bower.json added bower.json Sep 14, 2018
package.json jsPanel v4.2.1 Sep 14, 2018

README.md

license MIT npm version npm Gitter

jsPanel 4.2.1 released 2018-09-14

A dependency free javascript tool to create highly configurable multifunctional floating panels.

jsPanels can be used as floating, draggable and resizable panels, modals, tooltips, hints/alerts/notifiers or contextmenus.


jsPanel 4 beta homepage: https://jspanel.de

API and examples: https://jspanel.de/api.html

Dependencies

Just a modern mobile or desktop browser like FF, Chrome, EDGE, Brave, Opera, Vivaldi. jsPanel 4 is pure javascript and does not depend on any other library.

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 4</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/modal/jspanel.modal.js"></script>
        // and the other extension you need
    </body>
</html>

And then ...

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

jsPanel.create( options );

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

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

Example:
jsPanel.create({
    position:    "left-top",
    contentSize: "600 350",
    contentAjax: {
    	url:  // some url,
        done: function (panel) {
        	// the keyword "this" inside the function refers to the XMLHttpRequest object
        },
        fail: function (panel) {
        	//the keyword "this" inside the function refers to the XMLHttpRequest object
        }
    },
    headerTitle: "my example jsPanel",
    theme:       "rebeccapurple",
    callback:    function (panel) {
    	// do whatever you like
        // the keyword "this" inside the callback function refers to the panel
    }
});
A few example panels