摘要：//初體驗(yàn) layer.alert('內(nèi)容') //第三方擴(kuò)展皮膚 layer.alert('內(nèi)容', {   icon: 1,   skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴(kuò)展。關(guān)于皮膚的擴(kuò)展規(guī)則，去這里查閱 })

//初體驗(yàn)
layer.alert('內(nèi)容')
//第三方擴(kuò)展皮膚
layer.alert('內(nèi)容', {
  icon: 1,
  skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴(kuò)展。關(guān)于皮膚的擴(kuò)展規(guī)則，去這里查閱
})
//詢(xún)問(wèn)框
layer.confirm('您是如何看待前端開(kāi)發(fā)？', {
  btn: ['重要','奇葩'] //按鈕
}, function(){
  layer.msg('的確很重要', {icon: 1});
}, function(){
  layer.msg('也可以這樣', {
    time: 20000, //20s后自動(dòng)關(guān)閉
    btn: ['明白了', '知道了']
  });
});
//提示層
layer.msg('玩命提示中');
//墨綠深藍(lán)風(fēng)
layer.alert('墨綠風(fēng)格，點(diǎn)擊確認(rèn)看深藍(lán)', {
  skin: 'layui-layer-molv' //樣式類(lèi)名
  ,closeBtn: 0
}, function(){
  layer.alert('偶吧深藍(lán)style', {
    skin: 'layui-layer-lan'
    ,closeBtn: 0
    ,anim: 4 //動(dòng)畫(huà)類(lèi)型
  });
});
//捕獲頁(yè)
layer.open({
  type: 1,
  shade: false,
  title: false, //不顯示標(biāo)題
  content: $('.layer_notice'), //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
  cancel: function(){
    layer.msg('捕獲就是從頁(yè)面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', {time: 5000, icon:6});
  }
});
//頁(yè)面層
layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上邊框
  area: ['420px', '240px'], //寬高
  content: 'html內(nèi)容'
});
//自定頁(yè)
layer.open({
  type: 1,
  skin: 'layui-layer-demo', //樣式類(lèi)名
  closeBtn: 0, //不顯示關(guān)閉按鈕
  anim: 2,
  shadeClose: true, //開(kāi)啟遮罩關(guān)閉
  content: '內(nèi)容'
});
//tips層
layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');
//iframe層
layer.open({
  type: 2,
  title: 'layer mobile頁(yè)',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: 'mobile/' //iframe的url
}); 
//iframe窗
layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不顯示關(guān)閉按鈕
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角彈出
  time: 2000, //2秒后自動(dòng)關(guān)閉
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動(dòng)條
  end: function(){ //此處用于演示
    layer.open({
      type: 2,
      title: '很多時(shí)候，我們想最大化看，比如像這個(gè)頁(yè)面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //開(kāi)啟最大化最小化按鈕
      area: ['893px', '600px'],
      content: '//fly.layui.com/'
    });
  }
});
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風(fēng)格，支持0-2
//loading層
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一個(gè)tips，只不過(guò)我長(zhǎng)得跟之前那位稍有些不一樣。', '吸附元素選擇器', {
  tips: [1, '#3595CC'],
  time: 4000
});
//prompt層
layer.prompt({title: '輸入任何口令，并確認(rèn)', formType: 1}, function(pass, index){
  layer.close(index);
  layer.prompt({title: '隨便寫(xiě)點(diǎn)啥，并確認(rèn)', formType: 2}, function(text, index){
    layer.close(index);
    layer.msg('演示完畢！您的口令：'+ pass +'<br>您最后寫(xiě)下了：'+text);
  });
});
//tab層
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '內(nèi)容1'
  }, {
    title: 'TAB2', 
    content: '內(nèi)容2'
  }, {
    title: 'TAB3', 
    content: '內(nèi)容3'
  }]
});
//相冊(cè)層
$.getJSON('test/photos.json?v='+new Date, function(json){
  layer.photos({
    photos: json //格式見(jiàn)API文檔手冊(cè)頁(yè)
    ,anim: 5 //0-6的選擇，指定彈出圖片動(dòng)畫(huà)類(lèi)型，默認(rèn)隨機(jī)
  });
});

批改老師：滅絕師太批改時(shí)間：2018-11-29 14:13:51
老師總結(jié)：layui簡(jiǎn)單易上手，搭建模塊速度很快，要盡快熟練組件奧！