认识达内从这里开始

认真做教育专心促就业

学习HTML5成长之路——把自定义弹窗做成控件的一步

发布：青岛达内
来源：互联网
时间：2018-03-16 13:15

    小白,今天上午布局的那个弹窗想法不错!"（青岛IT培训）

    小白说道:"我只是用CSS布了一个局,还没有添加用户交互呢!"

    老朱说:"不着急,像这种常用的功能你可以尝试把它做成控件,这样以后就能经常使用了,从现在开始我们用几天的时间了解一下,怎么做一个能够经常调用的控件吧!"

    "恩,这样确实不错,虽然做的时候麻烦点,但是以后使用起来就会很方便了!我应该做点什么准备工作呢?"

    老朱跟小白说:"一个控件包含CSS和JS两个部分,你可以建一个文件夹,把你做的控件的JavaScript文件和CSS文件放进去,使用的时候在当前页面中引入对应的js文件和CSS文件就可以了."

小白虽然不怎么明白,还是建了一个名称为以小白首字母xb命名的文件夹,然后在里面放了两个空的CSS和JS文件.

<a style='color:blue' href='http://qd.tedu.cn/'>青岛达内</a>培训

    建好以后小白问老朱:"下面该注意什么呢?"（青岛IT培训）
    老朱说:"小白!你上午做的那个布局基本可以满足一些普通网站的用户提示,有几个问题我们需要处理一下.首先是id的问题,你做的控件里面应该尽量避免id字段,因为控件加载到网页中后它很有可能跟网页中其他的id字段发生冲突,所以我们把它改成通过class控制样式.class名称为了跟其他人有所区别,我们使用:'控件集名称-控件类别-控件容器标识'这样的模式起名,这样我们就能很容易通过class分辨它控制的哪里的样式,当然通过这种方式也基本可以保证不跟别的控件的class名称冲突."

    "哦!我试着改一改,稍等我一会儿!"

    "是这个样子么?我已经把所有的容器通过class进行CSS样式控制了."

    "好了,现在你把所有关于弹窗的css样式都放到刚刚建的那个css文件里面,然后在head里面引入这个css文件."

    "放好了,然后呢?"（青岛IT培训）

    "你定义一个对象,让这个对象可以把你布局的那段html代码放到body里面.不用做的太复杂,简单点,有一个记录html代码的变量和一个往body放html代码的方法就可以了."

    "做好了,是不是这样?我通过Layer调用alert方法就可以把之前的html布局放到body里面."

    "恩,对!你现在把Layer对象放到之前创建的js文件里面,然后把那个js文件也引入到页面中."

    "好了,现在页面的功能跟我之前布局实现的功能是一样的!都是打开页面以后出现弹窗,我试着改成点击图片出现弹窗吧!"

    "朱哥,你看下效果!"

    "恩,不错,我们现在把弹窗控件所需要的基本元素已经搭建好了,弹窗对象也有了,后面我们需要实现这个弹窗的接口功能,比如设置弹窗的标题、显示内容、关闭弹窗、点击确定以后触发的事件等等,我们一步一步的来制作这个控件.别看一个小小的弹窗,它包含了很多javaScript对象处理的知识,通过制作这个简单的弹窗控件你可能会对javaScript对象有更深的了解."    小白,今天上午布局的那个弹窗想法不错!"

    小白说道:"我只是用CSS布了一个局,还没有添加用户交互呢!"（青岛IT培训）
    老朱说:"不着急,像这种常用的功能你可以尝试把它做成控件,这样以后就能经常使用了,从现在开始我们用几天的时间了解一下,怎么做一个能够经常调用的控件吧!"

    "恩,这样确实不错,虽然做的时候麻烦点,但是以后使用起来就会很方便了!我应该做点什么准备工作呢?"

    老朱跟小白说:"一个控件包含CSS和JS两个部分,你可以建一个文件夹,把你做的控件的JavaScript文件和CSS文件放进去,使用的时候在当前页面中引入对应的js文件和CSS文件就可以了."

    小白虽然不怎么明白,还是建了一个名称为以小白首字母xb命名的文件夹,然后在里面放了两个空的CSS和JS文件.

    建好以后小白问老朱:"下面该注意什么呢?"（青岛IT培训）
    老朱说:"小白!你上午做的那个布局基本可以满足一些普通网站的用户提示,有几个问题我们需要处理一下.首先是id的问题,你做的控件里面应该尽量避免id字段,因为控件加载到网页中后它很有可能跟网页中其他的id字段发生冲突,所以我们把它改成通过class控制样式.class名称为了跟其他人有所区别,我们使用:'控件集名称-控件类别-控件容器标识'这样的模式起名,这样我们就能很容易通过class分辨它控制的哪里的样式,当然通过这种方式也基本可以保证不跟别的控件的class名称冲突."

    "哦!我试着改一改,稍等我一会儿!"

    "是这个样子么?我已经把所有的容器通过class进行CSS样式控制了."

    "好了,现在你把所有关于弹窗的css样式都放到刚刚建的那个css文件里面,然后在head里面引入这个css文件."

    "放好了,然后呢?"

    "你定义一个对象,让这个对象可以把你布局的那段html代码放到body里面.不用做的太复杂,简单点,有一个记录html代码的变量和一个往body放html代码的方法就可以了."

    "做好了,是不是这样?我通过Layer调用alert方法就可以把之前的html布局放到body里面."

    "恩,对!你现在把Layer对象放到之前创建的js文件里面,然后把那个js文件也引入到页面中."

    "好了,现在页面的功能跟我之前布局实现的功能是一样的!都是打开页面以后出现弹窗,我试着改成点击图片出现弹窗吧!"

    "朱哥,你看下效果!"

"恩,不错,我们现在把弹窗控件所需要的基本元素已经搭建好了,弹窗对象也有了,后面我们需要实现这个弹窗的接口功能,比如设置弹窗的标题、显示内容、关闭弹窗、点击确定以后触发的事件等等,我们一步一步的来制作这个控件.别看一个小小的弹窗,它包含了很多javaScript对象处理的知识,通过制作这个简单的弹窗控件你可能会对javaScript对象有更深的了解."

本篇文章是有青岛达内培训为您呈现,希望给您带来更多更好的文章

更多青岛IT培训相关资讯,请扫描下方二维码