Jquery-drawer抽屉插件

基于bootstrap和jquery,自定义抽屉样式，pc端web程序常用左右侧抽屉样式，因此本示例不考虑上下侧的抽屉。

效果：

插件 ：

$.fn.extend({
    drawer: function (options) {
        var _this = $(this);
        var defaults = {
            title: "标题",//默认标题
            placement: "right",//left表示左侧滑出，right表示右侧滑出
            width: "300px" // drawer的样式
        }
        options = $.extend(defaults, options);
        options.style = `width:${options.width}; ${options.placement}:-${options.width};`;

        function showDrawer() {
            let css = {};
            css[options.placement] = "0";
            $("#" + _this.data("drawerid")).show().animate(css, "fast");
        }

        if (_this.data("drawerid")) {
            showDrawer();
            return;
        }

        let _guid = `drawere${guid()}`;
        _this.data("drawerid", _guid);//标记已经初始化，防止重复初始


        let aside = $("<aside>", {
            id: _guid,
            style: options.style,
            class: "drawer",
        });

        let head = $("<div>", {
            class: "clearfix",
            style: "font-size:20px"
        });
        head.append(`<div class="pull-left drawer-head">${options.title}</div>`);

        let btnClose = $("<i>", {
            class: "fa fa-remove",
            click: function () {
                let css = {};
                css[options.placement] = `-${options.width}`;
                $(this).parents('aside').animate(css, 'fast', function () { $(this).hide() });
            }
        });

        head.append($(`<div class="pull-right text-red pointer">`).append(btnClose));
        aside.append(head);
        let content = $("<div>", {
            class: "drawer-content"
        });
        content.append(_this);
        aside.append(content).appendTo("body");

        showDrawer();

    }
})
}(jQuery));

css:

.drawer {
    box-shadow: 
        0 8px 10px -5px rgba(0,0,0,.3),
        0 16px 24px 2px rgba(0,0,0,.3),
        0 6px 30px 5px rgba(0,0,0,.3);
    padding:10px;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    background-color:#fffee5;
    z-index: 1;
    display:none;
}
    .drawer .fa-remove {
        width: 24px;
        height: 24px;
        border: 1px solid #fff1a2;
        text-align: center;
        cursor: pointer;
    }
    .drawer .fa-remove:hover {
        color: #fff;
        background-color: #ff0000;
    }

用法：

//html
<div id="test"  >内容</div>

//js
$("#test").drawer({ title: "标题", width: "30%", placement: "left" });