jsPanel一个轻量级的JavaScript面板组件, 提供了非常丰富的自定义特性,配置项、属性、方法、事件。还提供一些扩展功能,如模式窗体、对话框、提示框、上下文菜单、停靠、布局等功能。4.0之前的版本依赖jQuery组件,4.0之后的版本无任何其他依赖。几乎支持所有主流的浏览器。其官方网站为 https://jspanel.de 。

支持多种安装方法,离线包, cdn引用, npm等。
在我的django项目中,因为一部分业务比较复杂, 一些表单已改用前后端分离的方式,所以,使用了jsPanel组件的model扩展功能,在后端页面上弹出模式窗体,显示前端页面, 在不破坏现有django-admin功能的前提下,实现了功能的扩展。

jsPanel组件的基本功能演示可以访问官网查看更多内容。 或者将以下代码粘贴到记事本,保存为 jsPanel.html文件,在浏览器中打开看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsPanel</title>
<!-- loading jsPanel css -->
<link href="dist/jspanel.css" rel="stylesheet">
</head>
<body>
<!-- Your HTML goes here -->
<!-- loading jsPanel javascript -->
<script src="dist/jspanel.js"></script>
<!-- optionally load jsPanel extensions -->
<script src="dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
<script src="dist/extensions/hint/jspanel.hint.js"></script>
<script src="dist/extensions/modal/jspanel.modal.js"></script>
<script src="dist/extensions/tooltip/jspanel.tooltip.js"></script>
<script src="dist/extensions/dock/jspanel.dock.js"></script>
<script>
// create a default jsPanel
jsPanel.create();
</script>
</body>
</html>