jsPanel是一款可以拖拽和最大化最小化的多功能浮动面板jQuery插件。该面板使用了jQuery UI的功能，它可以和Bootstrap或Foundation框架结合使用，功能非常强大。
该面板可以作为浮动面板，可拖拽面板，可缩放面板，模态窗口，提示对话框来使用。通过配置参数可以在顶部或底部设置面板工具栏。它支持从右向左的文字书写，支持13种不同的主题效果。
可以通过npm或bower来安装jsPanel浮动面板插件。
bower install jspanel
pm install jspanel
jsPanel要求jQuery2.0以上版本，jQuery UI ≥ 1.9.2(建议使用1.11.4版本)，jQuery UI Touch Punch用于移动触摸的支持。
调用jsPanel
可以通过$.jsPanel();方法来创建一个最基本的jsPanel面板。
$.jsPanel();
得到类似下图的效果：
也可以在创建面板的同时传入一些配置参数：
$.jsPanel({
contentAjax: {
url: 'files/summits.html',
autoload: true,
done: function(){
this.content.mCustomScrollbar({
theme: 'dark',
scrollButtons:{ enable: true }
contentSize: {width: 550, height: 300},
theme: 'royalblue filledlight',
headerTitle: 'Some peaks I climbed',
callback: function() {
this.content.css('padding', '10px');
得到类似下图的效果：
jsPanel浮动面板插件的默认配置参数如下：
$.jsPanel.defaults = {
"autoclose": false,
"border": false,
"callback": false,
"container": 'body',
"content": false,
"contentAjax": false,
"contentIframe": false,
"contentOverflow": 'hidden',
"contentSize": {
width: 400,
height: 200
"custom": false,
"dblclicks": false,
"draggable": {
handle: 'div.jsPanel-hdr, div.jsPanel-ftr',
opacity: 0.8
"footerToolbar": false
"headerControls": {
buttons: true,
iconfont: 'jsglyph',
close: false,
maximize: false,
minimize: false,
normalize: false,
smallify: false
"headerRemove": false,
"headerTitle": 'jsPanel',
"headerToolbar": false,
"id": () => `jsPanel-${jsPanel.ID += 1}`,
"maximizedMargin": {
top: 5,
right: 5,
bottom: 5,
left: 5
"onbeforeclose": false,
"onbeforemaximize": false,
"onbeforeminimize": false,
"onbeforenormalize": false,
"onclosed": false,
"onmaximized": false,
"onminimized": false,
"onnormalized": false,
"onfronted": false,
"paneltype": false,
"position": {
elmt: jsP,
my: 'center',
at: 'center'
"resizable": {
handles: 'n, e, s, w, ne, se, sw, nw',
autoHide: false,
minWidth: 40,
minHeight: 40
"rtl": false,
"setstatus": false,
"show": false,
"template": false,
"theme": 'bluegrey'
// deviating defaults for modal jsPanels
$.jsPanel.modaldefaults = {
"draggable": "disabled",
"headerControls": {buttons: "closeonly"},
"position": {
my: 'center',
at: 'center'
"resizable": "disabled",
// deviating defaults for jsPanel tooltips
$.jsPanel.tooltipdefaults = {
"draggable": "disabled"
"headerControls": {buttons: "closeonly"},
"position": {fixed: false},
"resizable": "disabled",
// deviating defaults for jsPanel hints
$.jsPanel.hintdefaults = {
"autoclose": 8000,
"draggable": "disabled"
"headerControls": {buttons: "closeonly"},
"resizable": "disabled",
要改变这些全局的默认配置参数可以在创建jsPanel对象时以同名参数来覆盖默认参数。如果你希望font-awesome字体图标作为面板的默认图标，可以使用下面的方法来修改配置参数：
$.jsPanel.defaults.headerControls.iconfont = 'font-awesome';
jsPanel的可用事件和方法请参考它的官方主页：http://jspanel.de/。
jsPanel是一款可以拖拽和最大化最小化的多功能浮动面板jQuery插件。该面板使用了jQuery UI的功能，它可以和Bootstrap或Foundation框架结合使用，功能非常强大。该面板可以作为浮动面板，可拖拽面板，可缩放面板，模态窗口，提示对话框来使用。通过配置参数可以在顶部或底部设置面板工具栏。它支持从右向左的文字书写，支持13种不同的主题效果。安装可以通过npm或bower来安装j...
一个用于创建多功能
浮动
面板
的
jQuery
插
件。
jsPanel可用作
浮动
，可
拖
动和可调整大小的
面板
，模式，工具提示甚至提示。 配置选项包括用于页眉和/或页脚部分的其他工具栏，从右到左文本方向的支持，内置的引导程序支持，13个主题等等。
各种选项允许以灵活的方式向jsPanel添加内容，包括AJAX支持。
现有的jsPanel节和内容可以通过各种属性轻松访问。 方法和事件提供了与之的交互。
不要错过jsPanel版本4
jsPanel主页： ://jspanel.de
API和示例： :
更多文档： :
bower install jspanel
npm install jspanel
由于到目前为止我还没有使用过Angular，所以我不能说太多关于在Angular中使用jsPanel的事情。 尽管如此，我可以这样说：
仅加载Angula
<%@ pagelanguage="java" contentType="text/
html
; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE
html
PUBLIC "-//W3C//DTD
HTML
4.01 Transitional//EN""http://www.w3.org/TR/
html
4/loose.
悬浮控件示例：
<input type="text" value="" style="border:1px solid groove;left:100px;top:100px;opacity:.5"/>
很短,很有用…
这里所说的动态
插入
，是指用JS的append()方式追加元素内容，而不是静态写在
HTML
里面。
为什么会用到这种方式呢？比如登录框。有些网站在大部分页面都有登录按钮，如果是用Bootstrap的模态框调用的话，常规方式都是写在
HTML
里面，这就不太方便后期修改，因为你一旦要修改就要动到很多个页面！
这里也不多说什么了，先看效果图：
这里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1
var loginModal = " <div class=\"modal fade
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-...
你可以使用 CSS 中的
浮动
属性来实现
HTML
上下
浮动
面板
效果。首先，在
HTML
中创建两个 div 元素作为
面板
，然后使用 CSS 设置它们的样式和
浮动
属性。
以下是一个简单的示例代码：
```
html
<!DOCTYPE
html
>
<style>
.panel {
width: 200px;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
.panel1 {
float: left;
.panel2 {
float: right;
</style>
</head>
<div class="panel panel1">
<p>
面板
1</p>
<div class="panel panel2">
<p>
面板
2</p>
</body>
</
html
>
在上面的代码中，我们创建了两个带有 "panel" 类的 div 元素，并分别给它们添加了 "panel1" 和 "panel2" 类。通过设置 "panel1" 类的
浮动
属性为左
浮动
，"panel2" 类的
浮动
属性为右
浮动
，这样它们就会分别向左和向右
浮动
，呈现上下排列的效果。
你可以根据自己的需求调整
面板
的样式和尺寸。希望这个示例能帮助到你！如有更多问题，请随时提问。
