js抽屉drawer插件
用作：
1. 从侧边栏滑入滑出需要展示的内容
介绍：
1. 插件遵循了UMD通用模块定义规范，能够在各种js环境下运行
2. 依赖jQuery
3. 插件可进行配置各项参数，具体如下注释部分
4. 插件暴露了open、close方法，用于打开和关闭抽屉
使用：
1. 在html中定义抽屉中需要展示的内容，并放置在最外层元素下
2. 页面加载完成之后，获取定义的元素，并调用drawer方法初始化插件，同时保存返回的drawer实例
3. 调用open方式展开抽屉
代码：
css（drawer.css）
1 .drawer { 2 width: 0; 3 height: 100%; 4 position: fixed; 5 top: 0; 6 z-index: 1000; 7 display: block!important; 8 } 9 .drawer.right { 10 right: 0; 11 } 12 .drawer.active { 13 width: 100%; 14 } 15 .drawer-mask { 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 100%; 20 height: 100%; 21 opacity: 0; 22 filter: alpha(opacity=45); 23 transition: opacity .3s linear; 24 } 25 .drawer-mask-show { 26 background-color: rgba(0,0,0,.45); 27 } 28 .drawer.active .drawer-mask { 29 opacity: 1; 30 } 31 .drawer-content { 32 height: 100%; 33 background-color: #fff; 34 box-shadow: none; 35 transition: transform .3s cubic-bezier(.7,.3,.1,1), box-shadow .3s cubic-bezier(.7,.3,.1,1); 36 position: absolute; 37 top: 0; 38 } 39 .drawer.left .drawer-content { 40 transform: translateX(-100%); 41 box-shadow: 2px 0 8px rgba(0,0,0,.15); 42 } 43 .drawer.right .drawer-content { 44 right: 0; 45 transform: translateX(100%); 46 box-shadow: -2px 0 8px rgba(0,0,0,.15); 47 } 48 .drawer.active .drawer-content{ 49 transform: none; 50 } 51 .drawer-content-header { 52 height: 55px; 53 line-height: 55px; 54 border-bottom: 1px solid #e8e8e8; 55 } 56 .drawer-content-title { 57 color: rgba(0,0,0,.85); 58 font-weight: 600; 59 font-size: 16px; 60 margin: 0 20px; 61 } 62 .drawer-close { 63 position: absolute; 64 top: 0; 65 right: 20px; 66 font-size: 22px; 67 cursor: pointer; 68 } 69 .drawer-content-body { 70 padding: 24px; 71 max-height: calc(100% - 104px); 72 overflow: auto; 73 } 74 .drawer-content-body::-webkit-scrollbar { 75 width: 6px; 76 height: 6px; 77 background-color: hsla(0,0%,100%,0); 78 } 79 .drawer-content-body::-webkit-scrollbar-thumb { 80 border-radius: 3px; 81 background-color: #cfd6dd; 82 }
js（drawer.js）
1 /** 2 * 自定义drawer抽屉插件 3 * created by mengbing 2020/12/28 4 * 5 * 属性： 6 * placement: 抽屉方向，可选值'left'/'right'，默认'left' 7 * width: drawer的宽度，类型String，默认250px 8 * closable: 是否显示右上角关闭按钮，类型Boolean，默认true 9 * mask: 是否展示遮罩，类型Boolean，默认true 10 * maskClosable: 点击遮罩是否允许关闭，类型Boolean，默认true 11 * title: 标题，类型String 12 * afterOpenCallback: 打开抽屉后回调方法，类型function 13 * afterCloseCallback: 关闭抽屉后回调方法，类型function 14 * 15 * 方法： 16 * open: 打开抽屉 17 * close: 关闭抽屉 18 */ 19 ;(function (factory) { 20 if (typeof define === 'function' && define.amd) { 21 define(['jquery'], factory); 22 } else if (typeof exports === 'object') { 23 module.exports = factory(require('jquery')); 24 } else { 25 factory(jQuery); 26 } 27 }(function ($) { 28 var mDrawer = { 29 // 初始化drawer 30 init (options) { 31 var _this = $(this) 32 mDrawer.el = _this 33 34 var defaultOptions = { 35 placement: 'left', 36 width: '250px', 37 closable: true, 38 mask: true, 39 maskClosable: true 40 } 41 $.extend(true, defaultOptions, options || {}) 42 mDrawer.options = defaultOptions 43 44 // 获取目标元素内容并移除 45 var contentBody = _this.addClass('drawer ' + defaultOptions.placement).children().remove() 46 47 // mask 48 var drawerMask = $('', { 49 class: 'drawer-mask' 50 }) 51 _this.append(drawerMask) 52 // 是否显示mask 53 if (defaultOptions.mask) { 54 drawerMask.addClass("drawer-mask-show") 55 } 56 // 点击mask是否允许关闭 57 if (defaultOptions.maskClosable) { 58 drawerMask.click(function() { 59 mDrawer.close() 60 }) 61 } 62 63 // 构建drawer内容 64 var drawerContent = $('', { 65 class: 'drawer-content', 66 style: 'width: ' + defaultOptions.width 67 }) 68 _this.append(drawerContent) 69 70 if (defaultOptions.closable || defaultOptions.title) { 71 var drawerContentHeader = $('', { 72 class: 'drawer-content-header' 73 }) 74 drawerContent.append(drawerContentHeader) 75 76 if (defaultOptions.title) { 77 var drawerContentTitle = $('', { 78 class: 'drawer-content-title', 79 text: defaultOptions.title 80 }) 81 drawerContentHeader.append(drawerContentTitle) 82 } 83 84 if (defaultOptions.closable) { 85 var drawerClose = $('', { 86 class: 'drawer-close', 87 text: '×' 88 }) 89 drawerContentHeader.append(drawerClose) 90 91 drawerClose.click(function() { 92 mDrawer.close() 93 }) 94 } 95 } 96 97 var drawerContentBody = $('', { 98 class: 'drawer-content-body' 99 }) 100 contentBody.appendTo(drawerContentBody) 101 drawerContent.append(drawerContentBody) 102 103 return mDrawer 104 }, 105 // 打开抽屉 106 open () { 107 this.el.addClass("active") 108 this._runCallback(this.options.afterOpenCallback) 109 }, 110 // 关闭抽屉 111 close () { 112 this.el.removeClass("active") 113 this._runCallback(this.options.afterCloseCallback) 114 }, 115 // 调用回调函数 116 _runCallback (callback) { 117 if (!callback) return 118 119 if (typeof callback === 'function') { 120 try { 121 callback() 122 } catch(e) { 123 console.error('回调函数调用失败：', e) 124 } 125 } else { 126 console.error('callback is not a function') 127 } 128 } 129 } 130 131 $.fn.drawer = function (options) { 132 return mDrawer.init.call(this, options) 133 }; 134 }))html
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>抽屉title> 6 head> 7 <link rel="stylesheet" type="text/css" href="./mDrawer.css"> 8 <style type="text/css"> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 html,body { 14 height: 100%; 15 overflow: hidden; 16 } 17 style> 18 <body> 19 <div id="drawer"> 20 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 21 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 22 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 23 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 24 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 25 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 26 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 27 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 28 <div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div><div>我是内容div> 29 div> 30 <button onclick="opena()">打开抽屉button> 31 body> 32 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">script> 33 <script type="text/javascript" src="./mDrawer.js">script> 34 <script type="text/javascript"> 35 var mDrawer 36 window.onload = function() { 37 mDrawer = $('#drawer').drawer({ 38 placement: 'right', 39 width: '450px', 40 title: '标题标题', 41 afterOpenCallback: function () { 42 console.log("open了"); 43 } 44 }) 45 } 46 47 function opena() { 48 mDrawer.open() 49 } 50 script> 51 html>