[發(fā)明專利]一種通用層級選擇控件的生成方法

有效

• 申請?zhí)枺?/td>: 201210067419.X
• 申請日: 2012-03-14
• 公開（公告）號: CN102637128A
• 公開（公告）日: 2012-08-15
• 發(fā)明（設(shè)計）人: 麥麥提亞爾吾斯曼
• 申請（專利權(quán)）人: 北京神州數(shù)碼思特奇信息技術(shù)股份有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 北京輕創(chuàng)知識產(chǎn)權(quán)代理有限公司 11212
• 代理人: 楊立

技術(shù)領(lǐng)域

本發(fā)明涉及一種通用層級選擇控件的生成方法，可以兼容B/S結(jié)構(gòu)(瀏覽器/服務(wù)器結(jié)構(gòu))下的各類主流瀏覽器，屬于互聯(lián)網(wǎng)技術(shù)領(lǐng)域。

背景技術(shù)

在網(wǎng)頁的開發(fā)過程中，通常需要使用層級選擇控件，如支持多類多選、多類單選、單類多選、單類單選等，以供用戶對選項進行選擇并顯示相應(yīng)的數(shù)據(jù)。但目前所使用的層級選擇控件，在不同的瀏覽器上并不能做到完全兼容，不兼容問題會導致數(shù)據(jù)不能完美的定位和展現(xiàn)，如在IE6下，彈出層會被下拉框擋住，造成顯示頁面不美觀，并使得用戶閱讀數(shù)據(jù)變得困難，顯示不兼容的問題使得網(wǎng)頁的開發(fā)難度增大，并降低了開發(fā)效率。

因此，需要一種通用層級選擇控件的生成方法，使得生成的選擇控件可以兼容各種主流瀏覽器，如支持IE6或IE6以上的版本、chrome7或以上chrome7以上的版本、fireFox3.6或firFox3.6以上的版本等瀏覽器。

發(fā)明內(nèi)容

本發(fā)明的目的正是為了提供一種通用層級選擇控件的生成方法，支持多類多選、多類單選、單類多選、單類單選等功能，支持任意DOM元素上綁定使用等操作，并且支持各種主流瀏覽器，定位完美無缺，緊隨調(diào)用元素，調(diào)用靈活方便，易于使用，操作方便，提高了效率與性能。

jQuery是優(yōu)秀的框架，是輕量級的js庫，定義了很多便利的函數(shù)，使得開發(fā)簡潔高效，兼容性好。本發(fā)明利用jQuery給出了一種通用層級選擇控件的生成方法，該通用層級選擇控件的生成方法包括以下步驟：

步驟1，在要應(yīng)用的頁面加載jQuery框架以及與通用層級選擇控件相關(guān)的樣式表文件和腳本文件；

步驟2，在應(yīng)用頁面加入DOM元素；

步驟3，定義描述層級結(jié)構(gòu)的頁面對象，該頁面對象符合J?SON數(shù)據(jù)格式。

步驟4，獲得所述DOM元素所對應(yīng)的對象；

步驟5，綁定到所述DOM元素上實現(xiàn)調(diào)用。

本發(fā)明的有益效果是：支持任意DOM元素上綁定使用等操作，兼容各種主流瀏覽器，易于使用，操作方便，提高了效率。

附圖說明

圖1為本發(fā)明的流程圖。

圖2為本發(fā)明的應(yīng)用示例圖。

圖3為多省多選效果圖。

圖4為多省單選效果圖。

圖5為單省多選效果圖。

圖6為單省單選效果圖。

具體實施方式

以下結(jié)合附圖對本發(fā)明的原理和特征進行描述，所舉實例只用于解釋本發(fā)明，并非用于限定本發(fā)明的范圍。

本發(fā)明所涉及的通用層級選擇控件基于jQuery實現(xiàn)，數(shù)據(jù)滿足JSON數(shù)據(jù)格式(JavaScript?Object?Notation，一種輕量級的數(shù)據(jù)交換格式)，解決了在不同瀏覽器上的兼容問題。

圖1為本發(fā)明的流程圖，其包括步驟1-5，顯示了通用層級選擇控件的生成過程。圖2為本發(fā)明在地市應(yīng)用中的效果圖，頁面中包括有多個選擇控件，實現(xiàn)了多類多選、多類單選、單類多選、單類單選等功能。以下以地市應(yīng)用為例，結(jié)合附圖1所展示的流程圖詳細說明本發(fā)明所涉及的通用層級選擇控件的生成過程。

步驟1，在要應(yīng)用的頁面加載jQuery框架以及與通用層級選擇控件相關(guān)的樣式表文件和腳本文件，具體加載的文件分別是：jquery123_pack.js、jQuery.popSelect.css和jQuery.popSelect.js。

步驟2，在應(yīng)用頁面加入DOM元素，該DOM元素是可獲得焦點的元素。如在地市應(yīng)用中，數(shù)據(jù)“01：烏魯木齊”中的“烏魯木齊”是名稱值，01是代碼值，DOM元素包括接收名稱值得集合、接收代碼值得集合。以文本域為例：

接收名稱值的集合：<input?type＝″text″id＝″regionNames″name＝″regionNames″value＝″請選擇″readonly/>

接收代碼值的集合：<input?type＝″text″id＝″regionValues″name＝″regionValues″value＝″″readonly/>

根據(jù)需要，接收名稱值和代碼值的兩個元素可以只選其中一個或者兩個都選。

步驟3，定義描述層級結(jié)構(gòu)的頁面對象，該頁面對象符合JSON數(shù)據(jù)格式。

步驟4，獲得DOM元素所對應(yīng)的對象，如：分別接收返回的名稱值集合的對象與返回的代碼值集合的對象。