jsPanel是一个jQuery对话框和弹出式插件，用于在web项目上创建多功能、高度可配置、可主题化、可拖动和可调整大小的浮动面板（窗口）。

该插件可以用作模式窗口、对话框、工具提示，甚至可以用作提示

从4.0.0版本开始，jsPanel是用纯JavaScript编写的，删除所有依赖项。您可以在此处下载jsPanel 4。

目录：

• V3文档
• V4文档

主要功能：

• 超时后自动解除。
• 支持任何HTML内容。
• 还支持AJAX和iframe内容。
• 页眉控件和页脚工具栏。
• 内置可拖动和可调整大小的交互。

依赖项（v3）：

• jQuery
• jQuery UI和jQuery UI touch punch（仅当您打算使用jQuery UI的可拖动和可调整大小功能时才需要）
• Bootstrap 3或Bootstrap 4框架（仅当您打算使用option.Bootstrap时才需要）
• 字体真棒图标字体（只有当您打算使用字体真棒图标时才需要）

基本用法（v3）：

1.在网页上包含jsPanel插件和其他所需资源。

<!-- Required -->
<link rel="stylesheet" href="/path/to/source/jquery.jspanel.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/source/jquery.jspanel-compiled.js"></script>

<!-- OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2.创建一个附加到body元素的基本浮动面板。

$.jsPanel();

3.覆盖默认选项，在页面上创建自己的浮动面板。

$.jsPanel({

  // auto closes the panel after a timeout
  // sets a timeout here
  autoclose: false,

  // shows borders around the panel
  border: false,

  callback: false,

  // closes the panel by pressing ESC key
  closeOnEscape: false,

  // contaner element to hold the panel
  container: 'body',

  // any panel content here:
  // DOM element
  // array of elements
  // HTML string
  // jQuery object
  // function that returns an HTML string, DOM element(s) or jQuery object 
  content: false,

  /* loads content via ajax:
     contentAjax: {
       url:            'url/to/load',
       autoload:       true,
       autoresize:     true,
       autoreposition: true
     }
  */
  contentAjax: false,

  /*loads iframe content to the panel
    contentIframe: {
      width:  1200,
      height: 950,
      src:    'iframe.html',
      id: 'myID',
      classname: 'myClass',
      name:   'myFrame',
      style:  {'border': '10px solid #000'}
    }
  */
  contentIframe: false,

  // CSS overflow property
  contentOverflow: 'hidden',

  // content size
  contentSize: {
    width: 400,
    /* do not replace with "400 200" */
    height: 200
  },

  // allows to set double-click handlers for header, content and footer
  dblclicks: false,

  // time to wait before closing the panel
  delayClose: 0,

  // jQuery UI draggable configs
  draggable: {
    handle: 'div.jsPanel-headerlogo, div.jsPanel-titlebar, div.jsPanel-ftr',
    opacity: 0.8
  },

  // built-in draggable configs
  dragit: {
    axis: false,
    containment: false,
    grid: false,
    handles: '.jsPanel-headerlogo, .jsPanel-titlebar, .jsPanel-ftr.active',
    // do not set .jsPanel-titlebar to .jsPanel-hdr
    opacity: 0.8,
    start: false,
    drag: false,
    stop: false,
    disable: false,
    disableui: false
  },

  // jQuery UI resizable configs
  resizable: {
    handles: 'n, e, s, w, ne, se, sw, nw',
    autoHide: false,
    minWidth: 40,
    minHeight: 40
  },

  // built-in draggable configs
  resizeit: {
    containment: false,
    grid: false,
    handles: 'n, e, s, w, ne, se, sw, nw',
    minWidth: 40,
    minHeight: 40,
    maxWidth: 10000,
    maxHeight: 10000,
    start: false,
    resize: false,
    stop: false,
    disable: false,
    disableui: false
  },

  // shows footer toolbar
  footerToolbar: false,

  // shows header controls
  headerControls: {
    close: false,
    maximize: false,
    minimize: false,
    normalize: false,
    smallify: false,
    controls: 'all',
    iconfont: 'jsglyph'
  },

  // shows header logo
  headerLogo: false,

  // allows to remove the panel header
  headerRemove: false,

  // header title
  headerTitle: 'jsPanel',

  // shows header toolbar
  headerToolbar: false,

  // unique ID
  id: function id() {
    return "jsPanel-".concat(jsPanel.id += 1);
  },

  // margins to maintain when maximized
  maximizedMargin: [5, 5, 5, 5],

  // change the default minimize behavior
  minimizeTo: true,

  // panel size
  panelSize: { width: 430, height: 270 }

  // 'modal', 'hint', 'tooltip'
  paneltype: false,

  // panel position
  /*{
      my: 'center',
      at: 'center',
      of: 'window',
      minLeft: undefined,
      minTop: undefined,
      maxLeft: undefined,
      maxTop: undefined,
      offsetX: 0,
      offsetY: 0,
      modify: false,
      fixed: 'true',
      autoposition: false
    }
  position: 'center',

  // RTL mode
  rtl: false,

  // sets the panel to maximized, minimized after panel was created
  setstatus: false,

  // applies an animation to the panel when inserted into the document
  show: false,

  // your own template here
  template: false,

  // built-in themes: 'default', 'primary', 'info', 'success', 'warning' or 'danger'
  // Bootstrap themes: "bootstrap-default", "bootstrap-primary", "bootstrap-info", "bootstrap-success", "bootstrap-warning" and "bootstrap-danger"
  // or any colors
  theme: 'default'
  
});

4.回调函数。

$.jsPanel({

  // a function or an array of functions
  // fired after the jsPanel was inserted into the document.
  callback: false,

  // fired before the jsPanel is closed
  onbeforeclose: function (panel) {
    // do something
  },

  // fired before the jsPanel is maximized
  onbeforemaximize: function (panel) {
    // do something
  },

  // fired before the jsPanel is minimized
  onbeforeminimize: function (panel) {
    // do something
  },

  // fired before the jsPanel is restored
  onbeforenormalize: function (panel) {
    // do something
  },

  // fired before the jsPanel is smallified/unsmallified
  onbeforesmallify: function (panel) {
    // do something
  },
  onbeforeunsmallify: function (panel) {
    // do something
  },

  // fired before the jsPanel is resized
  onbeforeresize: function (panel) {
    // do something
  },

  // fired after the jsPanel is closed
  onclosed: function (panel) {
    // do something
  },

  // fired after the jsPanel is maximized
  onmaximized: function (panel) {
    // do something
  },

  // fired after the jsPanel is minimized
  onminimized: function (panel) {
    // do something
  },

  // fired after the jsPanel is restored
  onnormalized: function (panel) {
    // do something
  },
  
  // fired after the jsPanel is resized
  onresized: function (panel) {
    // do something
  },

  // fired after the jsPanel is smallified/unsmallified
  onsmallified: function (panel) {
    // do something
  },
  onunsmallified: function (panel) {
    // do something
  },

  // fired on window resize
  onwindowresize: false

});

5.API方法。

// close the panel
instance.close();

// close all child panels
instance.closeChildpanels();  

// reload content
instance.contentReload(callback);

// resize content
instance.contentResize(callback);

// enable/disable dragit interaction
instance.dragit();

// bring the panel to the front
instance.front(callback);

// show/hide header controls
instance.headerControl(control [, action]);

// set/get header title
instance.headerTitle(title); 

// maximize the panel
instance.maximize(callback);  

// minimize the panel
instance.minimize(callback)  

// restore the panel
instance.normalize(callback);

// re-position the panel
instance.reposition(position, callback);  

// resize the panel
instance.resize(width, height [, callback]);

// enable/disable resizeit interaction
instance.resizeit();

// change the theme
instance.setTheme(theme, callback);  

// smallify the panel
instance.smallify(callback);

// add tootlbar
instance.toolbarAdd(location, toolbar [, callback]);

基本用法（v4）：

1.在网页上包含jsPanel插件和其他所需资源。

<!-- Core Stylesheet -->
<link rel="stylesheet" href="dist/jspanel.css">
<!-- Core JavaScript -->
<script src="dist/jspanel.js"></script>

<!-- optional extensions -->

<!-- Context Menu -->
<script src="dist/extensions/contextmenu/jspanel.contextmenu.js"></script>

<!-- Date Picker -->
<link rel="stylesheet" href="dist/extensions/datepicker/theme/default.css" />
<script src="dist/extensions/datepicker/jspanel.datepicker.js"></script>

<!-- Dialog -->
<link rel="stylesheet" href="dist/extensions/dialog/jspanel.dialog.css" />
<script src="dist/extensions/dialog/jspanel.dialog.js"></script>

<!-- Dock -->
<script src="dist/extensions/dock/jspanel.dock.js"></script>

<!-- Hint -->
<script src="dist/extensions/hint/jspanel.hint.js"></script>

<!-- Layout -->
<script src="dist/extensions/layout/jspanel.layout.js"></script>

<!-- Modal -->
<script src="dist/extensions/modal/jspanel.modal.js"></script>

<!-- Tooltip -->
<script src="dist/extensions/tooltip/jspanel.tooltip.js"></script>

2.或者将jsPanel作为ES模块导入。

// import main js
import { jsPanel } from './es6module/jspanel.min.js';

// import extensions as needed
import './es6module/extensions/contextmenu/jspanel.contextmenu.min.js';
import './es6module/extensions/datepicker/jspanel.datepicker.min.js';
import './es6module/extensions/dialog/jspanel.dialog.min.js';
import './es6module/extensions/dock/jspanel.dock.min.js';
import './es6module/extensions/hint/jspanel.hint.min.js';
import './es6module/extensions/layout/jspanel.layout.min.js';
import './es6module/extensions/modal/jspanel.modal.min.js';
import './es6module/extensions/tooltip/jspanel.tooltip.min.js';

3.创建一个基本面板。

jsPanel.create({
  // options here
});

4.使用以下选项自定义面板。

jsPanel.create({

  // adds additional close control to the panel
  addCloseControl: false,

  // animations you want to use
  animateIn: 'jsPanelFadeIn'
  animateOut: 'jsPanelFadeOut'

  // auto closes the panel after a timeout
  // sets a timeout here
  autoclose: false,

  // shows borders around the panel
  border: false,

  // border radius
  borderRadius: 6,

  // box shadow of the panel
  boxShadow: 3,

  // closes the panel by pressing ESC key
  closeOnEscape: false,

  // configs here
  config: {},

  // contaner element to hold the panel
  container: 'body',

  // any panel content here:
  // DOM element
  // array of elements
  // HTML string
  // jQuery object
  // function that returns an HTML string, DOM element(s) or jQuery object 
  content: false,

  /* loads content via ajax:
     contentAjax: {
       url:            'url/to/load',
       autoload:       true,
       autoresize:     true,
       autoreposition: true
     }
  */
  contentAjax: false,

  /*loads data via Fetch API
    contentFetch: {
      resource: 'content.html',
      bodyMethod: 'text',
      evalscripttags: true,
      autoresize: true,
      autoreposition: true,
      done: function (panel, response) {
        panel.content.innerHTML = response;
      },
      beforeSend: function (panel) {
        // ...
      },
    },
  */
  contentFetch: false,

  // CSS overflow property
  contentOverflow: 'hidden',

  // content size
  contentSize: {
    width: 400,
    /* do not replace with "400 200" */
    height: 200
  },

  // stores optional custom data
  data: null,

  // built-in draggable configs
  dragit: {
    axis: false,
    containment: false,
    cursor: 'move',
    disable: false,
    disableOnMaximized: true,
    grid: false, // Snaps the panel to a grid, e.g. [10, 10]
    handles: '.jsPanel-headerlogo, .jsPanel-titlebar, .jsPanel-ftr.active',
    // do not set .jsPanel-titlebar to .jsPanel-hdr
    opacity: 0.8,
    start: false, // function(panel, paneldata, event)
    drag: false, // function(panel, paneldata, event)
    stop: false, // function(panel, paneldata, event)
    drop: false // {dropZones:  ['.drop-demo .drop-target'], callback: function(panel, target, source) {...}}
    snap: {
      callback: (panel) => {
        // do something
      },
      snapLeftTop: (panel) => {
        // or boolean
      },
      snapCenterTop: (panel) => {
        // or boolean
      },
      snapRightTop: (panel) => {
        // or boolean
      },
      snapRightCenter: (panel) => {
        // or boolean
      },
      snapRightBottom: (panel) => {
        // or boolean
      },
      snapCenterBottom: (panel) => {
        // or boolean
      },
      snapLeftBottom: (panel) => {
        // or boolean
      },
      snapLeftCenter: (panel) => {
        // or boolean
      },
      containment: true,
      repositionOnSnap: true,
      resizeToPreSnap: true,
      sensitivity: 70,
      trigger: 'panel', // or 'pointer'
      active: 'both', // or 'inside'
    }
    
  },

  // shows footer toolbar
  footerToolbar: false,

  // shows header controls
  headerControls: {
    close: false,
    maximize: false,
    minimize: false,
    normalize: false,
    smallify: false,
    size: 'md',
    add: null // add custom controls here
  },

  // shows header logo
  headerLogo: false,

  // allows to remove the panel header
  header: true,

  // header title
  headerTitle: 'jsPanel',

  // add a header toolbar
  // String, Array, Node or Function
  headerToolbar: false,

  // Iconic Font You Want To Use
  // String or Array
  iconfont: false,

  // unique ID
  id: function id() {
    return "jsPanel-".concat(jsPanel.id += 1);
  },

  // margins to maintain when maximized
  maximizedMargin: [5, 5, 5, 5],

  // limits the dimensions of a maximized panel
  // e.g. maximizedMargin: [61, 5, 5, 5]
  maximizedMargin: 0,

  // change the default minimize behavior
  minimizeTo: true,

  // opacity
  opacity: undefined,

  // panel size
  panelSize: { width: 430, height: 270 }

  // 'standard', 'contextmenu', 'error'
  // 'hint', 'modal', 'tooltip'
  paneltype: false,

  // panel position
  /*{
      my: 'center',
      at: 'center',
      of: 'window',
      minLeft: undefined,
      minTop: undefined,
      maxLeft: undefined,
      maxTop: undefined,
      offsetX: 0,
      offsetY: 0,
      modify: false,
      autoposition: false
    }
  position: 'center',

  // built-in resizable configs
  resizeit: {
    containment: false,
    aspectRatio: false,
    grid: false,
    handles: 'n, e, s, w, ne, se, sw, nw',
    minWidth: 40,
    minHeight: 40,
    maxWidth: 10000,
    maxHeight: 10000,
    start: false,
    resize: false,
    stop: false,
    disable: false,
  },

  // RTL mode
  rtl: false,

  // 'maximized', 'minimized', 'smallified' or 'smallifiedmax'
  setstatus: false,

  // your own template here
  template: false,

  // sync 3 margin options
  syncMargins: false,

  // built-in themes: 'default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark' and 'none'
  // Bootstrap themes: "bootstrap-default", "bootstrap-primary", "bootstrap-info", "bootstrap-success", "bootstrap-warning" and "bootstrap-danger"
  // or any colors
  theme: 'default'
  
});

5.回调函数。

jsPanel.create({

  // a function or an array of functions
  // fired after the jsPanel was inserted into the document.
  callback: false,

  // fired before the jsPanel is closed
  onbeforeclose: function (panel, status, closedByUser) {
    // do something
  },

  // fired before the jsPanel is maximized
  onbeforemaximize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is minimized
  onbeforeminimize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is restored
  onbeforenormalize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is smallified/unsmallified
  onbeforesmallify: function (panel, status) {
    // do something
  },
  onbeforeunsmallify: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is resized
  onbeforeresize: function (panel, status, closedByUser) {
    // do something
  },

  // fired after the jsPanel is closed
  onclosed: function (panel, closedByUser) {
    // do something
  },

  // fired after a panel fronted
  onfronted: function(panel, status){
    // do something
  }

  // fired after the jsPanel is maximized
  onmaximized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is minimized
  onminimized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is restored
  onnormalized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is smallified/unsmallified
  onsmallified: function (panel, status) {
    // do something
  },
  onunsmallified: function (panel, status) {
    // do something
  },

  // fired after a panel's status changed
  onstatuschange: function(panel, status){
    // do something
  },

  // fired after parent element resized
  onparentresize: function (panel, parentsize) {
    // do something
  }

  // fired on window resize
  onwindowresize: function (event, panel) {
    // do something
  }
  
});

6.API方法。

// add a custom control to the controlbar
instance.addControl({
  html: '<span class="far fa-bars"></span>',
  name: 'menu',
  ariaLabel: '',
  handler: function(panel, control){
    panel.content.innerHTML = 'You clicked the "menu" control';
  },
  position: 1, // 1. smallify; 2. minimize; 3. normalize; 4. maximize; 5. close
  afterInsert: function(control){
    // do with the control whatever is needed ...
  }
});

// converts a DOMString to a DocumentFragment
instance.strToHtml(str);

// place: 'header' or 'footer'
instance.addToolbar(place, toolbar [, callback]);

// close the panel
instance.close();

// close all child panels
instance.closeChildpanels();  

// remove all content from the content section of the panel the method was called on
instance.contentRemove([callback]);

// enable/disable dragit interaction
instance.dragit();

// bring the panel to the front
instance.front(callback);

// return a NodeList (versions < 4.5.0 returned an array) with all childpanels of the panel the method was called on
instance.getChildpanels(callback);

// check if is child panel
instance.isChildpanel(callback);

// maximize the panel
instance.maximize(callback);  

// minimize the panel
instance.minimize(callback)  

// restore the panel
instance.normalize(callback);

// check where a panel is positioned relative to reference and return an object
instance.overlaps(reference[, elmtBox, event]);

// re-position the panel
instance.reposition(position, callback);  

// resize the panel
instance.resize(width, height [, callback]);

// enable/disable resizeit interaction
instance.resizeit();

// set CSS border of an existing panel.
instance.setBorder(value);  

// set CSS border-radius of an existing panel.
instance.setBorderRadius(value);  

// disables, enables, removes, hides or shows a control from an existing panel
// Control: "close", "maximize", "normalize", "minimize" or "smallify"
// action: "remove", "hide", "disable", "enable", "show"
instance.setControlStatus(control, action [, callback]);  

// set header logo
instance.setHeaderLogo(logo [, callback]);

// set header title
instance.setHeaderTitle(title [, callback]);

// change the theme
instance.setTheme(theme, callback);  

// smallify the panel
instance.smallify(callback);

// unsmallify a panel
instance.unsmallify([callback]);

7.财产。

// panel content
instance.content

// controls
panel.controlbar

// returns the element the panel can be dropped into or false
drag: function() {
  this.content.innerHTML = '<p>#' + this.droppableTo.id + '</p>';
}

// Returns a string like 'left-top' with the position a panel can snap to
drag: function () {
  this.content.innerHTML = '<p>panel.snappableTo is: ' + this.snappableTo + '</p>';
},

// Returns a string like 'left-top' with the position a panel actually snapped to
stop: function () {
  this.content.innerHTML = '<p>panel.snapped is: ' + this.snapped + '</p>';
},

// footer content
instance.footer

// header content
instance.header

// headerbar content
instance.headerbar

// header logo
instance.headerlogo

// header title
instance.headertitle

// header title
instance.headertitle

// header toolbar content
instance.headertoolbar

// returns the configuration object of a panel after the panel defaults were merged with the configuration
instance.options

// returns a string with the current status of an existing panel.
instance.status

// titlebar
instance.titlebar

8.事件。

// fired whenever a panel is fronted
document.addEventListener('jspanelfronted', handler, false);

// fired when the panel is fully rendered
document.addEventListener('jspanelloaded', handler, false);

// fired before a panel is closed
document.addEventListener('jspanelbeforeclose', handler, false);

// fired befor a panel is maximized
document.addEventListener('jspanelbeforemaximize', handler, false);

// fired befor a panel is minimize
document.addEventListener('jspanelbeforeminimize', handler, false);

// firedbefor a panel is normalized
document.addEventListener('jspanelbeforenormalize', handler, false);

// fired befor a panel is smallified
document.addEventListener('jspanelbeforesmallify', handler, false);

// fired befor a panel is unsmallified
document.addEventListener('jspanelbeforeunsmallify', handler, false);

// fired after a panel is closed
document.addEventListener('jspanelclosed', handler, false);

// fired after a panel is closed by user
document.addEventListener('jspanelcloseduser', handler, false);

// fired after a panel is maximized
document.addEventListener('jspanelmaximized', handler, false);

// fired after a panel is minimized
document.addEventListener('jspanelminimized', handler, false);

// fired after a panel is normalized
document.addEventListener('jspanelnormalized', handler, false);

// fired after a panel is smallified
document.addEventListener('jspanelsmallified', handler, false);

// fired after a maximized panel is smallified
document.addEventListener('jspanelminimized', handler, false);

// fired whenever a panel changes its status
document.addEventListener('jspanelstatuschange', handler, false);

// fired when start dragging
document.addEventListener('jspaneldragstart', handler, false);

// fired when dragging
document.addEventListener('jspaneldrag', handler, false);

// fired when stop dragging
document.addEventListener('jspaneldragstop', handler, false);

// fired when start resizing
document.addEventListener('jspanelresizestart', handler, false);

// fired when resizing
document.addEventListener('jspanelresize', handler, false);

// fired when stop resizing
document.addEventListener('jspanelresizestop', handler, false);

更新日志：

版本4.16.0（2022-07-05）

• 添加了对话框扩展。这个扩展为几乎任何jsPanel添加了一个易于使用的对话框元素界面。它还提供了一个modal（）函数来创建模态对话框，以及alert（）、confirm（）和prompt（）函数。jsPanel.dialog是由Michael Daumling开发和维护的第三方扩展。
• 添加了用于设置带有选项的自定义主题的对象。主题现在也接受属性bgFooter、colorFooter和borderRadius
• 添加了方法jsPanel.getCssVariableValue（）来处理选项主题、边界、borderRadius和方法.setTheme（）、.setBorder（）、setBorderRadius（）中的css变量
• 更新了内部方法.getThemeDetails（）、.applyCustomTheme（）和.pOborder（），以支持在option.theme、option.border、option.borderRadius和方法.setTheme（）、.setBorder（）、setBorderRadius（）中使用css变量
• 整个脚本中重新组织的代码

版本4.15.0（2022-05-31）

• 添加选项css，将自定义css类添加到面板的html模板中，包括更新的css文件jspanel.css/jspanel.min.css
• 一些内部代码改进

版本4.14.1（2022-05-18）

• 修复了最大化面板：在最大化面板的resizestart上，其状态现在重置为“normalized”，normalize控件被隐藏，最大化控件再次显示。

版本4.14.0（2022-04-21）

• 方法中的错误修复（在已经关闭的面板上调用close（）导致错误）
• 窗口调整上的更新选项
• 已更新参数设置选项

v4.13.0 (2021-11-25)

• 启用了指针事件API的默认使用
• 添加了方法jsPanel.usePointerEvents（）以禁用/启用PointerEvent API

v4.12.0 (2021-07-10)

• 更新了CSS文件以错误修复option.minimizeTo中的一个小问题
• resizeit交互中的错误修复
• 已将字符串值“closed”添加到面板属性状态。由于从DOM中移除了一个封闭的面板，因此只有在保存面板引用时，该值才可用。
• 添加了使用自定义回调函数作为option.closeOnEscape设置的选项，而不仅仅是布尔值true/false

v4.11.4 (2021-04-10)

• dragit交互中的错误修复
• 改进了面板定位、拖动和捕捉功能，以便允许滚动条
• 将选项parentPanelFront添加到工具提示配置选项中（工具提示扩展已更新到v1.4.0）

v4.11.3 (2021-02-04)

• 修复了resizeit交互代码中的错误，减少了内存泄漏。
• 修复了使用对接扩展插件对接面板时的错误：
• bugfix布局扩展：jsPanel.layout.restoreId现在返回还原的面板
• 在上下文菜单扩展中添加了参数closeOnMouseleave

版本4.11.2（2020-12-09）

• 修复了dragit交互代码中的错误，减少了内存泄漏

版本4.11.1（2020-11-23）

• maximize（）方法中的错误修复

v4.11.0稳定（2020-11-20）

• 将面板属性autocloseProgressbar重命名为progressbar。为了兼容性，旧的属性名称仍然可用。
• 修复了windowresize选项中的错误
• js和css的各种内部改进

v4.11.0测试版（2020-06-17）

• 添加了将DOMString转换为DocumentFragment的方法jsPanel.strToHtml（str）。
• 添加的选项不透明度
• 修复了模式扩展中有关使用onclosed回调的错误。
• 修复了选项位置的自动定位参数中的错误。
• 更新了jsPanel.ajax（），以提高其作为通用ajax工具的可用性。
• 如果您使用jsPanel.ajax（）和/或选项contentAjax，则此更新可能需要更改代码。
• 更新了jsPanel.fetch（），以提高其作为通用fetch工具的可用性。
• 如果您使用jsPanel.fetch（）和/或选项contentFetch，则此更新可能需要更改代码。
• 更新的选项contentAjax可选地只加载一个页面片段。
• 更新了控制栏的CSS
• 更新后的标题现在封装在＜div＞中，而不是＜span＞
• 由于jsPanel.ajax（）中的更改，更新了contextenu扩展。
• 内部更新了扩展坞。不应影响现有代码。
• 禁止使用指针事件API。因此，目前面板控件和dragit/reszeit交互只使用触摸和鼠标事件。

版本4.10.1（2020-05-01）

• 已修复Bug

版本4.10.1（2020-04-09）

• option.position的自动定位功能中的错误修复
• 更新的日期选择器扩展

版本4.10.0（2020-03-10）

• resizeit功能中的错误修复
• 修复了最小化面板中关于标题徽标的CSS问题
• 添加了方法jsPanel.toggleClass（）
• 添加的选项数据
• 更新的布局扩展
• 更新了所有jsPanel事件（jspanelroaded、jspanelclosed等）现在都可以取消

版本4.9.5（2020-02-02）

• 修复了使用修饰符键时选项resizeit参数aspectRatio中的错误
• 修复/改进了一些小代码问题

第4.9.3/4版（2020-01-16）

• 修复了package.json的一个问题

第4.9.2版（2020-01-15）

• 更新的事件jspanelcolosed和jspanelcoCloseduser
• 更新的扩展坞：如果主面板和从面板中的任何一个位于前面，那么它们将获得相同的z索引值。扩展中的重新编码事件处理。
• 更新了面板模板以修复IE11的问题

第4.9.1版（2019-12-12）

• 修复文件夹es6module的js文件中的一个拼写错误

第4.9.0版（2019-12-10）

• 添加了jsPanel事件：实现了引用触发事件的面板的事件属性面板
• 已添加dragit.snap参数处于活动状态
• 添加了几乎所有选项dragit和resizeit参数，现在可以对现有面板进行编辑
• 添加的选项maximizedMargin现在可以对现有面板进行编辑
• 添加了dragit.drop的第一个实现，允许将面板从其当前父元素移动到另一个父元素
• 为resizeit交互添加了SHIFT修改键操作
• 更新的选项resizeit修改键功能
• 更新的选项dragit和resizeit：开始、拖动/调整大小和停止回调现在接收相同的参数paneldata（而不是args position/size）和css left、top、width和height数据
• 改进了对内容的处理Size:“auto”/panelSize:与自动关闭结合使用时的“auto
• 已修复Bug

第3.11.3版（2019-11-27）

• 面板控件和内置dragit/reszeit交互的使用仅限于鼠标左键（如果使用鼠标）。

4.8.0 (2019-11-08)

• 修复了选项resizeit和面板方法resize（）中的错误
• 方法jsPanel.close（）中的错误修复
• 为选项resizeit的参数aspectRatio添加了设置“content”，以便在调整面板大小时保持内容部分的纵横比
• 为选项iconfont添加了对字体真棒双色调图标的支持
• 为调整大小功能添加了修改键
• 模态扩展中更新的z索引处理
• 在拖动/调整面板大小时更新内容部分中iframe的处理
• 更新的事件序列：jspanelcoloseduser现在在jspanelconnected之前被激发
• 更新选项onclosed回调接收第二个参数closedByUser，如果面板被用户操作关闭，则该参数设置为true
• 如果面板被用户操作关闭，则更新选项onbeforecluse回调接收第三个参数closedByUser设置为true
• 由于更新了方法jsPanel.close（）而更新了模态扩展

4.7.0 (2019-06-18)

• 选项dragit中的错误修复
• 选项resizeit中的错误修复
• 方法normalize（）中的错误修复
• 方法resize（）中的错误修复
• jsPanel.addScript（）中的错误修复
• 上下文菜单扩展中的错误修复
• dock扩展中的错误修复
• 完全重新编码的处理选项位置的方法
• 完全重新编码windowresize和parentresize上的选项
• added选项addCloseControl可向
• 面板（如果删除了标题部分，可能会很方便）
• 为选项自动关闭添加了一个可自定义的进度条
• added方法addControl（）将自定义控件添加到现有面板的控制栏
• 添加了工具提示方法remove（），以便删除触发特定工具提示的处理程序
• 添加了polyfill Number.isIInteger（）以支持IE11
• 更新了选项headerControls，以便添加自定义控件
• 选项主题：当使用主题：“none”或方法setTheme（）时
• 通过选项border和/或borderRadius指定的属性保持不变
• 重新设计控件的SVG图标
• 更新的方法setBorder（）和setBorderRadius（）现在可用于
• 现有面板，以便设置/更改CSS border/borderRadius
• 更新的选项border和borderRadius
• 更新的工具提示扩展：由于新的定位方法
• 更新布局扩展：添加了sessionStorage的可选使用，而不是localStorage
• 更新的提示扩展：由于更新了标头控件
• 各种内部错误修复

4.6.0 (2019-03-27)

• 修复了option.dragit.snap中有关触发器使用的错误：“pointer”
• 关于jspaneldragstop/jspanelresizestop事件的错误修复
• 方法front（）中的错误修复
• 工具提示扩展中的错误修复
• 添加了主题修饰符“filledark”
• 为选项headerControls添加了参数大小，以便设置控件的大小
• 向方法overlaps（）添加了更多的返回值
• 添加了jsPanel.errorReporting以关闭/打开错误jsPanel报告
• 各种小的修复和改进

4.5.0 (2019-02-12)

• jsPanel现在使用指针事件（如果支持的话）
• bugfix-重新编码了完整的close（）函数来修复一个长期存在的错误
• jsPanel.position（）中关于dock扩展使用的错误修复
• minimize（）中关于使用图像作为背景的错误修复
• 选项dragit中的错误修复
• 工具提示扩展中的错误修复
• 其他内置主题
• 更新的内置主题颜色
• 所有内置主题现在都是“普通”的颜色主题，没有CSS
• 重新编码的引导程序主题支持-不再需要在jspanel.css中进行引导程序调整
• 选项主题现在可以与对象一起使用作为值——更多的主题化选项和更好的图像支持（包括css渐变）作为面板背景
• 重新设计了内置控件图标，相应地更新了CSS，并更改了控件的悬停效果
• 在parentpall的各种调整大小操作上，添加了parentresize选项以自动存储子面板
• 在beforemaximize、onmaximized等调用中添加了参数状态。
• 向面板方法setControlStatus（）参数操作添加了参数选项“hide”和“show”
• 在面板方法getChildpanels（）中添加了可选的回调函数，该方法现在返回NodeList（而不是数组）
• 为面板方法isChildpanel（）添加了可选的回调函数
• 添加了对在位置简写字符串中设置option.position.of的支持
• js和css中的各种小修复/改进

4.4.0 (2018-11-30)

• 添加了主题修改器fillcolor以指定内容部分的自定义背景颜色
• 更新的选项边框接受选项主题可用的所有颜色名称
• 更新的方法.overlaps（）
• 选项resizeit中的错误修复
• 修复了windowresize选项中的错误
• 修复了关于windowresize选项的选项dragit中的错误
• 选项dragit/resizeit中更新的开始、停止、拖动/调整大小回调现在额外获取事件对象作为参数
• 为String.protype.includes（）添加了polyfill
• 添加了CommonJS模块导出

4.3.0 (2018-11-11)

• 添加了使用标头控件关闭面板时激发的事件jspanelcloseduser
• 添加了面板方法.overlaps（）
• 为选项resizeit添加了参数aspectRatio
• 更新了面板方法.close（）-它现在有一个返回值，这取决于面板是否成功关闭
• option.container默认值更改为“window”。当使用container:dococument.body时，这可能需要对现有代码进行更改，尽管这是以前的默认设置
• option.maximizedMargin现在接受函数作为值
• option.theme支持从材料设计颜色系统派生的颜色名称，如“bluegray700”、“orangeA400”等。
• 选项position、dragit和resizeit现在使用css transform:scale（）正确定位、拖动和调整附加到容器的面板的大小（如果容器和面板都已缩放）
• 全局颜色方法中的错误修复
• css和js中的各种调整

4.2.1 (2018-09-15)

• 已修复方法setHeaderLogo（）和setHeaderTitle（）中的问题-徽标和标题现在也在最小化替换中更新
• 修正了css中使用超长标题文本时仅涉及IE11的问题（控件被挤出面板边界）
• 修复选项dragit和resizeit
• added：选项位置的所有参数现在都接受一个函数作为值

4.1.2 (2018-08-13)

• 修复了选项dragit和resizeit中的问题-当鼠标光标位于jsPanel内容部分的＜object＞标记上时，处理程序未解除绑定
• 添加对模态背景的点击将关闭模态jsPanel
• 更改了选项。对于模态jPanel，默认情况下将closeOnEscape设置为true

4.1.1 (2018-07-26)

• 修复了jspanel.min.js，使其能够与IE11配合使用
• 修复了CSS和JS，以提高与Bootstrap的兼容性>4.1.2
• 修复应用任意主题的内部函数
• 替换了文件夹es6module中的一些错误文件

4.1.0 (2018-07-24)

• 改进的方法.smallify（）
• 添加了方法jsPanel.addScript（）以便向文档中添加脚本
• 添加的选项borderRadius将css边框半径应用于面板
• 当使用鼠标拖动/调整大小时，面板的所有控件现在都限制在鼠标左键
• 已修复IE

4.0.0 (2018-05-23)

• dock扩展中的错误修复
• 修复了创建最小化替换的函数中的错误
• option resizeit minWidth和minHeight的默认值设置为128
• css和js中的各种调整

4.0.0-贝塔.5（2018-04-19）

• 新事件jspaneldragstart、jspaneldrag、jspaneldragstop、jspanelresizesart、jspaneresize、jspaneleresizestop
• 新的扩展dock使用.dock（）方法扩展jsPanel。该方法允许将一个或多个从面板停靠到主面板。基本上，这意味着从面板与停靠的主面板一起被拖动、最大化、标准化、最小化、关闭，并可选择调整大小。
• 选项dragit中的错误修复
• 扩展布局中的错误修复
• jspanel.css中的错误修复
• CSS中从右到左面板的错误修复
• 从主题中删除了CSS边框半径设置

v3.11.1 (2017-11-22)

• 触摸设备上的dragit/reszeit选项现在可以与触摸和鼠标配合使用
• 标题徽标现在也是默认的拖动手柄

v3.11.0（2017年10月22日）

• option.position用参数minLeft、maxLeft、minTop和maxTop扩展
• 当面板内容包括一个或多个iframe时，修复了选项dragit和resizeit中的错误
• 各种小错误修复

v3.10.0（2017年8月19日）

• 添加了选项dragit和resizeit回调开始、拖动/调整大小和停止接收带有位置/大小对象的第二个参数
• 为选项.dragit添加了参数disableOnMaximized
• 改进了dragit和resizeit选项在移动设备上的兼容性

v3.9.3（2017年7月17日）

• 在某些浏览器上，固定面板没有出现在点击标题部分

v3.9.2（2017年6月28日）

• 修复了option.dragit与option.onwindowresize结合使用的问题
• 修复了选项dragit/resizeit的问题（当开始拖动或调整大小操作或单击标题部分时，面板现在正确地位于前面）
• 修复了optio.reszeit中的问题（在某些情况下面板“粘”在鼠标上）
• 修正了：当jsPanel的内容部分包含另一个包含DTD、HTML标记等的文档时，在使用内置的dragit/resizeit交互拖动/调整面板大小后，面板有时会“粘”到鼠标光标上

v3.9.0（2017年6月17日）

• 修正了：当jsPanel的内容部分包含另一个包含DTD、HTML标记等的文档时，在使用内置的dragit/resizeit交互拖动/调整面板大小后，面板有时会“粘”到鼠标光标上

v3.9.0（2017年5月29日）

• jsPanel脚本现在也可以在调用$.noConflict（）后工作
• 添加：用于选项dragit和resizeit的新网格选项
• 改进了对传递给$.jsPanel（）的选项对象的处理
• 通过butternut创建的缩小的js文件

v3.8.1（2017年5月10日）

• 修复了使用option.position.of时option.dragit和option.resizeit中的错误

v3.8.0（2017年4月26日）

• 添加：option.panelSize以设置整个面板的尺寸（option.contentSize仅设置内容部分的尺寸）
• 添加了：方法jsPanel.contextenu（elmt，config），可以轻松地将jsPanel用作上下文菜单
• 添加了：方法.dragit（）和.reszeit（）来禁用/重新启用现有面板的dragit/reszeit交互
• 添加：参数“disable”到选项dragit和resizeit中，以创建面板，并初始化dragit或resizeit交互，但在重新启用之前禁用
• 添加：可以通过设置option完全关闭定位。定位为一个评估为false的值
• 添加：参数autoresize和autoposition到option.contentAjax
• 已修复：option.maximizedMargin属性现在在使用对象时接受0个值
• 改进了对移动设备（尤其是Android）的支持，包括内置的可拖动和可调整大小的交互（option.dragit和option.reszeit）
• 改进了对option.contentSize.width/height的支持，当与options.contentAjax一起使用时，将其设置为“auto”
• CSS和一些内部方法的改进

v3.7.0（2017年3月02日）

• 悬停内置主题控件时css颜色的小调整
• option.headerControls：添加了使用控件自定义图标集的选项
• css：添加了flexbox供应商前缀
• 移除了聚乙烯填充物

第3.6.1版（2017-02-08）

• 修复了使用以空格分隔的类名列表添加时内部函数生成页眉/页脚工具栏中的错误

v3.6.0 (2017-02-03)

• css各种小调整
• js各种小调整
• 修复了负责应用主题的内部函数中的错误
• option.show中的错误修复
• new option.closeOnEscape为单个面板而不是全局jsPanel.closeOnEscape启用closeOnEscape

版本3.5.0（2016-12-08）

• css修复仅影响子面板（附加到其他面板的内容部分的面板）
• 用于最小化替换的css调整，没有页眉/页脚部分的面板
• 标题徽标的css/js调整
• option.template现在也可以在与option.config一起使用的预定义配置中工作
• option.maximizedMargin现在也接受作为数组传递的配置
• option.maximizedMargin数组可用于同步maximizedMargin、option.dragit.convironment和option.resizeit.convtainment
• new：option.position参数false完全跳过定位
• jsPanel.closeOnEscape现在也接受字符串“closeparent”来直接关闭父面板

第3.4.1版（2016年11月4日）

• 修复了选项.border中的错误
• 为方法.resize（）添加了新的参数resize，以便允许传递内容节大小而不是面板大小的值
• 一些内部代码改进

第3.4.0版（2016年10月28日）

• .setTheme（）和option.theme现在可以与none值一起使用。创建一个全白色面板，不应用任何与主题相关的类/样式
• .setTheme（）和option.theme为Bootstrap主题添加了对Material Design的支持
• .close（）添加了参数skipOnbeforeClose和skipOnclosed
• new option.minimizeTo允许指定最小化面板附加到的容器，或完全阻止创建最小化替换
• 新选项.delayClose允许在关闭面板时设置延迟（当您想在面板实际移除之前应用动画时很有用）
• 新选项.border现在支持传递一个边框颜色来覆盖主题颜色，否则主题颜色将被用作边框颜色
• 新增：支持控件的材质图标
• 各种内部代码更改和小错误修复

v3.3.1（2016年9月17日）

• 错误修复：在版本3.3.0中，一些工具提示连接器没有背景颜色，具体取决于配置
• 代码：在js开发文件（jquery.jspanel.js）中，大多数出现的标准字符串串联都被模板文本所取代

v3.3.0（2016年9月12日）

• 修改了页眉部分（包括页眉工具栏）和页脚工具栏的CSS。如果您使用页眉和/或页脚工具栏，则可能需要更改您应用的自定义css。
• new option.headerLogo将徽标添加到面板的左上角

v3.2.0（2016年8月26日）

• 新选项。nwindowresize允许启用面板对窗口大小调整事件的响应
• method.reposition（）现在支持重新定位工具提示（包括连接器）
• 大量内部代码改进

v3.1.1（2016年7月25日）

• Bugfix:控件在某些移动浏览器上不起作用。

v3.1.0（2016年7月13日）

• 更好地支持对宽度/高度值使用“auto”
• .resize（）现在可以选择接受一个包含以下道具的配置对象：width、height、minwidth、maxwidth、minheight、maxheight和callback
• 调用不带任何参数的.resize（）与调用.resize（config）相同，其中所有配置参数都设置为默认值

3.0.1版（2016年6月25日）

• 方法maximize（）。方法现在可以被调用，即使面板已经被最大化。在IE11和EDGE中提供更好的支持
• 方法close（）已改进
• option.onmaximized回调已从方法smallify（）中删除
• option.onnormalized回调已从方法smallify（）中删除，并在用鼠标调整大小后删除
• 仅水平调整大小的小型面板的错误修复
• 修复IE11中最小化面板的错误
• 全局jsPanel对象的新属性：如果浏览器是MS IE11，则jsPanel.isIE为true；如果浏览器是MS EDGE，jsPanel.isEdge为true。

v3.0.0（2016年6月13日）

• 使用一些ES2015/ES2016功能。下载包中包含一个使用Babel转换到ES5的JavaScript文件。
• 页眉和页脚部分使用CSS flex
• 具有其他语法的全新定位函数
• 全新的事件处理
• 不再支持IE<=10

v2.6.1版本（2016-01-24）

• 修复了使用数字0作为左侧或顶部值时option.position中的错误
• new option.onberechecke在jsPanel关闭之前执行一个函数。如果函数返回false，面板将不会关闭。
• new option.onbeforemaximize在jsPanel最大化之前执行一个函数。如果函数返回false，面板将不会最大化。
• 新选项.onbeforeminimize在jsPanel最小化之前执行一个函数。如果函数返回false，面板将不会最小化。
• new option.onbeforenormalize在jsPanel正常化之前执行一个函数。如果函数返回false，面板将不会正常化。
• new option.onclosed在jsPanel关闭后执行一个函数。
• new option.onmaximized在jsPanel最大化之后执行一个函数。
• new option.onminimized在最小化jsPanel之后执行一个函数。
• new option.onnormalized在jsPanel规范化之后执行一个函数。

2015-10-08

• v2.5.5版本：bugfix option.ajax（无论何时创建jsPanel，都会导致不必要的get请求）

关于作者：

作者：Flyer53

主页：http://jspanel.de/

预览截图

创建多功能浮动面板 jsPanel