經(jīng)手幾個(gè)項(xiàng)目，還是感覺 Layer 用起來比較的輕松，你能想到的 Layer 都能幫你做到。
感謝 Layer 作者賢心，Layer 官網(wǎng)地址：http://layer.layui.com/
1. Layer 使用特點(diǎn)
Layer 具備全方位的解決方案，致力于服務(wù)各水平段的開發(fā)人員，讓頁面輕松地?fù)碛胸S富友好的操作體驗(yàn)。
Layer 盡可能地在以更少的代碼展現(xiàn)更強(qiáng)健的功能，注重性能的提升、易用和實(shí)用性.。
Layer 兼容了包括IE6在內(nèi)的所有主流瀏覽器。 數(shù)量可觀的接口，可以自定義需要的風(fēng)格，每一種彈層模式各具特色。
Layer 遵循LGPL協(xié)議，將永久性提供無償服務(wù)。
2. Web 項(xiàng)目引入 Layer
Layer 依賴 Jquery 強(qiáng)大的 DOM 操縱能力，所以引入 Layer 前記得引入 Jquery。
<script type="application/javascript" src="../smeui/plugins/jquery/jquery-3.1.0.min.js"></script><script type="application/javascript" src="../smeui/plugins/layer-2.4/layer.js"></script>
Layer 效果展示
<div><p>layer demo</p><button id="msg">layer msg</button><button id="content">layer content</button><button id="iframe">layer iframe</button><button id="loading">layer loading</button><button id="tips">layer tips</button></div>
a.Layer msg
//layer msg$('#msg').on('click', function(){layer.msg('Hello layer');}); b.layer content
//layer content$('#content').on('click', function(){layer.open({type: 1,area: ['600px', '360px'],shadeClose: true,content: '/</div style="padding:20px;">自定義內(nèi)容/<//div>'});}); c.layer iframe
//layer iframe$('#iframe').on('click', function(){layer.open({type: 2,title: 'iframe父子操作',maxmin: false,shadeClose: true,area : ['600px' , '360px'],content: 'http://www.baidu.com'});}); d.layer loading
//layer lading$('#loading').on('click', function(){var ii = layer.load();//此處用setTimeout演示ajax的回調(diào)setTimeout(function(){layer.close(ii);}, 10000);}); e.layer tips
//layer tips$('#tips').on('click', function(){layer.tips('Hello tips!', '#tips');});在 web 項(xiàng)目無論是基本的彈窗還是需要個(gè)性化定制的彈出，Layer 都能提供很好的支持，這里只做拋磚引玉，需要更多信息請(qǐng)?jiān)L問官網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
