10多年的南充網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整南充建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“南充網(wǎng)站設(shè)計”,“南充網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

引言

通過本節(jié)學(xué)習(xí)，您將收獲以下知識點：

1, layer是什么!

2, 如何引入layer!

3, 如何使用layer!

我們結(jié)合實際操作，通過一個簡單的案例，讓您切實感受到：layer的學(xué)習(xí)既有趣又簡單！

和我一起開啟layer之門吧?。。?/p>

特別提示：文末有本節(jié)對應(yīng)的源碼哦 ^_^

第一個問題：layer是什么？

Layer是一款可以獨立使用的、依賴于jauery的彈出層插件！

當(dāng)然layer也可以作為layui的一個模塊，但我們所使用的案例，均使用獨立的layer插件來完成！

第二個問題：在哪兒下載？

Layer獨立插件的官網(wǎng)是：http://layer.layui.com

Layer插件的手冊網(wǎng)址是：https://www.layui.com/doc/modules/layer.html

第三個問題：我們究竟下載了什么東西？

在這里，我們下載的是layer-v3.0.3.zip壓縮包!

解壓之后的layer-v3.0.3目錄結(jié)構(gòu)是：

其中我們用到的只有layer文件夾及其子文件！

說明：需要說明的是layer目錄下面的目錄結(jié)構(gòu)請不要隨意改動，盡量保持原目錄結(jié)構(gòu)！

主目錄layer的目錄結(jié)構(gòu)是:

其中layer.js就是我們要引入的js文件,其余的文件不需要我們管。

第四個問題：如何使用？

1,準(zhǔn)備工作：

(1,搭建工作目錄！

a,在桌面或者硬盤任意位置新建文件夾 demo;

b,在 demo目錄下新建三個文件夾:

Js              //存放所有的javascript文件

Css            //存放所有的css文件

Images      //存放所有的圖片文件

(2,準(zhǔn)備插件文件！

a,將layer目錄復(fù)制到demo/js目錄下面

b,下載jauery2.1.4.js放到demo/js目錄下面

最終形成的目錄結(jié)構(gòu)是:

2,使用layer編寫第一個彈框！

(1,在demo文件夾下新建文件 index.html;

(2,在index.html中引入jquery2.1.4.js文件;

(3,在index.html中引入layer.js文件;

(4,使用layer的內(nèi)置msg方法制作第一個簡單的彈層信息框!

最終編寫好的index.html文件:

      
      
      
      
      
      


      
           //(4, 使用layer的內(nèi)置msg方法制作第一個簡單的彈層信息框!
           layer.msg("你好, layer");
      

最終運行效果:

最后總結(jié)：

1, layer是依賴于jquery的,一定要在jquery之后引入！

2, layer的整體結(jié)構(gòu)盡量不要改動！

3, layer的使用很簡單！

本案例代碼地址：http://pan.baidu.com/s/1o84pfq6密碼:brqq