“小白，今天上午布局的那個(gè)彈窗想法不錯(cuò)！”

小白說(shuō)道：“我只是用CSS布了一個(gè)局，還沒(méi)有添加用戶交互呢！”

老朱說(shuō)：“不著急，像這種常用的功能你可以嘗試把它做成控件，這樣以后就能經(jīng)常使用了，從現(xiàn)在開(kāi)始我們用幾天的時(shí)間了解一下，怎么做一個(gè)能夠經(jīng)常調(diào)用的控件吧！”

“恩，這樣確實(shí)不錯(cuò)，雖然做的時(shí)候麻煩點(diǎn)，但是以后使用起來(lái)就會(huì)很方便了！我應(yīng)該做點(diǎn)什么準(zhǔn)備工作呢？”

老朱跟小白說(shuō)：“一個(gè)控件包含CSS和JS兩個(gè)部分，你可以建一個(gè)文件夾，把你做的控件的JavaScript文件和CSS文件放進(jìn)去，使用的時(shí)候在當(dāng)前頁(yè)面中引入對(duì)應(yīng)的js文件和CSS文件就可以了?！?/p>

小白雖然不怎么明白，還是建了一個(gè)名稱(chēng)為以小白首字母xb命名的文件夾，然后在里面放了兩個(gè)空的CSS和JS文件。

建好以后小白問(wèn)老朱：“下面該注意什么呢？”

老朱說(shuō)：“小白！你上午做的那個(gè)布局基本可以滿足一些普通網(wǎng)站的用戶提示，有幾個(gè)問(wèn)題我們需要處理一下。首先是id的問(wèn)題，你做的控件里面應(yīng)該盡量避免id字段，因?yàn)榭丶虞d到網(wǎng)頁(yè)中后它很有可能跟網(wǎng)頁(yè)中其他的id字段發(fā)生沖突，所以我們把它改成通過(guò)class控制樣式。class名稱(chēng)為了跟其他人有所區(qū)別，我們使用：‘控件集名稱(chēng)-控件類(lèi)別-控件容器標(biāo)識(shí)’這樣的模式起名，這樣我們就能很容易通過(guò)class分辨它控制的哪里的樣式，當(dāng)然通過(guò)這種方式也基本可以保證不跟別的控件的class名稱(chēng)沖突?！?/p>

“哦！我試著改一改，稍等我一會(huì)兒！”

“是這個(gè)樣子么？我已經(jīng)把所有的容器通過(guò)class進(jìn)行CSS樣式控制了?！?/p>

“好了，現(xiàn)在你把所有關(guān)于彈窗的css樣式都放到剛剛建的那個(gè)css文件里面，然后在head里面引入這個(gè)css文件?！?/p>

“放好了，然后呢？”

“你定義一個(gè)對(duì)象，讓這個(gè)對(duì)象可以把你布局的那段html代碼放到body里面。不用做的太復(fù)雜，簡(jiǎn)單點(diǎn)，有一個(gè)記錄html代碼的變量和一個(gè)往body放html代碼的方法就可以了?！?/p>

“做好了，是不是這樣？我通過(guò)Layer調(diào)用alert方法就可以把之前的html布局放到body里面?！?/p>

“恩，對(duì)！你現(xiàn)在把Layer對(duì)象放到之前創(chuàng)建的js文件里面，然后把那個(gè)js文件也引入到頁(yè)面中?！?/p>

“好了，現(xiàn)在頁(yè)面的功能跟我之前布局實(shí)現(xiàn)的功能是一樣的！都是打開(kāi)頁(yè)面以后出現(xiàn)彈窗，我試著改成點(diǎn)擊圖片出現(xiàn)彈窗吧！”

“朱哥，你看下效果！”

“恩，不錯(cuò)，我們現(xiàn)在把彈窗控件所需要的基本元素已經(jīng)搭建好了，彈窗對(duì)象也有了，后面我們需要實(shí)現(xiàn)這個(gè)彈窗的接口功能，比如設(shè)置彈窗的標(biāo)題、顯示內(nèi)容、關(guān)閉彈窗、點(diǎn)擊確定以后觸發(fā)的事件等等，我們一步一步的來(lái)制作這個(gè)控件。別看一個(gè)小小的彈窗，它包含了很多javaScript對(duì)象處理的知識(shí)，通過(guò)制作這個(gè)簡(jiǎn)單的彈窗控件你可能會(huì)對(duì)javaScript對(duì)象有更深的了解?！?/p>

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力！