下午小白感觉有些感冒,身上特别沉,虽然一点状态都没有,但想起上午自定义弹窗的关闭事件还没有做,心里一直放不下,还是找到了老朱:“朱哥,有时间没?咱聊聊弹窗关闭的事情吧!”
老朱也有点感冒,哑着嗓子跟小白说:“我看你今天的状态也不好,今天只把窗口关闭的方法实现了吧!你现在对JavaScript的机制还不是特别熟练,我们也不要做的太深入了,尽量用之前接触过的方法来实现。你打开上午的代码我们对着代码说吧!”
“我们现在把你做的功能屡一遍看看,首先你设置的Layer对象有两个属性:弹窗标题(title)和弹窗内容(content),通过alert方法传递一个含有title值和content值的对象后,先更改弹窗的标题和内容属性字段,然后将弹窗的html内容写入到body的底部。”
小白说道:“是的,我刚才想过一个关闭窗口的办法:在确定按钮上面添加一个onclick事件。测试了一下也可以关闭窗口,是不是这样就可以了?”
“你设置的确定按钮“点击事件”仅仅是从页面中找到弹窗容器后把它移除掉,假如我还想点了确定按钮以后,再做一些其他的处理就不好办了。具体来说就是弹窗出现以后我们给Layer窗口传递一个函数,当点击确定以后不但窗口关闭,还得执行我们传递的那个函数。”
“函数也能作为参数传递么?”,小白不解的问道。
“当然可以了,函数不但能作为参数传递,还能把多个函数放到数组里面,这个我们以后再详细讨论。你现在给layer传递的参数是一个对象,既然是对象肯定能添加方法,传递的那个函数就放到这个对象的方法里。”
“有点晕啊!”
“我把你之前页面中使用Layer.alert()方法传递的参数改一下你就明白了。”
“看到没?之前我们的参数对象只包含title和content。现在增加了一个onsure,它的值就是一个让页面中的图片隐藏的函数!现在我把Layer的alert方法改一下,你看看。”
“在alert方法中我们使用确定按钮的click事件,把传递进来的函数和隐藏窗口的方法都执行就可以了。现在看一下页面中的弹窗功能能不能实现点击确定以后隐藏图片!”
老朱最后说道:“小白,你觉得现在的弹窗还有什么问题么?”
“我觉的挺不错了!难道还有什么需要设置的么?”
“还有很多,现在的这个弹窗在特别小的项目上可以使用,一旦碰到比较大的项目肯定就不适合了,因为现在很多HTML5页面都是使用首页加载卸载功能模块的方式,有时会碰到多个弹窗的问题,也可能碰到更复杂的问题,因为你现在还没有接触过,所以现在这个弹窗功能实现上也不用做太多的完善,完了有时间把弹窗的样式和动画效果做出来就可以了!”
“通过做这个弹窗控件,你应该对JavaScript有了重新认识了,你练习的时候重点思考一下JavaScript对象属性和方法之间的关系、对象作为参数传递、以及jQuery对象使用的append和remove方法。”
想学HTML5的朋友可以关注老炉,您的关注是我持续更新《小白HTML5成长之路》的动力!