{"id":13447405,"url":"https://github.com/Flyer53/jsPanel4","last_synced_at":"2025-03-22T01:30:59.151Z","repository":{"id":27333350,"uuid":"113428581","full_name":"Flyer53/jsPanel4","owner":"Flyer53","description":"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.","archived":false,"fork":false,"pushed_at":"2022-11-03T08:51:01.000Z","size":2035,"stargazers_count":317,"open_issues_count":13,"forks_count":58,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-08T06:34:52.883Z","etag":null,"topics":["alert","contextmenu","dialog","draggable","hint","javascript","modal","notifier","panel","resizable","tooltip","ui","window"],"latest_commit_sha":null,"homepage":"https://jspanel.de/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flyer53.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-07T09:16:49.000Z","updated_at":"2025-01-20T18:03:39.000Z","dependencies_parsed_at":"2022-07-12T16:09:04.662Z","dependency_job_id":null,"html_url":"https://github.com/Flyer53/jsPanel4","commit_stats":null,"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flyer53%2FjsPanel4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flyer53%2FjsPanel4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flyer53%2FjsPanel4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flyer53%2FjsPanel4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flyer53","download_url":"https://codeload.github.com/Flyer53/jsPanel4/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244332696,"owners_count":20436109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","contextmenu","dialog","draggable","hint","javascript","modal","notifier","panel","resizable","tooltip","ui","window"],"created_at":"2024-07-31T05:01:16.696Z","updated_at":"2025-03-22T01:30:59.126Z","avatar_url":"https://github.com/Flyer53.png","language":"JavaScript","readme":"\u003cimg alt=\"NPM license\"   src=\"https://img.shields.io/npm/l/jspanel4\"\u003e \u003cimg alt=\"npm version\"   src=\"https://img.shields.io/npm/v/jspanel4?color=0677b8\"\u003e \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/jspanel4?color=0677b8\"\u003e\n\n\n## [jsPanel 4.16.1 released 2022-11-03](#)\n\n\u003e 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/\n\n\u003cimg src=\"https://res.cloudinary.com/stefanstraesser-eu/image/upload/v1558601426/jsPanel4.7.0-sample-panels-1920_yzobd9.jpg\"\u003e\n\n**A dependency free javascript tool to create highly configurable multifunctional floating panels.**\n\n+ a **huge amount of options** allows to configure appearance and behavior of a jsPanel\n+ optionally add **extra toolbars** to header or/and footer sections\n+ support for Boostrap (3 and 4) **themes** and Material-Design-for-Bootstrap themes is built-in\n+ customize the panel controls with built-in support for **icon fonts** Font-Awesome, Material-Icons and Glyphicon\n+ built-in support for **RTL text** direction\n+ via extensions you can use it alose as **modal**, **tooltip**, **hint/notifier**, **contextmenu** or **dialog**\n+ jsPanels are **draggable** and **resizable**, can be **maximized**, **minimized** and **smallified**\n+ and much more ...\n\n---\n\n### jsPanel 4 homepage and documentation: [https://jspanel.de](https://jspanel.de/)\n\n### [Dependencies]()\nJust a modern mobile or desktop browser like FF, Chrome, EDGE, Brave, Opera, Vivaldi.\njsPanel 4 is pure javascript and does not depend on any other library.\n\n### [Include the files]()\nThe following example shows a complete html file with the minimium setup:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n        \u003ctitle\u003ejsPanel 4\u003c/title\u003e\n        \u003c!-- loading jsPanel css --\u003e\n        \u003clink rel=\"stylesheet\" href=\"dist/jspanel.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n\n        \u003c!-- Your HTML goes here --\u003e\n\n        \u003c!-- loading jsPanel javascript --\u003e\n        \u003cscript src=\"dist/jspanel.js\"\u003e\u003c/script\u003e\n        \u003c!-- optionally load jsPanel extensions --\u003e\n        \u003cscript src=\"dist/extensions/modal/jspanel.modal.js\"\u003e\u003c/script\u003e\n        // and the other extension you need\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### [And then ...]()\nAfter including all the necessary files in your project you can create a jsPanel like ...\n\n```javascript\njsPanel.create( options );\n\n// or\nvar myPanel = jsPanel.create( options );\n```\n... where **options** is an object passing the jsPanel configuration options to the function.\n\n##### Example:\n\n```javascript\njsPanel.create({\n    position:    \"left-top\",\n    contentSize: \"600 350\",\n    contentAjax: {\n    \turl:  '../path/to/the/resource',\n        done: function(xhr, panel) {\n        \t// the keyword \"this\" inside the function refers to the XMLHttpRequest object\n        },\n        fail: function(xhr, panel) {\n        \t//the keyword \"this\" inside the function refers to the XMLHttpRequest object\n        }\n    },\n    headerTitle: \"my example jsPanel\",\n    theme:       \"rebeccapurple\",\n    callback:    function(panel) {\n    \t// do whatever you like\n        // the keyword \"this\" inside the callback function refers to the panel\n    }\n});\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFlyer53%2FjsPanel4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFlyer53%2FjsPanel4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFlyer53%2FjsPanel4/lists"}