LayUI open和confirm使用

1、layUi.open

• 功能描述

  layer.open 根據type不同，類型也就不一樣,有五種類型：
   0（信息框，默認）
   1（頁面層）
   2（iframe層）
   3（加載層）
   4（tips層）
  其實工作開發中用的最多的就是1、2這兩種類型了，這里就只介紹這兩種，其他的可以參考官網例子

• 頁面層（type：1）：彈出層展示的是某個定義好的頁面元素

  layer.open({
      type: 1 //Layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）,
      title: 'title here',   //標題
      area: ['390px', '330px'],   //寬高
      shade: 0.4,   //遮罩透明度
      content: $("#test"),//支持獲取DOM元素
      btn: ['確定', '取消'], //按鈕組
      scrollbar: false ,//屏蔽瀏覽器滾動條
      yes: function(index){//layer.msg('yes');    //點擊確定回調
          layer.close(index);
          showToast();
      },
      btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////點擊取消回調
          layer.msg('bbb');//layer.closeAll();
      }

• iframe層(type:2)：彈出層直接調用其他地方的頁面

  實例1：
  layer.open({
        type: 2, //Layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
        shade:0.1, //遮罩層透明度
        area:['850px','500px'], //彈出層寬高
        title:'材料庫',//彈出層標題
        content: 'xx/xx.jsp' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
      });
  實例2：
   layer.open({
                    type: 2, //類型，解析url
                    closeBtn: 1, //關閉按鈕是否顯示 1顯示0不顯示
                    title: title, //頁面標題
                    shadeClose: true, //點擊遮罩區域是否關閉頁面
                    shade: 0.8,  //遮罩透明度
                    area: ['900px', '500px'],  //彈出層頁面比例
                    content: '${ctx}/manage/classPlan/courseList?isOnline='+type  //彈出層的url
              }); 
  實例3：
      layer.open({
          type : 2,
          title : '增加',
          maxmin : true,
          shadeClose : false, // 點擊遮罩關閉層
          area : [ '800px', '520px' ],
          content : prefix + '/add' // iframe的url
      });

2、Layer.confirm

• 功能描述：點擊【確定】按鈕，默認執行下面function()中的方法，點擊【取消】按鈕，則直接關閉確認框，具體示例如下：

  實例1：
  function remove(id) {
      layer.confirm('確定要刪除選中的記錄？', {
          btn : [ '確定', '取消' ]
      }, function() {
          $.ajax({
              url : prefix + "/remove",
              type : "post",
              data : {
                  'id' : id //傳入參數
              },
              success : function(r) {
                  if (r.code == 0) {
                      layer.msg(r.msg);
                      reLoad();
                  } else {
                      layer.msg(r.msg);
                  }
              }
          });
      })
  }
  實例2
  layer.confirm('您確定要刪除這條數據嗎？', {
  btn: ['確定','取消'] //按鈕
  }, function()
  {
  layer.closeAll('dialog');
  $.ajax({
  type: "post",
  url: "${pageContext.request.contextPath}/cuishou/delete",
  data: {
  "id": id
  },
  success : function(data){
   
  }
  });
  });
  
  layer.closeAll('dialog');  點擊確定關閉提示框