侧滑边栏区域

右侧滑动出现侧边栏的功能，主要是为了提供给用户用以新增修改时用，类似于做修改弹窗，这里给大家提供了 `lyear-right-box-sm`、`lyear-right-box-lg`、`lyear-right-box-xl` 、`lyear-right-box-xxl` 四个宽度。

![](/uploads/images/20211228/1986a138171736421e96425237e4d916.png)

新增样式：
```css
.lyear-right-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    background-color: #fff;
    width: 300px;
    max-width: calc( 100% - 50px);
    position: fixed;
    top: 0;
    bottom: 0;
    right: -300px;
    z-index: 999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    will-change: transform;
}
.lyear-right-box.lyear-right-box-sm {
	width: 220px;
	right: -220px
}
.lyear-right-box.lyear-right-box-lg {
	width: 420px;
	right: -420px
}
.lyear-right-box.lyear-right-box-xl {
	width: 640px;
	right: -640px
}
.lyear-right-box.lyear-right-box-xxl {
	width: 860px;
	right: -860px
}
.lyear-right-box.lyear-right-box-open {
	right: 0;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
}
.lyear-right-box-header {
    position: relative;
	padding: 0 20px;
	min-height: 68px !important;
	border-bottom: 1px solid #ebebeb
}
.lyear-right-box-header .lyear-right-box-close {
    position: absolute;
    top: 20px;
    right: 20px;
	margin-left: 16px;
	font-size: 16px;
    cursor: pointer;
}
.lyear-right-box-title {
	letter-spacing: .5px;
    line-height: 68px;
}
.lyear-right-box-body {
    height: -moz-calc(100% - 127px);
    height: -webkit-calc(100% - 127px);
    height: calc(100% - 127px);
    position: relative;
}
/*遮罩层*/
.lyear-right-box-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.5);
}
.p-20 {
    padding: 20px;
}
.lyear-right-box-footer {
	padding: 10px 20px;
	border-top: 1px solid #ebebeb
}
```
新增JS：
```javascript
$(document).ready(function(){
    new PerfectScrollbar('.lyear-right-box-body', {
		swipeEasing: false,
		suppressScrollX: true
	});
    
    $(document).on('click', '[data-toggle="lyear-right-box"]', function(e) {
        e.preventDefault();
        var target = $(this).data('target');

if (target == false) {
            closeBox($(target).closest('.lyear-right-box'));
        } else {
            if ( $(target).hasClass('lyear-right-box-open') ) {
                closeBox($(target).closest('.lyear-right-box'));
            } else {
                $(target).addClass('lyear-right-box-open').after('<div class="lyear-right-box-backdrop" data-target="'+ target +'"></div>');;
            }
        }
    });
    
    $(document).on('click', '.lyear-right-box-backdrop', function(){
        var target = $(this).data('target');
      
        closeBox($(target).closest('.lyear-right-box'));
    });
  
    $(document).on('click', '.lyear-right-box-close', function(){
        var boxObj = $(this).closest('.lyear-right-box');
        
        closeBox(boxObj);
    });
    
    /**
     * 关闭方法
     * @param object e box对象
     */
    var closeBox = function(e) {
        $(e).removeClass('lyear-right-box-open');
        $('.lyear-right-box-backdrop').remove();
    }
    
    $(document).on('click', '#add-form', function() {
        // ajax后端交互，成功后关闭box
        alert('添加成功');
        var target = $(this).data('target');
        closeBox($(target).closest('.lyear-right-box'));
    });
});
```
下面就是在页面中的使用了，整个侧边栏的html结构这里不完全粘贴出来。
```html
<div class="lyear-right-box lyear-right-box-xl" id="my-box">
	
  <footer class="lyear-right-box-footer">
    <button type="submit" class="btn btn-primary" id="add-form" data-target="#my-box">添 加</button>
  </footer>
</div>
```
可以看到，最外层的 `div` 中，`lyear-right-box` 是必须的，`lyear-right-box-xl` 是用来指定宽度的，你可以改成其他的宽度（见最上面），id的设定是很重要的，你可以自己修改成自己的名字，但是需要记住的是，后面绑定到按钮的时候，需要指定你的id名字，可以看到后面 `footer` 中按钮上 的`data-target`。
```html
<button type="button" class="btn btn-default" data-toggle="lyear-right-box" data-target="#my-box">打开右侧区域</button>
```
`data-toggle="lyear-right-box"` 的写法固定，`data-target` 便是你指定你id名字的了，记住：要带上 `#` 。

插件项目中页面名字：`test_siderbar.html` `test_siderbar_v4.html`

[点击查看 侧滑边栏区域 在线演示](http://example.itshubao.com/example/131.html "点击查看 侧滑边栏区域 在线演示")