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/。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!