[發(fā)明專利]一種基于Bootstrap的動態(tài)對話框的實現(xiàn)方法

在審

• 申請?zhí)枺?/td>: 201811079031.5
• 申請日: 2018-09-17
• 公開（公告）號: CN110908654A
• 公開（公告）日: 2020-03-24
• 發(fā)明（設計）人: 陳林;張來卿;龐嚴冬
• 申請（專利權）人: 珠海橫琴盛達兆業(yè)科技投資有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/445
• 代理公司: 暫無信息
• 代理人: 暫無信息

本發(fā)明涉及Bootstrap技術領域，特別涉及一種無限層級顯示并能直接提交表單的對話框的實現(xiàn)方法：一、在項目中引入所需腳本與樣式并創(chuàng)建腳本工具類；二、創(chuàng)建對話框調用方法；三、在方法體中獲取當前對象，定義層級索引并初始化；四、判斷對象中modeId是否存在，不存在則創(chuàng)建；五、定義按鈕及事件；六、定義擴展選項；七、在打開事件中計算層級索引及拼裝按鈕顯示內容；八、在關閉事件中銷毀對象；九、綁定擴展選項到modeId上，還原層級索引值。本發(fā)明解決了網(wǎng)頁對話框彈出相互沖突、不能重復利用且不能直接提交表單的問題。

技術領域

本發(fā)明涉及Bootstrap技術領域，特別涉及一種無限層級顯示并能直接提交表單的對話框的實現(xiàn)方法。

背景技術

隨著網(wǎng)頁技術的不斷發(fā)展，網(wǎng)頁設計中的簡約之美也隨之應運而生，扁平化、響應式、視覺差滾動、卡片式等給設計師帶來了更多的發(fā)揮空間。簡約的設計，也以其簡潔直觀、輕薄美觀等特點，越來越受到設計師的追捧和大眾的喜愛。

簡約設計是將設計回歸本質的一種設計理念。簡約并是對內容的簡單刪減，而是提煉設計精華，滿足美觀實用的本質訴求。在網(wǎng)頁中，簡約的設計，往往具清晰的頁面結構、簡單的交互操作等特征，在滿足傳遞信息的同時，從視覺體驗的角度，為用戶帶來輕松、愉悅的美感。

發(fā)明的模態(tài)對話框，就是在Bootstrap扁平化的技術基礎之上，對對話框中常用的的內容進行提煉，封裝成可重復利用的方法。

發(fā)明內容

本發(fā)明解決的技術問題在于提供一種無限層級顯示并能直接提交表單的對話框的實現(xiàn)方法；本發(fā)明解決了網(wǎng)頁對話框彈出相互沖突、不能重復利用且不能直接提交表單的問題。

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

一、在項目中引入所需腳本與樣式并創(chuàng)建腳本工具類；二、創(chuàng)建對話框調用方法；三、在方法體中獲取當前對象，定義層級索引并初始化；四、判斷對象中modeId是否存在，不存在則創(chuàng)建；五、定義按鈕及事件；六、定義擴展選項；七、在打開事件中計算層級索引及拼裝按鈕顯示內容；八、在關閉事件中銷毀對象；九、綁定擴展選項到modeId上，還原層級索引值。

所述的方法具體包括如下步驟：

步驟一、在項目中引入所需腳本與樣式并創(chuàng)建腳本工具類，所述主要腳本與樣式有jquery.js與jquery.css，bootstrap.js與boostrap.css；

步驟二、創(chuàng)建對話框調用方法，所需參數(shù)有提交表單的Url、彈窗標題、回調函數(shù)等信息，其它可自行擴展；

步驟三、在方法體中獲取當前對象，定義層級索引并初始化；

步驟四、判斷對象中modeId是否存在，如果存在，根據(jù)對象取得；不存在則按時間值進行創(chuàng)建生成，并將其置于modalDiv中的id中，而modalDiv則附加到body對象中，最后把modeId添加到當前的對象中；

步驟五、定義按鈕及事件，所述的事件主要是進行表單驗證，根據(jù)ajax提交表單以及返回的結果處理等;

步驟六、定義擴展選項，所述的擴展選項基本屬性有標題、窗口顏色、寬度、關閉按鈕等，所述的擴展選項事件有正在打開、已打開及關閉等；

步驟七、在選項中的onOpening中計算層級索引及拼裝按鈕顯示內容；

步驟八、在onClosed方法中銷毀對象；

步驟九、最后綁定擴展選項到modeId上，并還原層級索引值。

本發(fā)明的有益效果：通過對模態(tài)對話框中的內容進行封裝，自行計算彈出框索引值，實現(xiàn)了模態(tài)對話框可重復利用及能提交表單的目的。有效地解決了網(wǎng)頁對話框彈出相互沖突、不能重復利用且不能直接提交表單的問題。