CN102637128A - 一种通用层级选择控件的生成方法 - Google Patents

Abstract

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

Description

一种通用层级选择控件的生成方法

技术领域

本发明涉及一种通用层级选择控件的生成方法，可以兼容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元素所对应的对象，如：分别接收返回的名称值集合的对象与返回的代码值集合的对象。

var obj1＝document.getElementById(′regionNames′)；

var obj2＝document.getElementById(′regionValues′)；

步骤5，绑定到DOM元素上实现调用，具体使用popSelect插件，通过参数绑定所述获得的DOM元素所对应的对象，并且通过参数设定所述描述层级结构的页面对象中的元素的选择类型，如多类多选、多类单选、单类多选、单类单选等。

图3为多省多选效果图，其参数设定为：isMultiProvince：″Y″，isMultiRegion：″Y″；

图4为多省单选效果图，即所有大类中只能选一个，也即所有省份中只能选一个地市，其参数设定为：isMultiProvince：″Y″，isMultiRegion：″N″；

图5为单省多选效果图，即只有一个大类，并且其下项可多选，类型下拉框不可见，其参数设定为：isMultiProvince：″N″，isMultiRegion：″Y″；

图6为单省单选效果图，即一个大类，其下只能选一个项，其参数设定为：isMultiProvince：″N″，isMultiRegion：″N″。

具体的调用方式为：

$(′#regionNames′).popSelect({data：myData，rtnNames：obj1，rtnVals：obj2，isMultiProvince：″Y″，isMultiRegion：″Y″})；

参数说明：

Data：待处理的JSON数据(需满足JSON数据格式)

rtnNames：接收返回的名称值集合的DOM对象

rtnVals：接收返回的代码值集合的DOM对象

isMultiProvince：【Y：是，N否】是否多个省(即是否可选择多个大类)

isMultiRegion：【Y：是，N否】是否可选多个地市(每一个大类下的子项)

其中，接收名称值和代码值的都是dom对象，data参数是JSON数据；data数据由于是JSON数据，格式如下：

本发明所提供的通用层级选择控件的生成方法，支持多类多选、多类单选、单类多选、单类单选等功能，支持任意DOM元素上绑定使用等操作，支持各种主流浏览器，易于使用，操作方便，提高了效率，取得了有益的效果。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (16)

1.一种通用层级选择控件的生成方法，包括以下步骤：

步骤1，在要应用的页面加载页面开发框架jQuery框架以及与通用层级选择控件相关的样式表文件和脚本文件；步骤2，在应用页面加入文档对象模型DOM元素；

步骤3，定义描述层级结构的页面对象，该页面对象符合JSON数据格式，其中，JSON数据格式为程序开发中所使用的轻量级数据交换格式；

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

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

2.根据权利要求1所述的通用层级选择控件的生成方法，其特征在于，使用popSelect插件实现调用。

3.根据权利要求2所述的通用层级选择控件的生成方法，通过定义popSelect的参数以绑定所述DOM元素所对应的对象，并且通过参数设定所述描述层级结构的页面对象中的元素的选择类型。

4.根据权利要求3所述的通用层级选择控件的生成方法，其中，所述描述层级结构的页面对象中的元素的选择类型包括：多类多选、多类单选、单类多选、单类单选。

5.根据权利要求1-4任一所述的通用层级选择控件的生成方法，其特征在于，步骤1中加载的样式表文件和脚本文件包括：jquery123_pack.js、jQuery.popSelect.css 和jQuery.popSelect.js。

6.根据权利要求1-4任一所述的通用层级选择控件的生成方法，其特征在于，所述DOM元素是可获得焦点的元素。

7.根据权利要求6所述的通用层级选择控件的生成方法，其特征在于，DOM元素包括接收名称值得集合和/或接收代码值得集合。

8.根据权利要求7所述的通用层级选择控件的生成方法，其特征在于，接收返回的名称值集合的对象和/或返回的代码值集合的对象。

9.一种通用层级选择控件的生成装置，该通用层级选择控件的生成装置包括以下模块：

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

元素定义模块，用于在应用页面加入文档对象模型DOM元素；

页面对象定义模块，用于定义描述层级结构的页面对象，该页面对象符合JSON数据格式，其中，JSON数据格式为程序开发中所使用的轻量级数据交换格式；

对象获得模块，用于获得所述DOM元素所对应的对象；

绑定调用模块，用于绑定到所述DOM元素上实现调用。

10.根据权利要求9所述的通用层级选择控件的生成装置，其特征在于，绑定调用模块通过使用popSelect插件实现调用。

11.根据权利要求10所述的通用层级选择控件的生成装置，绑定调用模块通过定义popSelect的参数以绑定所述DOM元素所对应的对象，并且通过参数设定所述描述层级结构的页面对象中的元素的选择类型。

12.根据权利要求11所述的通用层级选择控件的生成装置，其中，所述描述层级结构的页面对象中的元素的选择类型包括：多类多选、多类单选、单类多选、单类单选。

13.根据权利要求9-12任一所述的通用层级选择控件的生成装置，其特征在于，加载的样式表文件和脚本文件包括：jquery123_pack.js、jQuery.popSelect.css 和jQuery.popSelect.js。

14.根据权利要求9-12任一所述的通用层级选择控件的生成装置，其特征在于，所述DOM元素是可获得焦点的元素。

15.根据权利要求14所述的通用层级选择控件的生成装置，其特征在于，DOM元素包括接收名称值得集合和/或接收代码值得集合。

16.根据权利要求15所述的通用层级选择控件的生成装置，其特征在于，接收返回的名称值集合的对象和/或返回的代码值集合的对象。

Images