這篇文章主要介紹了layui的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)定制網(wǎng)站制作，是成都網(wǎng)站制作公司,為成都假山制作提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站維護(hù)熱線：13518219792

layui是什么

layer，一個(gè)可以讓你想到即可做到的web彈窗（層）解決方案（js組件），作者賢心。layer側(cè)重于用戶靈活的自定義，為不同人的使用習(xí)慣提供動(dòng)力。其意義在于，可以讓您的頁面擁有更豐富與便捷的操作體驗(yàn)，而您只需在調(diào)用時(shí)簡單地配置相關(guān)參數(shù)，即可輕松實(shí)現(xiàn)。—–來自百度百科

根據(jù)layer組件使用人數(shù)，就可以看出layui框架是非常不錯(cuò)的，接下來我們就開啟layui之旅吧！

Layui的結(jié)構(gòu)

├─css //css目錄
  │  │─modules //模塊css目錄（一般如果模塊相對(duì)較大，我們會(huì)單獨(dú)提取，比如下面三個(gè)：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心樣式文件
  ├─font  //字體圖標(biāo)目錄
  ├─images //圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
  │─lay //模塊核心目錄
  │  └─modules //各模塊組件
  │─layui.js //基礎(chǔ)核心庫
  └─layui.all.js //包含layui.js和所有模塊的合并文件

layui內(nèi)置模塊

下面列出我感覺比較重要的幾個(gè)組件模塊，畢竟不是專門從事前端的。

獲取Layui

通過Layui官網(wǎng)獲取,詳情請(qǐng)參考layui官網(wǎng)。

Layer彈層之美

我們也可以通過訪問Layer來獲取，獲取到layer組件后導(dǎo)入項(xiàng)目中。具體步驟結(jié)構(gòu)參考下圖：

　　1.在頁面中引入jQuery框架

　　2.將下載的layer文件夾完整復(fù)制到項(xiàng)目中

　　3.引入layer目錄下的layer.js文件

　　4.開啟layer彈層之旅

初體驗(yàn)

這里只做了簡單的演示，更多彈層實(shí)現(xiàn)請(qǐng)參考Layer官網(wǎng) 具體代碼貼出。

//初體驗(yàn)
layer.alert('內(nèi)容')
//第三方擴(kuò)展皮膚
layer.alert('內(nèi)容', {
  icon: 1,
  skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴(kuò)展。關(guān)于皮膚的擴(kuò)展規(guī)則，去這里查閱
})
//詢問框
layer.confirm('您是如何看待前端開發(fā)？', {
  btn: ['重要','奇葩'] //按鈕
}, function(){
  layer.msg('的確很重要', {icon: 1});
}, function(){
  layer.msg('也可以這樣', {
    time: 20000, //20s后自動(dòng)關(guān)閉
    btn: ['明白了', '知道了']
  });
});
//提示層
layer.msg('玩命提示中');
//墨綠深藍(lán)風(fēng)
layer.alert('墨綠風(fēng)格，點(diǎn)擊確認(rèn)看深藍(lán)', {
  skin: 'layui-layer-molv' //樣式類名
  ,closeBtn: 0
}, function(){
  layer.alert('偶吧深藍(lán)style', {
    skin: 'layui-layer-lan'
    ,closeBtn: 0
    ,anim: 4 //動(dòng)畫類型
  });
});
//捕獲頁
layer.open({
  type: 1,
  shade: false,
  title: false, //不顯示標(biāo)題
  content: $('.layer_notice'), //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對(duì)元素所影響
  cancel: function(){
    layer.msg('捕獲就是從頁面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', {time: 5000, icon:6});
  }
});
//頁面層
layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上邊框
  area: ['420px', '240px'], //寬高
  content: 'html內(nèi)容'
});
//自定頁
layer.open({
  type: 1,
  skin: 'layui-layer-demo', //樣式類名
  closeBtn: 0, //不顯示關(guān)閉按鈕
  anim: 2,
  shadeClose: true, //開啟遮罩關(guān)閉
  content: '內(nèi)容'
});
//tips層
layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');
//iframe層
layer.open({
  type: 2,
  title: 'layer mobile頁',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: 'mobile/' //iframe的url
}); 
//iframe窗
layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不顯示關(guān)閉按鈕
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角彈出
  time: 2000, //2秒后自動(dòng)關(guān)閉
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動(dòng)條
  end: function(){ //此處用于演示
    layer.open({
      type: 2,
      title: '很多時(shí)候，我們想最大化看，比如像這個(gè)頁面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //開啟最大化最小化按鈕
      area: ['893px', '600px'],
      content: '//fly.layui.com/'
    });
  }
});
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風(fēng)格，支持0-2
//loading層
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一個(gè)tips，只不過我長得跟之前那位稍有些不一樣。', '吸附元素選擇器', {
  tips: [1, '#3595CC'],
  time: 4000
});
//prompt層
layer.prompt({title: '輸入任何口令，并確認(rèn)', formType: 1}, function(pass, index){
  layer.close(index);
  layer.prompt({title: '隨便寫點(diǎn)啥，并確認(rèn)', formType: 2}, function(text, index){
    layer.close(index);
    layer.msg('演示完畢！您的口令：'+ pass +'
您最后寫下了：'+text);
  });
});
//tab層
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '內(nèi)容1'
  }, {
    title: 'TAB2', 
    content: '內(nèi)容2'
  }, {
    title: 'TAB3', 
    content: '內(nèi)容3'
  }]
});
//相冊(cè)層
$.getJSON('test/photos.json?v='+new Date, function(json){
  layer.photos({
    photos: json //格式見API文檔手冊(cè)頁
    ,anim: 5 //0-6的選擇，指定彈出圖片動(dòng)畫類型，默認(rèn)隨機(jī)
  });
});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享layui的使用方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!