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 height: 0%;
3 width: 100%;
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 1000;
8 }
9 .drawer.active {
10 height: 100%;
11 }
12 .drawer-mask {
13 position: absolute;
14 top: 0;
15 left: 0;
16 width: 100%;
17 height: 100%;
18 opacity: 0;
19 filter: alpha(opacity=45);
20 transition: opacity .3s linear;
21 }
22 .drawer-mask-show {
23 background-color: rgba(0,0,0,.45);
24 }
25 .drawer.active .drawer-mask {
26 opacity: 1;
27 }
28 .drawer-content {
29 height: 100%;
30 background-color: #fff;
31 box-shadow: none;
32 transition: transform .3s cubic-bezier(.7,.3,.1,1), box-shadow .3s cubic-bezier(.7,.3,.1,1);
33 position: absolute;
34 top: 0;
35 }
36 .drawer-content.left {
37 transform: translateX(-100%);
38 box-shadow: 2px 0 8px rgba(0,0,0,.15);
39 }
40 .drawer-content.right {
41 right: 0;
42 transform: translateX(100%);
43 box-shadow: -2px 0 8px rgba(0,0,0,.15);
44 }
45 .drawer.active .drawer-content{
46 transform: none;
47 }
48 .drawer-content-header {
49 height: 55px;
50 line-height: 55px;
51 border-bottom: 1px solid #e8e8e8;
52 }
53 .drawer-content-title {
54 color: rgba(0,0,0,.85);
55 font-weight: 600;
56 font-size: 16px;
57 margin: 0 20px;
58 }
59 .drawer-close {
60 position: absolute;
61 top: 0;
62 right: 20px;
63 font-size: 22px;
64 cursor: pointer;
65 }
66 .drawer-content-body {
67 padding: 24px;
68 max-height: calc(100% - 104px);
69 overflow: auto;
70 }
71 .drawer-content-body::-webkit-scrollbar {
72 width: 6px;
73 height: 6px;
74 background-color: hsla(0,0%,100%,0);
75 }
76 .drawer-content-body::-webkit-scrollbar-thumb {
77 border-radius: 3px;
78 background-color: #cfd6dd;
79 }
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').children().remove()
46
47 // mask
48 var drawerMask = $('<div>', {
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 = $('<div>', {
65 class: 'drawer-content ' + defaultOptions.placement,
66 style: 'width: ' + defaultOptions.width
67 })
68 _this.append(drawerContent)
69
70 if (defaultOptions.closable || defaultOptions.title) {
71 var drawerContentHeader = $('<div>', {
72 class: 'drawer-content-header'
73 })
74 drawerContent.append(drawerContentHeader)
75
76 if (defaultOptions.title) {
77 var drawerContentTitle = $('<div>', {
78 class: 'drawer-content-title',
79 text: defaultOptions.title
80 })
81 drawerContentHeader.append(drawerContentTitle)
82 }
83
84 if (defaultOptions.closable) {
85 var drawerClose = $('<div>', {
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 = $('<div>', {
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>
标签：function,插件,defaultOptions,js,content,drawer,内容,var 来源： https://www.cnblogs.com/mengbing/p/14205348.html