Layer從入門到精通-01你好,layer!-創(chuàng)新互聯(lián)

Layer從入門到精通-01你好,layer!

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站與策劃設(shè)計(jì),香格里拉網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:香格里拉等地區(qū)。香格里拉做網(wǎng)站價(jià)格咨詢:13518219792

引言

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

1, layer是什么!

2, 如何引入layer!

3, 如何使用layer!

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

和我一起開(kāi)啟layer之門吧?。。?/p>

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

第一個(gè)問(wèn)題：layer是什么？

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

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

第二個(gè)問(wèn)題：在哪兒下載？

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

Layer從入門到精通-01你好,layer!

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

第三個(gè)問(wèn)題：我們究竟下載了什么東西？

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

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

Layer從入門到精通-01你好,layer!

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

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

主目錄layer的目錄結(jié)構(gòu)是:Layer從入門到精通-01你好,layer!

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

第四個(gè)問(wèn)題：如何使用？

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

(1,搭建工作目錄！

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

b, 在 demo目錄下新建三個(gè)文件夾:

Js             //存放所有的javascript文件

Css           //存放所有的css文件

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

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

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

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

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

Layer從入門到精通-01你好,layer!

2, 使用layer編寫第一個(gè)彈框！

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
      <metacharset="utf-8">
      <title></title>
      <!--(2, 在index.html中引入jquery2.1.4.js文件;-->
      <scriptsrc="./js/jquery2.1.4.js"></script>
      <!--(3, 在index.html中引入layer.js文件;-->
      <scriptsrc="./js/layer/layer.js"></script>
</head>
<body>
      <scripttype="text/javascript">
           //(4, 使用layer的內(nèi)置msg方法制作第一個(gè)簡(jiǎn)單的彈層信息框!
           layer.msg("你好, layer");
      </script>
</body>
</html>

最終運(yùn)行效果:

Layer從入門到精通-01你好,layer!

最后總結(jié)：

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

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

3, layer的使用很簡(jiǎn)單！

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：Layer從入門到精通-01你好,layer!-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article10/dhgigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站建設(shè)、App開(kāi)發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化