CN104850315A

CN104850315A - 一种可多选控件的实现方法

Info

Publication number: CN104850315A
Application number: CN201510271138.XA
Authority: CN
Inventors: 冯昱川; 高雅梅
Original assignee: Beijing Ting Ruan Science And Technology Ltd
Current assignee: Beijing Ting Ruan Science And Technology Ltd
Priority date: 2015-05-26
Filing date: 2015-05-26
Publication date: 2015-08-19

Abstract

本发明针对常用可多选控件存在易用性差的问题，公开一种可多选控件的实现方法。包括将全部待选项平铺并连接在一起显示；单击待选项即可完成该待选项的开关选择；待选项只通过颜色变化指示待选项是否处于选中状态、是否是当前项等。

Description

一种可多选控件的实现方法

技术领域

本发明属于计算机技术的信息输入领域，尤其涉及一种可多选控件的实现方法。

背景技术

在计算机系统的人机交互界面中，常用可多选控件进行信息的选择和输入，常用的可多选控件有下拉列表、树形结构、复选框等，这些可多选控件的使用非常普遍，但这些可多选控件存在较大的易用性改进空间。

下拉列表需要用鼠标点击一次才能把其中的可选项列示出来，如果可选项比较多还需要进一步点击或拖动滚动条，需要选择其中的多个待选项时还需按住一个特定的键和鼠标配合选择。鼠标操作次数多，鼠标点选区域小、选中困难。另外还需构造“全部”、“反选”两个待选项以加快选择，而“全部”、“反选”并非是真的输入项内容，和待选项无区别地放置在一起，不易于使用人员的理解。另外下拉列表选择完毕后会恢复折叠状态，下拉显示的待选项全部隐藏了，包括选中了的待选项也看不见了，如此就需要使用人员自行记忆究竟选择了哪些内容。下拉列表这种常用可多选控件存在的上述问题就是易用性改进的空间。

树形结构也存在需要点击展现、使用滚动条、多选及构造“全部”、“反选”两个待选项、需记忆选择内容，和下拉列表有类似问题和优化的空间。

复选框的问题在于每个待选项前面都需要设置一个小方框，小方框不但占用空间，而且只有点击小方框才能进行开关选择，而小方框又不容易点中，易用性可优化。

发明内容

本发明针对常用可多选控件存在易用性的问题，提供了一种可多选控件的实现方法。

方法是将全部待选项平铺并连接在一起显示，待选项之间共用边框，单击待选项即可完成该待选项的开关选择。

只在需要全选功能时才显示相应的“重置”按钮，不需要时自动隐藏。“反选”、“重置”按钮和待选项之间保留一段间隔，并和待选项使用不同的颜色加以区别。

待选项通过颜色变化指示是否处于选中状态，通过颜色的变化指示是否是当前项。如此即使待选项很多，也能一目了然，知道选择了哪些，该选哪个，无需记忆。

附图说明

图1为本发明的界面显示效果示意。待选项全部平铺出来，连接在一起显示。“反选”按钮与待选项之间留有间隙，颜色也不一样。全部选中时不显示“重置”按钮，选中的当前项和其他项相比，背景色不同，如图中“北京”，此时单击就取消了其选中状态。

图2为本发明的界面显示效果示意。有待选项未选中时显示“重置”按钮，点击“重置”按钮可以选中所有待选项。北京是未选中的当前待选项，此时单击可选中。

图3为本发明的界面显示效果，未选中的当前项和非当前项颜色不同。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，以下将结合实例来详细说明本发明一种可多选控件的实现方法。借此对本发明一种可多选控件的实现方法如何应用技术手段解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。

Web页面中的实施例

本发明一种可多选控件的实现方法可以在Client/Server架构下使用，也可以在基于浏览器的Web页面中使用。本例详述Web页面中实施方法、步骤。

步骤1：设计可选项展示时的CSS样式。

样式是可选项显示时的外观定义，包括显示文字的大小、显示的高度、间隙的大小、边框的宽度、边框的颜色、背景色、前景色等。

可选项的样式针对可选项在未选中时、选中时、是当前项时、不是当前项时分别设置。

反选及重置功能按钮也需进行样式设置。

全部样式设置如下：

/*待选项选中*/

.Hermes_or{}

.Hermes_or ul{}

.Hermes_or ul

li{float：left；background：#00B2FC；line-height：22px；margin-left：-1px；margin-top：-1px；}

.Hermes_or ul li a{color：#fff；display：block；padding：3px 12px；border-left：1px#00B2FC solid；}

.Hermes_or ul li a：hover{background：#3399ff；}/*#00C0F9*/

/*待选项未选中*/

.Hermes_or.no{background：#fff；line-height：20px；color：#333；border：1px #00B2FC solid；margin-left：-1px；}

.Hermes_or.no：hover{background：#edf5fc；color：#000；}

.Hermes_or.no_left{border-left：1px#00B2FC solid；}

/*按钮反选*/

.Hermes.choice{border：1px#35AF54 solid；border-radius：2px；}

.Hermes.choice ul{}

.Hermes.choice ul li{float：left；}

.Hermes.choice a{display：block；padding：0px 6px；height：25px；line-height：25px；border-left：1px #81CF5E solid；}

.Hermes.choice a：hover{background：#d3e9cd；}

.Hermes.choice.anti{background：#fff；color：#35af54；height：25px；line-height：25px；}

.Hermes.choice.anti：hover{background：#d3e9cd；}

/*重置*/

.Hermes.choice.reset{background：#81CF5E；color：#fff；height：25px；line-height：25px；cursor：def ault；}

.Hermes.choice.reset：hover{background：#81CF5E；color：#fff；height：25px；line-height：25px；cur sor：default；}

步骤2：编制事件处理函数。

在待选项上点击、以及在反选、重置功能按钮上点击需要进行相应的处理，这部分代码在鼠标点击事件中调用、执行。

在待选项上点击事件的处理：

判断如果待选项没有类定义，则将待选项添加取消选中的类定义，否则取消待选项上的类定义。

判断如果待选项有未选中的，显示反选功能按钮，否则隐藏反选功能按钮。

Javascrip和JQuery的函数代码如下：

重置及反选功能按钮上的点击事件处理：

重置及反选的点击处理大部分逻辑类似可以用一个函数实现，用一个参数区别具体是哪个操作。

如果是点击的重置功能按钮，则逐一处理所有的待选项，将待选项的类定义清除，把待选项置为选中状态。然后隐藏重置功能按钮。

如果是点击反选功能按钮，则逐一判断处理所有的待选项，如果待选项未选中的置未选中状态，已经是选中状态的改为非选中状态。即有“no”类定义的待选项取消定义，没有的增加“no”类的定义。然后显示重置按钮。

Javascrip和JQuery的函数代码如下：

步骤3：获取待选项内容。

从文件或数据库中获取待选项内容，如图1所示的“北京”、“上海”、……。将获取到的待选项存到col对象的valList列表中供后续拼接控件使用。

步骤4：构造控件并显示。

针对获取到的全部输入待选项循环拼接构造的字符串，使用HTML的div、ul、li等元素拼接待选项，拼接的同时挂接鼠标点击事件的处理函数。

构造反选、重置功能按钮，也要挂接这两个按钮的点击事件处理函数。

设置页面元素的innerHTML属性内容，将拼接的输入待选项生成并显示出来。

判断隐藏或显示重置功能按钮。

Javascrip和JQuery的函数代码如下：

。

Claims

1.一种可多选控件的实现方法，其特征在于，包括：

(1)待选项全部平铺显示；

(2)单击待选项即可完成该待选项的开关选择；

(3)通过颜色变化指示待选项是否处于选中状态；

(4)通过颜色的变化指示待选项是否是当前项；

(5)只在待选项未全部选中时显示具备全选功能的按钮。

2.如权利要求1所述方法，平铺显示时待选项连接在一起显示并共用边框；通过充填颜色、字体颜色的变化来标记是否处于选中状态；通过充填颜色、字体颜色的变化来标记是否处于当前项；全选功能的按钮可以是提示为“RESET”、“ALL”、“重置”、“全选”、“全部”等。