本發(fā)明涉及網(wǎng)頁前端技術(shù)領(lǐng)域，特別是一種可重用的步驟窗口實(shí)現(xiàn)方法。

背景技術(shù)：

開發(fā)人員在寫前端頁面的過程中，經(jīng)常會(huì)遇到涉及參數(shù)較多的頁面的開發(fā)，一般采取的方式是將所有參數(shù)都寫在同一個(gè)頁面，提交請求時(shí)所有參數(shù)一起傳參到接口。這種方式不僅不夠靈活方便，且會(huì)帶來以下問題：

一是頁面展示效果不佳。頁面參數(shù)較多，導(dǎo)致頁面冗長，頁面交互性不夠友好，彈出窗的展示也不美觀，影響用戶操作的直觀感受和產(chǎn)品的交互性。

二是編寫頁面時(shí)，由于頁面參數(shù)的繁多，造成大量時(shí)間耗費(fèi)在頁面樣式的修改上，也會(huì)帶來代碼的大量冗余和不易維護(hù)。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)解決的技術(shù)問題明在于提供一種可重用的步驟窗口實(shí)現(xiàn)方法，解決了當(dāng)頁面參數(shù)較多時(shí)，參數(shù)項(xiàng)都集中在一個(gè)頁面，既不方便參數(shù)校驗(yàn)頁面展示也不夠美觀的問題。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案是：

所述的包括如下步驟：

步驟1：封裝一個(gè)popupWindow類，提供一個(gè)基礎(chǔ)的彈出窗；

步驟2：popupWindow里定義窗口樣式cls，封裝窗口的樣式；

步驟3：實(shí)例化一個(gè)popupWindow對(duì)象；

步驟4：定義cls為stepwindow；

步驟5：定義窗口對(duì)象的寬度和標(biāo)題；

步驟6：定義窗口對(duì)象文本內(nèi)容的獲取方式；

步驟7：在callback回調(diào)函數(shù)里定義點(diǎn)擊不同按鈕時(shí)觸發(fā)的事件；

步驟8：定義listeners監(jiān)聽器；

步驟9：結(jié)束。

所述的步驟窗口是頁面彈出窗的一種，該種彈出窗將所需要展示的內(nèi)容分類到多個(gè)步驟頁面上，通過一個(gè)或多個(gè)標(biāo)簽按鈕進(jìn)行切換。

popupWindow類提供一個(gè)基礎(chǔ)的彈出窗，里面封裝了基礎(chǔ)彈出窗的樣式和特征，可通過實(shí)例化一個(gè)popupWindow對(duì)象，再添加對(duì)象私有的特征配置，來實(shí)現(xiàn)其他類別的彈出窗口；

在popupWindow類中將窗口的樣式封裝起來，通過窗口樣式cls這個(gè)配置項(xiàng)把自定義的窗口樣式加載進(jìn)來。

定義cls為stepwindow，表示當(dāng)前窗口為步驟窗口，通過定義cls屬性為stepwindow來與其他類型的窗口類型區(qū)分開。

文本內(nèi)容的獲取可以結(jié)合多種方式，一種是通過url鏈接加載到窗口對(duì)象，另一種是通過頁面對(duì)象的id獲取頁面的內(nèi)容并將內(nèi)容加載到窗口對(duì)象中。

對(duì)于需要在頁面提交請求后返回操作結(jié)果或點(diǎn)擊按鈕觸發(fā)事件后執(zhí)行某些特定操作的情況，可以在callback函數(shù)寫入期望執(zhí)行的操作，包括點(diǎn)擊提交后頁面返回請求成功或請求失敗。

觸發(fā)事件里可以添加當(dāng)前頁面的輸入?yún)?shù)的校驗(yàn)及點(diǎn)擊該按鈕時(shí)，當(dāng)前頁面其他按鈕的顯示與隱藏情況，同時(shí)還可以在事件中添加當(dāng)前頁面點(diǎn)擊下一步時(shí)觸發(fā)提交請求的操作。

listeners監(jiān)聽器中定義了一些下拉框、單選框的事件處理，根據(jù)用戶輸入的參數(shù)值的變化，展示出相應(yīng)的聯(lián)動(dòng)變化。

本發(fā)明通過引入一種可重用的步驟窗口的實(shí)現(xiàn)方法，將頁面一些可重用的框架獨(dú)立出來，多步驟窗口的模式解決了參數(shù)較多時(shí)單窗口頁面展示不美觀不簡潔的問題，同時(shí)，可重用的步驟窗口也滿足了不同開發(fā)場景的需要，提高了開發(fā)人員的工作效率，增強(qiáng)了頁面組件的可重用性。

附圖說明

下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說明：

圖1為本發(fā)明方法流程圖.

具體實(shí)施方式

如圖1所示，首先設(shè)置窗口頁面的樣式屬性，保證頁面的展示效果

步驟彈出窗口的具體實(shí)現(xiàn)，包括窗口類型、窗口大小的設(shè)置，按鈕、事件、回調(diào)函數(shù)的定義和處理

<script type＝″text/javascript″>

function testO(){

把彈出窗定義為步驟彈出窗

var win＝new PopupWindow({

cls：′stepwindow′，

設(shè)置彈窗寬度和標(biāo)題

width：600，

title：″創(chuàng)建虛擬機(jī)″，

設(shè)置彈窗內(nèi)容，直接獲取ex_createvm_box的內(nèi)容

content：(′#ex_createvm_box′).contents()，

autoShow：true，

定義彈窗的按鈕

buttons：[

{″name″：″cancel″，″text″：″取消″}，

{″name″：″prev″，″text″：″上一步″}，

{″name″：″next″，″text″：″下一步″}，

{″name″：″ok″，″text″：″確定″}

]，

在回調(diào)函數(shù)里定義點(diǎn)擊按鈕觸發(fā)事件后期望執(zhí)行的操作，如點(diǎn)擊提交后頁面返回請求成功或請求失敗

定義監(jiān)聽器，監(jiān)聽器中添加了事件處理，根據(jù)用戶輸入的參數(shù)值的變化，發(fā)生聯(lián)動(dòng)變化

定義步驟窗口頁面的顯示順序

定義步驟的相應(yīng)處理