Nutella with Pepperoni and Mushrooms

    jspanel4

    4.15.0 • Public • Published

    NPM license npm version npm downloads

    jsPanel 4.15.0 released 2022-05-30

    As of v4.11.0-beta methods jsPanel.ajax() and jsPanel.fetch() are updated. That also affects options contentAjax and contentFetch. These updates might break existing code. So please check the docs on https://jspanel.de/

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

    • a huge amount of options allows to configure appearance and behavior of a jsPanel
    • optionally add extra toolbars to header or/and footer sections
    • support for Boostrap (3 and 4) themes and Material-Design-for-Bootstrap themes is built-in
    • customize the panel controls with built-in support for icon fonts Font-Awesome, Material-Icons and Glyphicon
    • built-in support for RTL text direction
    • use it as standard panel, modal, tooltip, hint/notifier or contextmenu
    • jsPanels are draggable and resizable, can be maximized, minimized and smallified
    • and much more ...

    jsPanel 4 homepage and documentation: https://jspanel.de

    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:  '../path/to/the/resource',
            done: function(xhr, panel) {
            	// the keyword "this" inside the function refers to the XMLHttpRequest object
            },
            fail: function(xhr, 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
        }
    });

    Install

    npm i jspanel4

    Homepage

    jspanel.de/

    DownloadsWeekly Downloads

    1,319

    Version

    4.15.0

    License

    MIT

    Unpacked Size

    940 kB

    Total Files

    45

    Last publish

    Collaborators

    • flyer53