第一步:部署
下載layer後,把它部署到你項目中的任何一個目錄(當然,我們推薦放在前端相關目錄裏),你不能去挪動layer裏面的文件結構,因爲它們是不可拆散的組合。就像這樣:
第二步:引入
親愛的,你不必去管那些文件是幹嘛的,你只需要認準一個文件:layer.js 沒錯,當你試圖在頁面呈現layer的時候,你應該這樣去做:
第三步:使用
是時候目睹layer的挫樣了,由於她是基於jQuery,你可以選擇用jQuery的api方式去抒寫。當你想彈出一個layer實例的時候,你首先應該綁定事件,就像上面的那個例子。
彈出一個頁面層
<
!doctype html><
html><
head><
title>開始使用layer<
/title><
/head><
body> 你必須先引入jQuery1.8或以上版本<
script src="jQuery的路徑"><
/script><
script src="layer.js的路徑"><
/script><
script>
彈出一個iframe層
$('#parentIframe').on('click', function(){ layer.open({ type: 2, title: 'iframe父子操作', maxmin: true, shadeClose: true, //點擊遮罩關閉層 area : ['800px' , '520px'], content: 'test/iframe.html' }); });
彈出一個loading層
$('#test4').on('click', function(){ var ii = layer.load(); //此處用setTimeout演示ajax的回調 setTimeout(function(){ layer.close(ii); }, 1000); });
彈出一個tips層
彈出一個tips層
$('#test5').on('click', function(){ layer.tips('Hello tips!', '#test5'); });
文章來自:http://layer.layui.com/