当前位置：首页 > 网页特效 > 其他

可拖拽和最大化最小化的多功能浮动面板jQuery插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

演示免费下载

简介

jsPanel要求jQuery2.0以上版本，jQuery UI ≥ 1.9.2（建议使用1.11.4版本），jQuery UI Touch Punch用于移动触摸的支持。

#####  调用jsPanel
可以通过$.jsPanel();方法来创建一个最基本的jsPanel面板。

```html
$.jsPanel();        
```

也可以在创建面板的同时传入一些配置参数：

```html
$.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浮动面板插件的默认配置参数如下：

```javascript
$.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字体图标作为面板的默认图标，可以使用下面的方法来修改配置参数：

```javascript
$.jsPanel.defaults.headerControls.iconfont = 'font-awesome'; 
```

web299.com

可拖拽和最大化最小化的多功能浮动面板jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果