《小白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 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一...

1833
来自专栏Guangdong Qi

# 微信小程序开发之-事件触发控件

2543
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

8812
来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

2158
来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

1907
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

1192
来自专栏阿炬.NET

常用插件备份

2988
来自专栏前端小叙

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。 html: <div id="l...

4529
来自专栏coding for love

CSS常用布局实现02-垂直居中

css2.1本身没有提供垂直居中的属性,都是通过一些巧妙的方法来实现,当然,都会有或多或少的缺点。所以,还是那句话,如果不考虑兼容到特定的浏览器,建议使用fle...

1021
来自专栏大前端开发

微信小程序的样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。...

1163

扫码关注云+社区

领取腾讯云代金券