[发明专利]一种可多选控件的实现方法

说明书

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

附图说明

图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*/

/*待选项未选中*/