js抽屉drawer插件

用作：

　　1. 从侧边栏滑入滑出需要展示的内容

介绍：

　　1. 插件遵循了UMD通用模块定义规范，能够在各种js环境下运行

　　2. 依赖jQuery

　　3. 插件可进行配置各项参数，具体如下注释部分

　　4. 插件暴露了open、close方法，用于打开和关闭抽屉

使用：

　　1. 在html中定义抽屉中需要展示的内容，并放置在最外层元素下　　

　　2. 页面加载完成之后，获取定义的元素，并调用drawer方法初始化插件，同时保存返回的drawer实例

　　3. 调用open方式展开抽屉

代码：

　　css（drawer.css）

.drawer {
    width: 0;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: block!important;
}
.drawer.right {
    right: 0;
}
.drawer.active {
    width: 100%;
}
.drawer-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=45);
    transition: opacity .3s linear;
}
.drawer-mask-show {
    background-color: rgba(0,0,0,.45);
}
.drawer.active .drawer-mask {
    opacity: 1;
}
.drawer-content {
    height: 100%;
    background-color: #fff;
    box-shadow: none;
    transition: transform .3s cubic-bezier(.7,.3,.1,1), box-shadow .3s cubic-bezier(.7,.3,.1,1);
    position: absolute;
    top: 0;
}
.drawer.left .drawer-content {
    transform: translateX(-100%);
    box-shadow: 2px 0 8px rgba(0,0,0,.15);
}
.drawer.right .drawer-content {
    right: 0;
    transform: translateX(100%);
    box-shadow: -2px 0 8px rgba(0,0,0,.15);
}
.drawer.active .drawer-content{
    transform: none;
}
.drawer-content-header {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #e8e8e8;
}
.drawer-content-title {
    color: rgba(0,0,0,.85);
    font-weight: 600;
    font-size: 16px;
    margin: 0 20px;
}
.drawer-close {
    position: absolute;
    top: 0;        
    right: 20px;
    font-size: 22px;
    cursor: pointer;
}
.drawer-content-body {
    padding: 24px;
    max-height: calc(100% - 104px);
    overflow: auto;
}
.drawer-content-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsla(0,0%,100%,0);
}
.drawer-content-body::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #cfd6dd;
}

 

　　js（drawer.js）

/**
 * 自定义drawer抽屉插件
 * created by mengbing  2020/12/28
 * 
 * 属性：
 *        placement: 抽屉方向，可选值'left'/'right'，默认'left'
 *         width: drawer的宽度，类型String，默认250px
 *         closable: 是否显示右上角关闭按钮，类型Boolean，默认true
 *        mask: 是否展示遮罩，类型Boolean，默认true
 *      maskClosable: 点击遮罩是否允许关闭，类型Boolean，默认true
 *      title: 标题，类型String
 *         afterOpenCallback: 打开抽屉后回调方法，类型function
 *        afterCloseCallback: 关闭抽屉后回调方法，类型function
 *         
 * 方法：
 *        open: 打开抽屉
 *       close: 关闭抽屉
 */
;(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }
}(function ($) {
    var mDrawer = {
        // 初始化drawer
        init (options) {
            var _this = $(this)
            mDrawer.el = _this

            var defaultOptions = {
                placement: 'left',
                width: '250px',
                closable: true,
                mask: true,
                maskClosable: true
            }
            $.extend(true, defaultOptions, options || {})
            mDrawer.options = defaultOptions

            // 获取目标元素内容并移除
            var contentBody = _this.addClass('drawer ' + defaultOptions.placement).children().remove()

            // mask
            var drawerMask = $('<div>', {
                class: 'drawer-mask'
            })
            _this.append(drawerMask)
            // 是否显示mask
            if (defaultOptions.mask) {
                drawerMask.addClass("drawer-mask-show")
            }
            // 点击mask是否允许关闭
            if (defaultOptions.maskClosable) {
                drawerMask.click(function() {
                    mDrawer.close()
                })
            }

            // 构建drawer内容
            var drawerContent = $('<div>', {
                class: 'drawer-content',
                style: 'width: ' + defaultOptions.width
            })
            _this.append(drawerContent)

            if (defaultOptions.closable || defaultOptions.title) {
                var drawerContentHeader = $('<div>', {
                    class: 'drawer-content-header'
                })
                drawerContent.append(drawerContentHeader)

                if (defaultOptions.title) {
                    var drawerContentTitle = $('<div>', {
                        class: 'drawer-content-title',
                        text: defaultOptions.title
                    })
                    drawerContentHeader.append(drawerContentTitle)
                }

                if (defaultOptions.closable) {
                    var drawerClose = $('<div>', {
                        class: 'drawer-close',
                        text: '×'
                    })
                    drawerContentHeader.append(drawerClose)

                    drawerClose.click(function() {
                        mDrawer.close()
                    })
                }
            }

            var drawerContentBody = $('<div>', {
                class: 'drawer-content-body'
            })
            contentBody.appendTo(drawerContentBody)
            drawerContent.append(drawerContentBody)

            return mDrawer
        },
        // 打开抽屉
        open () {
            this.el.addClass("active")
            this._runCallback(this.options.afterOpenCallback)
        },
        // 关闭抽屉
        close () {
            this.el.removeClass("active")
            this._runCallback(this.options.afterCloseCallback)
        },
        // 调用回调函数
        _runCallback (callback) {
            if (!callback) return

            if (typeof callback === 'function') {
                try {
                    callback()
                } catch(e) {
                    console.error('回调函数调用失败：', e)
                }
            } else {
                console.error('callback is not a function')
            }
        }
    }
    
    $.fn.drawer = function (options) {
        return mDrawer.init.call(this, options)
    };
}))

 

　　html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽屉</title>
</head>
<link rel="stylesheet" type="text/css" href="./mDrawer.css">
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
        overflow: hidden;
    }
</style>
<body>
    <div id="drawer">
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
        <div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div><div>我是内容</div>
    </div>
    <button onclick="opena()">打开抽屉</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="./mDrawer.js"></script>
<script type="text/javascript">
    var mDrawer
    window.onload = function() {
        mDrawer = $('#drawer').drawer({
            placement: 'right',
            width: '450px',
            title: '标题标题',
            afterOpenCallback: function () {
                console.log("open了");
            }
        })
    }

    function opena() {
        mDrawer.open()
    }
</script>
</html>