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 jspanel4 with all npm packages installed. Try it out:

var jspanel4 = require("jspanel4")

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

jspanel4 v4.2.1

A javascript tool to create highly configurable multifunctional floating panels for use in backend solutions and other web applications. Also usable as modal, tooltip, hint or contextmenu. With built in support for bootstrap (3 & 4), right-to-left text direction and a lot more ...

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

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