成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

先去官網下載最新的js http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js

觸發彈層的事件可自由綁定，如：

$('#id').on('click', function(){ 
  layer.msg('test'); 
}); 

下面主要貼出上述例子的調用代碼：

【信息框】：

layer.alert('白菜級別前端攻城師賢心', 8); //風格一 
layer.msg('前端攻城師賢心'); //風格二 
//當然，遠遠不止這兩種風格。 
 

【詢問框】：

$.layer({ 
  shade: [0], 
  area: ['auto','auto'], 
  dialog: { 
    msg: '您是如何看待前端開發？', 
    btns: 2,           
    type: 4, 
    btn: ['重要','奇葩'], 
    yes: function(){ 
      layer.msg('重要', 1, 1); 
    }, no: function(){ 
      layer.msg('奇葩', 1, 13); 
    } 
  } 
}); 
//還可用layer.confirm()快捷調用 
 

【頁面層一】

$.layer({ 
  type: 1, 
  shade: [0], 
  area: ['auto', 'auto'], 
  title: false, 
  border: [0], 
  page: {dom : '.layer_notice'} 
}); 
 

【頁面層二】

var pageii = $.layer({ 
  type: 1, 
  title: false, 
  area: ['auto', 'auto'], 
  border: [0], //去掉默認邊框 
  shade: [0], //去掉遮罩 
  closeBtn: [0, false], //去掉默認關閉按鈕 
  shift: 'left', //從左動畫彈出 
  page: { 
    html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我從左邊來，我自定了風 格。</p><button id="pagebtn" class="btns" onclick="">關閉< /button></div>' 
  } 
}); 
//自設關閉 
$('#pagebtn').on('click', function(){ 
  layer.close(pageii); 
}); 
 

【iframe層一】

$.layer({ 
  type: 2, 
  shadeClose: true, 
  title: false, 
  closeBtn: [0, false], 
  shade: [0.8, '#000'], 
  border: [0], 
  offset: ['20px',''], 
  area: ['1000px', ($(window).height() - 50) +'px'], 
  iframe: {src: 'http://f2e.sentsin.com/chat'} 
});  
 

【iframe層二】

layer.tips('5秒后右下角窗口自動關閉，并生成一個新的iframe', this, { 
  time: 5, 
  maxWidth: 260 
}); 
$.layer({ 
  type: 2, 
  closeBtn: false, 
  shadeClose: true, 
  shade: [0.1, '#fff'], 
  border: [0], 
  time: 5, 
  iframe: { 
    src: 'test/guodu.html' 
  }, 
  title: false, 
  area: ['300px','250px'], 
  shift: 'right-bottom', 
  end: function(){ 
    $.layer({ 
      type : 2, 
      title: '賢心博客 - sentsin.com', 
      shadeClose: true, 
      maxmin: true, 
      fix : false,  
      area: ['1024px', 500],            
      iframe: { 
        src : 'http://sentsin.com/' 
      }  
    }); 
  } 
}); 
 

【加載層一】

layer.load(3); 
 

【加載層二】

layer.load('加載帶文字', 3); 
 

【tips層一】

layer.tips('tips的樣式并非是固定的，您可自定義外觀。', this, { 
  style: ['background-color:#78BA32; color:#fff', '#78BA32'], 
  maxWidth:185, 
  time: 3, 
  closeBtn:[0, true] 
}); 
 

【tips層二】

layer.tips('默認沒有關閉按鈕', this , {guide: 1, time: 2}); 
 

【輸入/文件層】

//普通文本 
layer.prompt({title: '您的名字？'}, function(name){ 
  alert(name); 
}); 
//密碼文本 
layer.prompt({title: '輸入任何口令，并確認',type: 1}, function(pass){ 
  alert(pass); 
}); 
//文件上傳 
layer.prompt({title: '隨便上傳個東東，并確認',type: 2}, function(file){ 
  alert(file); 
}); 
//多行文本 
layer.prompt({title: '隨便寫點啥，并確認',type: 3}, function(val){ 
  alert(val); 
}); 
 

【tab層】

layer.tab({ 
  area: ['1000px', '500px'], 
  data: [ 
    {title: 'Say', content:'Hi，Main'}, 
    {title: '無題', content:'支持html傳入'}           
  ] 
}); 
 

【相冊層】

//此處為異步請求模式，具體的json格式，請等待文檔更新?；蛘吣阒苯油ㄟ^請求看photos.json 
var conf = {}; 
$.getJSON('ajax地址', {}, function(json){ 
  conf.photoJSON = json; //保存json，以便下次直接讀取內存數據 
  layer.photos({ 
    html: '這里傳入自定義的html，也可以不用傳入（這意味著不會輸出右側區域）。相冊支持左右方向鍵、Esc關閉', 
    json: json 
  }); 
});