web 前端常用組件之Layer彈出層組件
經(jīng)手幾個(gè)項(xiàng)目,還是感覺 Layer 用起來比較的輕松,你能想到的 Layer 都能幫你做到。
感謝 Layer 作者賢心,Layer 官網(wǎng)地址:http://layer.layui.com/
1. Layer 使用特點(diǎn)
Layer 具備全方位的解決方案,致力于服務(wù)各水平段的開發(fā)人員,讓頁(yè)面輕松地?fù)碛胸S富友好的操作體驗(yàn)。
Layer 盡可能地在以更少的代碼展現(xiàn)更強(qiáng)健的功能,注重性能的提升、易用和實(shí)用性.。
Layer 兼容了包括IE6在內(nèi)的所有主流瀏覽器。 數(shù)量可觀的接口,可以自定義需要的風(fēng)格,每一種彈層模式各具特色?! ?br />
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)。
- 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)彈出層的打開、關(guān)閉功能
- jQuery使用Layer彈出層插件閃退問題
- 可以關(guān)閉RealPlayer彈出窗口的屏蔽工具 綠色軟件
- layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能詳解
- layui框架中l(wèi)ayer父子頁(yè)面交互的方法分析
相關(guān)文章
IE6中鏈接A的href為javascript協(xié)議時(shí)不在當(dāng)前頁(yè)面跳轉(zhuǎn)
IE6中當(dāng)鏈接A的href為javascript協(xié)議時(shí)不能在當(dāng)前頁(yè)面跳轉(zhuǎn),本例給出有效的解決方法,大家不妨參考下2014-06-06
js動(dòng)態(tài)創(chuàng)建表格,刪除行列的小例子
這篇文章介紹了js動(dòng)態(tài)創(chuàng)建表格,刪除行列的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07
js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果
這篇文章主要介紹了js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果,通過由上往下滾動(dòng)來實(shí)現(xiàn)不斷顯示微博的,而且每一天新微博都是通過淡入效果顯示的,需要的朋友可以參考下2015-12-12
服務(wù)器安全設(shè)置的幾個(gè)注冊(cè)表設(shè)置
服務(wù)器安全設(shè)置的幾個(gè)注冊(cè)表設(shè)置...2007-07-07
詳解JavaScript中怎么實(shí)現(xiàn)鏈表
鏈表是一系列節(jié)點(diǎn)串聯(lián)形成的數(shù)據(jù)結(jié)構(gòu),鏈表存儲(chǔ)有序的元素集合,鏈表中的元素在內(nèi)存中并不是連續(xù)放置的,本文給大家介紹了在JavaScript中怎么實(shí)現(xiàn)鏈表,需要的朋友可以參考下2023-12-12
微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08

