web 前端常用組件之Layer彈出層組件
經(jīng)手幾個(gè)項(xiàng)目,還是感覺(jué) Layer 用起來(lái)比較的輕松,你能想到的 Layer 都能幫你做到。
感謝 Layer 作者賢心,Layer 官網(wǎng)地址:http://layer.layui.com/
1. Layer 使用特點(diǎn)
Layer 具備全方位的解決方案,致力于服務(wù)各水平段的開(kāi)發(fā)人員,讓頁(yè)面輕松地?fù)碛胸S富友好的操作體驗(yàn)。
Layer 盡可能地在以更少的代碼展現(xiàn)更強(qiáng)健的功能,注重性能的提升、易用和實(shí)用性.。
Layer 兼容了包括IE6在內(nèi)的所有主流瀏覽器。 數(shù)量可觀的接口,可以自定義需要的風(fēng)格,每一種彈層模式各具特色?! ?br />
Layer 遵循LGPL協(xié)議,將永久性提供無(wú)償服務(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)目無(wú)論是基本的彈窗還是需要個(gè)性化定制的彈出,Layer 都能提供很好的支持,這里只做拋磚引玉,需要更多信息請(qǐng)?jiān)L問(wèn)官網(wǎng)。
- jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼
- layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例
- Thinkphp5結(jié)合layer彈窗定制操作結(jié)果頁(yè)面
- layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法分析
- jQuery、layer實(shí)現(xiàn)彈出層的打開(kāi)、關(guān)閉功能
- jQuery使用Layer彈出層插件閃退問(wèn)題
- 可以關(guān)閉RealPlayer彈出窗口的屏蔽工具 綠色軟件
- layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能詳解
- layui框架中l(wèi)ayer父子頁(yè)面交互的方法分析
相關(guān)文章
JavaScript設(shè)計(jì)模式之中介者模式詳解
當(dāng)對(duì)象之間進(jìn)行多對(duì)多引用時(shí),進(jìn)行開(kāi)發(fā),維護(hù),閱讀時(shí)將變得特別痛苦。在這些對(duì)象之間添加中間者,使它們都只與中介者,當(dāng)中介者處理完一個(gè)對(duì)象的請(qǐng)求后,將結(jié)果通知于其他對(duì)象2022-08-08javascript中callee與caller的用法和應(yīng)用場(chǎng)景
javascript中callee和caller的用法和應(yīng)用場(chǎng)景分析,需要的朋友可以參考下。2010-12-12p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析
這篇文章主要為大家介紹了p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09