[发明专利]一种通用层级选择控件的生成方法

说明书

技术领域

本发明涉及一种通用层级选择控件的生成方法，可以兼容B/S结构(浏览器/服务器结构)下的各类主流浏览器，属于互联网技术领域。

背景技术

在网页的开发过程中，通常需要使用层级选择控件，如支持多类多选、多类单选、单类多选、单类单选等，以供用户对选项进行选择并显示相应的数据。但目前所使用的层级选择控件，在不同的浏览器上并不能做到完全兼容，不兼容问题会导致数据不能完美的定位和展现，如在IE6下，弹出层会被下拉框挡住，造成显示页面不美观，并使得用户阅读数据变得困难，显示不兼容的问题使得网页的开发难度增大，并降低了开发效率。

因此，需要一种通用层级选择控件的生成方法，使得生成的选择控件可以兼容各种主流浏览器，如支持IE6或IE6以上的版本、chrome7或以上chrome7以上的版本、fireFox3.6或firFox3.6以上的版本等浏览器。

发明内容

本发明的目的正是为了提供一种通用层级选择控件的生成方法，支持多类多选、多类单选、单类多选、单类单选等功能，支持任意DOM元素上绑定使用等操作，并且支持各种主流浏览器，定位完美无缺，紧随调用元素，调用灵活方便，易于使用，操作方便，提高了效率与性能。

jQuery是优秀的框架，是轻量级的js库，定义了很多便利的函数，使得开发简洁高效，兼容性好。本发明利用jQuery给出了一种通用层级选择控件的生成方法，该通用层级选择控件的生成方法包括以下步骤：

步骤1，在要应用的页面加载jQuery框架以及与通用层级选择控件相关的样式表文件和脚本文件；

步骤2，在应用页面加入DOM元素；

步骤3，定义描述层级结构的页面对象，该页面对象符合J SON数据格式。

步骤4，获得所述DOM元素所对应的对象；

步骤5，绑定到所述DOM元素上实现调用。

本发明的有益效果是：支持任意DOM元素上绑定使用等操作，兼容各种主流浏览器，易于使用，操作方便，提高了效率。

附图说明

图1为本发明的流程图。

图2为本发明的应用示例图。

图3为多省多选效果图。

图4为多省单选效果图。

图5为单省多选效果图。

图6为单省单选效果图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

本发明所涉及的通用层级选择控件基于jQuery实现，数据满足JSON数据格式(JavaScript Object Notation，一种轻量级的数据交换格式)，解决了在不同浏览器上的兼容问题。

图1为本发明的流程图，其包括步骤1-5，显示了通用层级选择控件的生成过程。图2为本发明在地市应用中的效果图，页面中包括有多个选择控件，实现了多类多选、多类单选、单类多选、单类单选等功能。以下以地市应用为例，结合附图1所展示的流程图详细说明本发明所涉及的通用层级选择控件的生成过程。

步骤1，在要应用的页面加载jQuery框架以及与通用层级选择控件相关的样式表文件和脚本文件，具体加载的文件分别是：jquery123_pack.js、jQuery.popSelect.css和jQuery.popSelect.js。

步骤2，在应用页面加入DOM元素，该DOM元素是可获得焦点的元素。如在地市应用中，数据“01：乌鲁木齐”中的“乌鲁木齐”是名称值，01是代码值，DOM元素包括接收名称值得集合、接收代码值得集合。以文本域为例：

接收名称值的集合：<input type＝″text″id＝″regionNames″name＝″regionNames″value＝″请选择″readonly/>

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

根据需要，接收名称值和代码值的两个元素可以只选其中一个或者两个都选。

步骤3，定义描述层级结构的页面对象，该页面对象符合JSON数据格式。

步骤4，获得DOM元素所对应的对象，如：分别接收返回的名称值集合的对象与返回的代码值集合的对象。