网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Layer从入门到精通-01你好,layer!

10多年的南充网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整南充建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“南充网站设计”,“南充网站推广”以来,每个客户项目都认真落实执行。

Layer从入门到精通-01你好,layer!

引言

通过本节学习,您将收获以下知识点:

1, layer是什么!

2, 如何引入layer!

3, 如何使用layer!

我们结合实际操作,通过一个简单的案例,让您切实感受到:layer的学习既有趣又简单!

和我一起开启layer之门吧!!!

特别提示:文末有本节对应的源码哦 ^_^



第一个问题:layer是什么?

Layer是一款可以独立使用的、依赖于jauery的弹出层插件!

当然layer也可以作为layui的一个模块,但我们所使用的案例,均使用独立的layer插件来完成!

 

第二个问题:在哪儿下载?

Layer独立插件的官网是:http://layer.layui.com

Layer从入门到精通-01你好,layer!

 

Layer插件的手册网址是:https://www.layui.com/doc/modules/layer.html

 

第三个问题:我们究竟下载了什么东西?

在这里,我们下载的是layer-v3.0.3.zip压缩包!

 

解压之后的layer-v3.0.3目录结构是:

Layer从入门到精通-01你好,layer!

其中我们用到的只有layer文件夹及其子文件!

说明:需要说明的是layer目录下面的目录结构请不要随意改动,尽量保持原目录结构!

主目录layer的目录结构是:Layer从入门到精通-01你好,layer!

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

 

第四个问题:如何使用?

1,准备工作

(1,搭建工作目录!

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

b,在 demo目录下新建三个文件夹:

Js              //存放所有的javascript文件

Css            //存放所有的css文件

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

(2,准备插件文件!

a,将layer目录复制到demo/js目录下面

b,下载jauery2.1.4.js放到demo/js目录下面

 

最终形成的目录结构是:

Layer从入门到精通-01你好,layer!

 

 

2,使用layer编写第一个弹框!

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

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

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

(4,使用layer的内置msg方法制作第一个简单的弹层信息框!

 

最终编写好的index.html文件:




      
      
      
      
      
      


      
           //(4, 使用layer的内置msg方法制作第一个简单的弹层信息框!
           layer.msg("你好, layer");
      

最终运行效果:

Layer从入门到精通-01你好,layer!

最后总结:

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

2, layer的整体结构尽量不要改动!

3, layer的使用很简单!

 

 

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



本文名称:Layer从入门到精通-01你好,layer!
分享URL:http://bjjierui.cn/article/gchjdp.html

其他资讯