专栏首页企鹅号快讯《小白HTML5成长之路32》把自定义弹窗做成控件的第一步

《小白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对象有更深的了解。”

本文来自企鹅号 - 无名码农媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 伊朗APT组织OilRig携新后门RGDoor锁定中东国家政府、金融、教育机构

    “用指尖改变世界” ? Palo Alto Networks公司威胁情报团队Unit 42的研究人员在最近的调查中发现了一个Internet信息服务(IIS)W...

    企鹅号小编
  • 分布式TensorFlow入坑指南:从实例到代码带你玩转多机器深度学习

    AI UNION 人工智能产业技术创新战略联盟 这里是人工智能联盟,汇聚了最新的AI新闻资讯,还有最前沿的国内外AI开源技术,最具价值的AI创新企业,最具权威的...

    企鹅号小编
  • 分布式TensorFlow入坑指南:从实例到代码带你玩转多机器深度学习

    通过多 GPU 并行的方式可以有很好的加速效果,然而一台机器上所支持的 GPU 是有限的,因此本文介绍了分布式 TensorFlow。分布式 TensorFlo...

    企鹅号小编
  • React Native 大纲

    onety码生
  • MFC-简单的函数使用

    1.   MessageBox(str);很简单的一个函数,该函数参数为字符串.用来弹出一个窗口显示str的内容,str为一个字符串.

    用户2038589
  • 一次模块重构的总结

    不同子类通过重写 BaseItem 的公共属性的 set、get 方法来达到初始化组件或者获取所需提交数据等 这一步中把转化的逻辑都写在了自定义控件内部,对...

    進无尽
  • 微软IIS服务器的最佳优化工具- IIS Tuner

    dudu的 《让Windows Server 2008 + IIS 7+ ASP.NET 支持10万个同时请求》,里面涉及到需要手工调整参数的地方。在这篇文章中...

    张善友
  • 分布式TensorFlow入坑指南:从实例到代码带你玩转多机器深度学习

    通过多 GPU 并行的方式可以有很好的加速效果,然而一台机器上所支持的 GPU 是有限的,因此本文介绍了分布式 TensorFlow。分布式 TensorFlo...

    企鹅号小编
  • 分布式TensorFlow入坑指南:从实例到代码带你玩转多机器深度学习

    AI UNION 人工智能产业技术创新战略联盟 这里是人工智能联盟,汇聚了最新的AI新闻资讯,还有最前沿的国内外AI开源技术,最具价值的AI创新企业,最具权威的...

    企鹅号小编
  • IIS安装与部署,站点的部署与配置

    2.安装完成以后可以从控制面板---->管理工具----->Internet信息服务

    wfaceboss

扫码关注云+社区

领取腾讯云代金券