專利名稱：一種通用層級選擇控件的生成方法
技術領域：
本發(fā)明涉及一種通用層級選擇控件的生成方法，可以兼容B/S結構(瀏覽器/服務器結構)下的各類主流瀏覽器，屬于互聯(lián)網(wǎng)技術領域。
背景技術：
在網(wǎng)頁的開發(fā)過程中，通常需要使用層級選擇控件，如支持多類多選、多類單選、單類多選、單類單選等，以供用戶對選項進行選擇并顯示相應的數(shù)據(jù)。但目前所使用的層級選擇控件，在不同的瀏覽器上并不能做到完全兼容，不兼容問題會導致數(shù)據(jù)不能完美的定位和展現(xiàn)，如在IE6下，彈出層會被下拉框擋住，造成顯示頁面不美觀，并使得用戶閱讀數(shù)據(jù)變得困難，顯示不兼容的問題使得網(wǎng)頁的開發(fā)難度增大，并降低了開發(fā)效率。因此，需要一種通用層級選擇控件的生成方法，使得生成的選擇控件可以兼容各種主流瀏覽器，如支持IE6或IE6以上的版本、chrome7或以上Chrome7以上的版本、fireFox3. 6或firFox3. 6以上的版本等瀏覽器。

發(fā)明內容
本發(fā)明的目的正是為了提供一種通用層級選擇控件的生成方法，支持多類多選、多類單選、單類多選、單類單選等功能，支持任意DOM元素上綁定使用等操作，并且支持各 種主流瀏覽器，定位完美無缺，緊隨調用元素，調用靈活方便，易于使用，操作方便，提高了效率與性能。jQuery是優(yōu)秀的Javascr I Pt框架，是輕量級的js庫，定義了很多便利的函數(shù)，
使得開發(fā)簡潔高效，兼容性好。本發(fā)明利用jQuery給出了一種通用層級選擇控件的生成方法，該通用層級選擇控件的生成方法包括以下步驟步驟I，在要應用的頁面加載jQuery框架以及與通用層級選擇控件相關的樣式表文件和腳本文件；步驟2，在應用頁面加入DOM元素；步驟3，定義描述層級結構的頁面對象，該頁面對象符合J SON數(shù)據(jù)格式。步驟4，獲得所述DOM元素所對應的對象；步驟5，綁定到所述DOM元素上實現(xiàn)調用。本發(fā)明的有益效果是支持任意DOM元素上綁定使用等操作，兼容各種主流瀏覽器，易于使用，操作方便，提高了效率。


圖I為本發(fā)明的流程圖。圖2為本發(fā)明的應用示例圖。圖3為多省多選效果圖。圖4為多省單選效果圖。
圖5為單省多選效果圖。圖6為單省單選效果圖。
具體實施例方式以下結合附圖對本發(fā)明的原理和特征進行描述，所舉實例只用于解釋本發(fā)明，并非用于限定本發(fā)明的范圍。本發(fā)明所涉及的通用層級選 擇控件基于jQuery實現(xiàn)，數(shù)據(jù)滿足JSON數(shù)據(jù)格式(JavaScript Object Notation,—種輕量級的數(shù)據(jù)交換格式)，解決了在不同瀏覽器上的兼容問題。圖I為本發(fā)明的流程圖，其包括步驟1-5，顯示了通用層級選擇控件的生成過程。圖2為本發(fā)明在地市應用中的效果圖，頁面中包括有多個選擇控件，實現(xiàn)了多類多選、多類單選、單類多選、單類單選等功能。以下以地市應用為例，結合附圖I所展示的流程圖詳細說明本發(fā)明所涉及的通用層級選擇控件的生成過程。步驟I，在要應用的頁面加載jQuery框架以及與通用層級選擇控件相關的樣式表文件和腳本文件，具體加載的文件分別是jqueryl23_pack. js、jQuery. popSelect. css和jQuery. popSelect. js。
<1 ink rel=丨丨stylesheet丨丨 href=" jQuery. popSelect. css" type="text/css"/>
〈script type="text/javascript" src="jquery123-pack. js"></script>
〈script type="text/javascript" src="jQuery. popSelect. js"></script>步驟2,在應用頁面加入DOM元素,該DOM元素是可獲得焦點的元素。如在地市應用中，數(shù)據(jù)“01 :烏魯木齊”中的“烏魯木齊”是名稱值，01是代碼值，DOM元素包括接收名稱值得集合、接收代碼值得集合。以文本域為例接收名稱值的集合〈inputtype = " text " id = " regionNames " name="regionNames " value ="請選擇 〃 readonly/)接收代碼值的集合〈inputtype = " text " id = " regionValues " name="regionValues" value = " " readonly/)根據(jù)需要，接收名稱值和代碼值的兩個元素可以只選其中一個或者兩個都選。步驟3，定義描述層級結構的頁面對象，該頁面對象符合JSON數(shù)據(jù)格式。
var myData = ' {
"089": {
"name丨丨新疆丨丨，丨丨city丨丨:{
"01": n烏魯木齊”,"02":丨'昌吉丨"03": n奎屯”, "04":丨丨石

河子", "05":丨丨吐魯番”，"06":丨丨巴州", "07":丨丨阿克蘇 ", "08": ”喀什n, "09": ”伊犁n, "10": ”克拉瑪依n, "11":丨丨 哈密n, "12":"博州", "13":"塔城n, "14":"阿勒泰 ", "15": n克州n, "16":丨'和田丨'
}
}
}'；
步驟4，獲得DOM元素所對應的對象，如分別接收返回的名稱值集合的對象與返回的代碼值集合的對象。var objl = document. getElementById(/ regionNames')；var obj2 = document. getElementById(/ regionValues')；步驟5,綁定到DOM元素上實現(xiàn)調用，具體使用popSelect插件,通過參數(shù)綁定所述獲得的DOM元素所對應的對象，并且通過參數(shù)設定所述描述層級結構的頁面對象中的元素的選擇類型，如多類多選、多類單選、單類多選、單類單選等。圖3為多省多選效果圖，其參數(shù)設定為isMultiProvince " Y "，isMultiRegion " Y"；圖4為多省單選效果圖，即所有大類中只能選一個，也即所有省份中只能選一個地市，其參數(shù)設定為isMultiProvince : " Y" , isMultiRegion " N"；圖5為單省多選效果圖，即只有一個大類，并且其下項可多選，類型下拉框不可見，其參數(shù)設定為isMultiProvince : " N" , isMultiRegion " Y"；圖6為單省單選效果圖，即一個大類，其下只能選一個項，其參數(shù)設定為isMultiProvince " N" , isMultiRegion " N"。具體的調用方式為$( ' #regionNames ' ).popSelect({data myData, rtnNames objl, rtnVals obj2, isMultiProvince " Y" , isMultiRegion " Y" })；參數(shù)說明Data :待處理的JSON數(shù)據(jù)(需滿足JSON數(shù)據(jù)格式)rtnNames :接收返回的名稱值集合的DOM對象rtnVals :接收返回的代碼值集合的DOM對象isMultiProvince [Y :是，N否是否多個省(即是否可選擇多個大類)isMultiRegion :Y :是，N否是否可選多個地市(每一個大類下的子項)其中，接收名稱值和代碼值的都是dom對象，data參數(shù)是JSON數(shù)據(jù)；data數(shù)據(jù)由于是JSON數(shù)據(jù)，格式如下
本發(fā)明所提供的通用層級選擇控件的生成方法，支持多類多選、多類單選、單類多選、單類單選等功能，支持任意DOM元素上綁定使用等操作，支持各種主流瀏覽器，易于使用，操作方便，提高了效率，取得了有益的效果。以上所述僅為本發(fā)明的較佳實施例，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發(fā)明的保護范圍之內。
權利要求
1.一種通用層級選擇控件的生成方法，包括以下步驟 步驟I，在要應用的頁面加載頁面開發(fā)框架jQuery框架以及與通用層級選擇控件相關的樣式表文件和腳本文件；步驟2，在應用頁面加入文檔對象模型DOM元素； 步驟3，定義描述層級結構的頁面對象，該頁面對象符合JSON數(shù)據(jù)格式，其中，JSON數(shù)據(jù)格式為程序開發(fā)中所使用的輕量級數(shù)據(jù)交換格式； 步驟4，獲得所述DOM元素所對應的對象； 步驟5，綁定到所述DOM元素上實現(xiàn)調用。
2.根據(jù)權利要求I所述的通用層級選擇控件的生成方法，其特征在于，使用popSelect插件實現(xiàn)調用。
3.根據(jù)權利要求2所述的通用層級選擇控件的生成方法，通過定義popSelect的參數(shù)以綁定所述DOM元素所對應的對象，并且通過參數(shù)設定所述描述層級結構的頁面對象中的元素的選擇類型。
4.根據(jù)權利要求3所述的通用層級選擇控件的生成方法，其中，所述描述層級結構的頁面對象中的元素的選擇類型包括多類多選、多類單選、單類多選、單類單選。
5.根據(jù)權利要求1-4任一所述的通用層級選擇控件的生成方法，其特征在于，步驟I中加載的樣式表文件和腳本文件包括jqueryl23_pack. js、jQuery. popSelect. css和jQuery. popSelect. js。
6.根據(jù)權利要求1-4任一所述的通用層級選擇控件的生成方法，其特征在于，所述DOM元素是可獲得焦點的元素。
7.根據(jù)權利要求6所述的通用層級選擇控件的生成方法，其特征在于，DOM元素包括接收名稱值得集合和/或接收代碼值得集合。
8.根據(jù)權利要求7所述的通用層級選擇控件的生成方法，其特征在于，接收返回的名稱值集合的對象和/或返回的代碼值集合的對象。
9.一種通用層級選擇控件的生成裝置，該通用層級選擇控件的生成裝置包括以下模塊 加載模塊，用于在要應用的頁面加載頁面開發(fā)框架jQuery以及與通用層級選擇控件相關的樣式表文件和腳本文件； 元素定義模塊，用于在應用頁面加入文檔對象模型DOM元素； 頁面對象定義模塊，用于定義描述層級結構的頁面對象，該頁面對象符合JSON數(shù)據(jù)格式，其中，JSON數(shù)據(jù)格式為程序開發(fā)中所使用的輕量級數(shù)據(jù)交換格式； 對象獲得模塊，用于獲得所述DOM元素所對應的對象； 綁定調用模塊，用于綁定到所述DOM元素上實現(xiàn)調用。
10.根據(jù)權利要求9所述的通用層級選擇控件的生成裝置，其特征在于，綁定調用模塊通過使用popSelect插件實現(xiàn)調用。
11.根據(jù)權利要求10所述的通用層級選擇控件的生成裝置，綁定調用模塊通過定義popSelect的參數(shù)以綁定所述DOM元素所對應的對象，并且通過參數(shù)設定所述描述層級結構的頁面對象中的元素的選擇類型。
12.根據(jù)權利要求11所述的通用層級選擇控件的生成裝置，其中，所述描述層級結構的頁面對象中的元素的選擇類型包括多類多選、多類單選、單類多選、單類單選。
13.根據(jù)權利要求9-12任一所述的通用層級選擇控件的生成裝置，其特征在于，加載的樣式表文件和腳本文件包括jqueryl23_pack. js、j Query. popSelect. css 和 jQuery.popSelect. js。
14.根據(jù)權利要求9-12任一所述的通用層級選擇控件的生成裝置，其特征在于，所述DOM元素是可獲得焦點的元素。
15.根據(jù)權利要求14所述的通用層級選擇控件的生成裝置，其特征在于，DOM元素包括接收名稱值得集合和/或接收代碼值得集合。
16.根據(jù)權利要求15所述的通用層級選擇控件的生成裝置，其特征在于，接收返回的名稱值集合的對象和/或返回的代碼值集合的對象。
全文摘要
本發(fā)明基于jQuery提供了一種通用層級選擇控件的生成方法，支持多類多選、多類單選、單類多選、單類單選等功能，支持任意DOM元素上綁定使用等操作，并且支持各種主流瀏覽器，定位完美，緊隨調用元素，調用靈活方便，易于使用，提高了效率與性能。
文檔編號G06F9/44GK102637128SQ201210067419
公開日2012年8月15日 申請日期2012年3月14日 優(yōu)先權日2012年3月14日
發(fā)明者麥麥提亞爾吾斯曼 申請人:北京神州數(shù)碼思特奇信息技術股份有限公司