All Projects → Flyer53 → Jspanel4

Flyer53 / Jspanel4

Licence: other
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.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Jspanel4

jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (-58.99%)
Mutual labels:  panel, notifier, modal, tooltip, contextmenu, hint, draggable, resizable
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+476.5%)
Mutual labels:  modal, alert, tooltip
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+3527.65%)
Mutual labels:  modal, alert, tooltip
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (-18.43%)
Mutual labels:  modal, draggable, resizable
vue-smart-widget
🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
Stars: ✭ 110 (-49.31%)
Mutual labels:  panel, draggable, resizable
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (-6.45%)
Mutual labels:  modal, draggable, resizable
Ant Design Draggable Modal
The Modal from Ant Design, draggable.
Stars: ✭ 105 (-51.61%)
Mutual labels:  modal, draggable
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (-47%)
Mutual labels:  alert, tooltip
React Popup
React popup component
Stars: ✭ 198 (-8.76%)
Mutual labels:  modal, alert
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-29.95%)
Mutual labels:  modal, tooltip
Cooltipz.css
A modern, highly customisable, minimal, pure CSS tooltip library
Stars: ✭ 81 (-62.67%)
Mutual labels:  tooltip, hint
Vue Responsive Dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
Stars: ✭ 128 (-41.01%)
Mutual labels:  draggable, resizable
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+785.71%)
Mutual labels:  modal, alert
Wc Messagebox
基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生
Stars: ✭ 203 (-6.45%)
Mutual labels:  modal, alert
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-53.92%)
Mutual labels:  modal, alert
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+1004.61%)
Mutual labels:  modal, alert
React Drag Drawer
A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop
Stars: ✭ 135 (-37.79%)
Mutual labels:  modal, draggable
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-19.82%)
Mutual labels:  modal, alert
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (-24.88%)
Mutual labels:  draggable, resizable
Vue Draggable Resizable
Vue2 Component for draggable and resizable elements.
Stars: ✭ 2,431 (+1020.28%)
Mutual labels:  draggable, resizable

NPM license npm version npm downloads

jsPanel 4.11.3 released 2021-02-03

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 for this beta release on https://jspanel.de/

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 homepage: 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
    }
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].