一种可多选控件的实现方法
【技术领域】
[0001] 本发明属于计算机技术的信息输入领域，尤其涉及一种可多选控件的实现方法。
【背景技术】
[0002] 在计算机系统的人机交互界面中，常用可多选控件进行信息的选择和输入，常用 的可多选控件有下拉列表、树形结构、复选框等，这些可多选控件的使用非常普遍，但这些 可多选控件存在较大的易用性改进空间。
[0003] 下拉列表需要用鼠标点击一次才能把其中的可选项列示出来，如果可选项比较多 还需要进一步点击或拖动滚动条，需要选择其中的多个待选项时还需按住一个特定的键和 鼠标配合选择。鼠标操作次数多，鼠标点选区域小、选中困难。另外还需构造"全部"、"反选" 两个待选项以加快选择，而"全部"、"反选"并非是真的输入项内容，和待选项无区别地放置 在一起，不易于使用人员的理解。另外下拉列表选择完毕后会恢复折叠状态，下拉显示的待 选项全部隐藏了，包括选中了的待选项也看不见了，如此就需要使用人员自行记忆宄竟选 择了哪些内容。下拉列表这种常用可多选控件存在的上述问题就是易用性改进的空间。
[0004] 树形结构也存在需要点击展现、使用滚动条、多选及构造"全部"、"反选"两个待选 项、需记忆选择内容，和下拉列表有类似问题和优化的空间。
[0005] 复选框的问题在于每个待选项前面都需要设置一个小方框，小方框不但占用空 间，而且只有点击小方框才能进行开关选择，而小方框又不容易点中，易用性可优化。
【发明内容】
[0006] 本发明针对常用可多选控件存在易用性的问题，提供了一种可多选控件的实现方 法。
[0007] 方法是将全部待选项平铺并连接在一起显示，待选项之间共用边框，单击待选项 即可完成该待选项的开关选择。
[0008] 只在需要全选功能时才显示相应的"重置"按钮，不需要时自动隐藏。"反选"、"重 置"按钮和待选项之间保留一段间隔，并和待选项使用不同的颜色加以区别。
[0009] 待选项通过颜色变化指示是否处于选中状态，通过颜色的变化指示是否是当前 项。如此即使待选项很多，也能一目了然，知道选择了哪些，该选哪个，无需记忆。
【附图说明】
[0010] 图1为本发明的界面显示效果示意。待选项全部平铺出来，连接在一起显示。"反 选"按钮与待选项之间留有间隙，颜色也不一样。全部选中时不显示"重置"按钮，选中的当 前项和其他项相比，背景色不同，如图中"北京"，此时单击就取消了其选中状态。
[0011] 图2为本发明的界面显示效果示意。有待选项未选中时显示"重置"按钮，点击"重 置"按钮可以选中所有待选项。北京是未选中的当前待选项，此时单击可选中。
[0012] 图3为本发明的界面显示效果，未选中的当前项和非当前项颜色不同。
【具体实施方式】
[0013] 为使本发明的目的、技术方案和优点更加清楚，以下将结合实例来详细说明本发 明一种可多选控件的实现方法。借此对本发明一种可多选控件的实现方法如何应用技术手 段解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。
[0014] Web页面中的实施例
[0015] 本发明一种可多选控件的实现方法可以在Client/Server架构下使用，也可以在 基于浏览器的Web页面中使用。本例详述Web页面中实施方法、步骤。
[0016] 步骤1 :设计可选项展示时的CSS样式。
[0017] 样式是可选项显示时的外观定义，包括显示文字的大小、显示的高度、间隙的大 小、边框的宽度、边框的颜色、背景色、前景色等。
[0018] 可选项的样式针对可选项在未选中时、选中时、是当前项时、不是当前项时分别设 置。
[0019] 反选及重置功能按钮也需进行样式设置。
[0020] 全部样式设置如下：
[0021] /*待选项选中*/
[0022] ? Hermes-or {}
[0023] ? Hermes-or ul {}
[0024] . Hermes-or ul
[0025] li{float ：left background ：#00B2FC ；line~height ：22px ；margin-left ：-lpx ； margin-top ：-lpx ；}
[0026] .Hermes_or ul li a {color :#fff ;display :block ;padding :3px 12px ； border-left ：lpx#00B2FC solid；}
[0027] ? Hermes-or ul li a :hover {background :#3399ff ;}/*#00C0F9*/
[0028] /*待选项未选中*/
[0029] . Hermes_or. no {background ：#fff ；line-height ：20px ；color ：#333 ；border ： lpx #00B2FC solid ;margin_left :_lpx ;}
[0030] . Hermes_or. no ：hover {background ：#edf5fc ；color ：#000 ；}
[0031] .Hermes_or. no_left{border-left ：lpx#00B2FC solid ；}
[0032] /*按钮反选V
[0033] . Hermes.choice{border ：lpx#35AF54 solid ；border-radius ：2px ；}
[0034] . Hermes, choice ul {}
[0035] . Hermes, choice ul li {float ：left ；}
[0036] . Hermes, choice a {display :block ;padding :0px 6px ；height ：25px ； line-height ：25px ；border-left ：lpx #81CF5E solid ；}
[0037] . Hermes, choice a ：hover {background ：#d3e9cd ；}
[0038] .Hermes.choice, anti{background：#fff ；color ：#35af54 ；height ：25px ； line-height ：25px ；}
[0039] . Hermes, choice, anti ：hover {background ：#d3e9cd ；}
[0040] /* 重置 */
[0041] .Hermes, choice, reset{background ：#81CF5E ；color ：#fff ；height ：25px ； line-height ：25px ；cursor ：def ault ；}
[0042] .Hermes, choice, reset ：hover {background ：#81CF5E ；color ：#fff ；height ： 25px ;line_height :25px ;cur sor ：default；}
[0043] 步骤2:编制事件处理函数。
[0044] 在待选项上点击、以及在反选、重置功能按钮上点击需要进行相应的处理，这部分 代码在鼠标点击事件中调用、执行。
[0045] 在待选项上点击事件的处理：
[0046] 判断如果待选项没有类定义，则将待选项添加取消选中的类定义，否则取消待选 项上的类定义。
[0047] 判断如果待选项有未选中的，显示反选功能按钮，否则隐藏反选功能按钮。
[0048] Javascrip和JQuery的函数代码如下：
【主权项】
1. 一种可多选控件的实现方法，其特征在于，包括： (1) 待选项全部平铺显示； (2) 单击待选项即可完成该待选项的开关选择； (3) 通过颜色变化指示待选项是否处于选中状态； (4) 通过颜色的变化指示待选项是否是当前项； (5) 只在待选项未全部选中时显示具备全选功能的按钮。
2. 如权利要求1所述方法，平铺显示时待选项连接在一起显示并共用边框；通过充填 颜色、字体颜色的变化来标记是否处于选中状态；通过充填颜色、字体颜色的变化来标记是 否处于当前项；全选功能的按钮可以是提示为"RESET"、"ALL"、"重置"、"全选"、"全部"等。
【专利摘要】本发明针对常用可多选控件存在易用性差的问题，公开一种可多选控件的实现方法。包括将全部待选项平铺并连接在一起显示；单击待选项即可完成该待选项的开关选择；待选项只通过颜色变化指示待选项是否处于选中状态、是否是当前项等。
【IPC分类】G06F3-0482, G06F9-44
【公开号】CN104850315
【申请号】CN201510271138
【发明人】冯昱川, 高雅梅
【申请人】北京挺软科技有限公司
【公开日】2015年8月19日
【申请日】2015年5月26日