《小白HTML5成长之路32》把自定义弹窗做成控件的第一步

“小白,今天上午布局的那个弹窗想法不错!”

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

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

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

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

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

建好以后小白问老朱:“下面该注意什么呢?”

老朱说:“小白!你上午做的那个布局基本可以满足一些普通网站的用户提示,有几个问题我们需要处理一下。首先是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对象有更深的了解。”

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171220A05B0T00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券