开发环境
Drawer 在 弹出层 UI 上带来不一样的体验.

## 显示代码

    								<script src="component/layui/layui.js"></script>
    								 并
    								<script src="component/pear/pear.js"></script>

抽屉

## 显示代码

    								layui.use(['drawer'], function() {
    									var drawer = layui.drawer;

    								    drawer.open({
    								        direction: "right",
    								        dom: ".layer-top",
    								        distance: "30%"
    								    });
    								})

进阶

## 显示代码

    								var dom;

    								$(".drawer-close-mask").click(function() {
    								    dom = drawer.open({
    								        direction: "right",
    								        dom: ".layer-close-mask",
    								        distance: "30%",
    								        maskClose: false
    								    });
    								})

    								$("#btnClose").click(function() {
    								    dom.close();
    								})

扩展

## 显示代码

    								layui.use(['drawer'], function() {
    									var drawer = layui.drawer;

    								    $(".drawer-auto-close").click(function() {
    								        dom = drawer.open({
    								            direction: "right",
    								            dom: ".layer-auto-close",
    								            distance: "30%",
    								            maskClose: false,
    								            time: 1000
    								        });
    								    })
    								})

扩展

## 显示代码

    								layui.use(['drawer'], function() {
    									var drawer = layui.drawer;

    								    $(".drawer-auto-close").click(function() {
    								        dom = drawer.open({
    								            direction: "right",
    								            dom: ".layer-auto-close",
    								            distance: "30%",
    								            success:function(){
    								                layer.msg("触发回调函数");
    								            }
    								        });
    								    })
    								})

扩展

## 显示代码

    									layui.use(['drawer'], function() {
    									  var drawer = layui.drawer;
    									    $("#targetDemo").click(function () {
    									      drawer.open({
    									      // 指定挂载节点
    									      target: "#targetEl"
    									      direction: "right",
    									      dom: ".layer-right",
    									      distance: "50%",
    									      });
    									})

基于 layer 的抽屉扩展

兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可

> 指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden; position: relative;"

> 使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。

## 显示代码

    											$("#layerDrawerLeft").click(function(){
    											  drawer.open({
    											    legacy: false,
    											    offset: 'l',
    											    area: "30%",
    											    content: "left内容",
    											  })
    											})
    											$("#layerDrawerRight").click(function () {
    											  drawer.open({
    											    legacy: false,
    											    offset: 'r',
    											    area: "30%",
    											    content: "right内容",
    											  })
    											})
    											$("#layerDrawerTop").click(function () {
    											  drawer.open({
    											    legacy: false,
    										      offset: "t",
    											    content: "top内容",
    											  })
    											})
    											$("#layerDrawerBottom").click(function () {
    											  drawer.open({
    											    legacy: false,
    											    offset: "b",
    											    content: "bottom内容",
    											  })
    											})

    											$("#layerDrawer").click(function () {
    											  var index = drawer.open({
    											    legacy: false,
    											    title: ['标题', 'font-size:16px;color:#2d8cf0'],
    											    maxmin: true,
    											    offset: "r",
    											    area: "30%",
    											    content: "抽屉内容",
    											    btn:"关闭",
    											    yes:function(index,layero){
    											      drawer.close(index);
    											      console.log(index,layero);
    											    },
    											    btnAlign: "l",
    											    closeBtn: 1,
    											  })
    											})

    											$("#layerDrawerParent").click(function () {

    											  var index = parent.layui.drawer.open({
    												    legacy: false,
    												    title: ['标题', 'font-size:16px;color:#2d8cf0'],
    												    maxmin: true,
    												    offset: "r",
    												    area: "30%",
    												    content: "抽屉内容",
    												    btn:"关闭",
    												    yes:function(index,layero){
    												      drawer.close(index);
    												      console.log(index,layero);
    												    },
    												    btnAlign: "l",
    												    closeBtn: 1,
    												})
    											})

    											$("#layertargetDemo").click(function () {
    											    drawer.open({
    											    legacy: false,
    											    target: "#layertargetEl",
    											    direction: "right",
    											    dom: ".layer-right",
    											    distance: "50%",
    											    });
    											})

    											$("#layerDrawerIframe").click(function () {
    											  drawer.open({
    											  legacy: false,
    											  title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
    											  offset: 'r',
    											  area: "80%",
    											   maxmin: true,
    											   closeBtn: 1,
    											   iframe: window.location.origin + "/view/document/table.html"
    											  })
    											})

    											$("#layerDrawerURL").click(function () {
    											   drawer.open({
    										     legacy: false,
    										     title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
    											   offset: 'r',
    											   area: "80%",
    											   maxmin: true,
    											   closeBtn: 1,
    											   url: window.location.origin + "/view/document/drawerFragment.html"
    											   })
    											})

### 左侧弹层内容...

### 右侧弹层内容...

### 上侧弹层内容...

### 下侧弹层内容...

### 点击右侧灰色区域

### 打开 2秒 后自动关闭...