Layer layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。 在與同類組件的比較中，layer總是能輕易獲勝。她儘可能地在以更少的代碼展現更強健的功能，且格外註重性能的提升、易用和實用性！ 如果，你初識la ...
Layer
layer 是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。
在與同類組件的比較中，layer 總是能輕易獲勝。她儘可能地在以更少的代碼展現更強健的功能，且格外註重性能的提升、易用和實用性！
如果，你初識layer，你對她不知所措，你甚至不知如何綁定事件… 那或許你應該用秒做單位，快速認識她吧~~
1
初識Layer
獲得 layer 文件包後，解壓並將 layer 整個文件夾 （不要拆分結構） 存放到你項目的任意目錄，使用時，只需引入 layer.js 與 Jquery即可。
// 引入好layer.js後，直接用即可 <script src="js/jquery-3.1.1.js"></script>
<script src="layer.js"></script>
<script>
layer.msg( 'hello');
</script>
2
看幾個信息框實例
① 簡單彈出一個提示層 $('#test1').on('click', function (){
layer.msg( 'hello');
});
② 信息框-1 layer.alert('見到你真的很高興', {icon: 6});
③ 信息框-2 layer.msg('你確定你很帥麽？', {
time: 0 // 不自動關閉
,btn: ['必須啊', '醜到爆']
,yes: function (index){
layer.close(index);
layer.msg( '雅蠛蝶 O.o', {
icon: 6
,btn: [ '嗷','嗷','嗷']
});
}
});
④ 頁面層-自定義
layer.open({
type: 1,
title: false ,
closeBtn: 0,
shadeClose: true ,
skin: 'yourclass',
content: '自定義HTML內容'
});
⑤ iframe層 layer.open({
type: 2,
title: false ,
area: [ '630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true ,
content: '//player.youku.com/embed/XMjY3MzgzODg0'
});
3
載入層
① 載入層-預設風格 layer.load();
② 旋轉樣式 layer.load(1);
③ 帶文字的
layer.msg('載入中', {
icon: 16
,shade: 0.01
});
4
Layer mobile
layer mobile是為移動設備（手機、平板等webkit內核瀏覽器/webview）量身定做的彈層UI。
採用原生 JavaScript編寫，所有並不依賴任何第三方庫。layer mobile完全獨立於PC版的layer。
OK！看幾個實例~
① 一個在底部彈出的完整對話框： layer.open({
title: [
'我是標題',
'background-color:#8DCE16; color:#fff;'
]
,anim: 'up'
,content: '展現的是全部結構'
,btn: [ '確認', '取消']
});
② 可以設置多長時間自動關閉：
layer.open({
content: '通過style設置你想要的樣式'
,style: 'background-color:#09C1FF; color:#fff; border:none;' // 自定風格
,time: 3
});
③ 自定義一個全屏的頁面層：
var pageii = layer.open({
type: 1
,content: html //新頁面
,anim: 'up'
,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});
④ 底部對話框 layer.open({
content: '這是一個底部彈出的詢問提示'
,btn: [ '刪除', '取消']
,skin: 'footer'
,yes: function (index){
layer.open({content: '執行刪除操作'})
}
});
layer 採用 MIT 開源許可證，他們是免費使用的。PC端彈窗解決用Lyaer是個不錯的選擇，大家可以去下載一個感受一下~~
