侧滑边栏区域

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

新增样式：

.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：

$(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结构这里不完全粘贴出来。

<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。

<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

点击查看 侧滑边栏区域 在线演示