欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

web 前端常用組件之Layer彈出層組件

 更新時(shí)間:2016年09月22日 17:10:03   作者:Orson  
這篇文章主要介紹了web 前端常用組件之Layer彈出層組件的相關(guān)資料,本文通過(guò)實(shí)例代碼詳解給大家介紹的非常詳細(xì),感興趣的朋友可以參考下

經(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)。

相關(guān)文章

最新評(píng)論