[發明專利]一種可多選控件的實現方法

在審

• 申請號: 201510271138.X
• 申請日: 2015-05-26
• 公開（公告）號: CN104850315A
• 公開（公告）日: 2015-08-19
• 發明（設計）人: 馮昱川;高雅梅
• 申請（專利權）人: 北京挺軟科技有限公司
• 主分類號: G06F3/0482
• 分類號: G06F3/0482;G06F9/44
• 代理公司: 暫無信息
• 代理人: 暫無信息

技術領域

本發明屬于計算機技術的信息輸入領域，尤其涉及一種可多選控件的實現方法。

背景技術

在計算機系統的人機交互界面中，常用可多選控件進行信息的選擇和輸入，常用的可多選控件有下拉列表、樹形結構、復選框等，這些可多選控件的使用非常普遍，但這些可多選控件存在較大的易用性改進空間。

下拉列表需要用鼠標點擊一次才能把其中的可選項列示出來，如果可選項比較多還需要進一步點擊或拖動滾動條，需要選擇其中的多個待選項時還需按住一個特定的鍵和鼠標配合選擇。鼠標操作次數多，鼠標點選區域小、選中困難。另外還需構造“全部”、“反選”兩個待選項以加快選擇，而“全部”、“反選”并非是真的輸入項內容，和待選項無區別地放置在一起，不易于使用人員的理解。另外下拉列表選擇完畢后會恢復折疊狀態，下拉顯示的待選項全部隱藏了，包括選中了的待選項也看不見了，如此就需要使用人員自行記憶究竟選擇了哪些內容。下拉列表這種常用可多選控件存在的上述問題就是易用性改進的空間。

樹形結構也存在需要點擊展現、使用滾動條、多選及構造“全部”、“反選”兩個待選項、需記憶選擇內容，和下拉列表有類似問題和優化的空間。

復選框的問題在于每個待選項前面都需要設置一個小方框，小方框不但占用空間，而且只有點擊小方框才能進行開關選擇，而小方框又不容易點中，易用性可優化。

發明內容

本發明針對常用可多選控件存在易用性的問題，提供了一種可多選控件的實現方法。

方法是將全部待選項平鋪并連接在一起顯示，待選項之間共用邊框，單擊待選項即可完成該待選項的開關選擇。

只在需要全選功能時才顯示相應的“重置”按鈕，不需要時自動隱藏。“反選”、“重置”按鈕和待選項之間保留一段間隔，并和待選項使用不同的顏色加以區別。

待選項通過顏色變化指示是否處于選中狀態，通過顏色的變化指示是否是當前項。如此即使待選項很多，也能一目了然，知道選擇了哪些，該選哪個，無需記憶。

附圖說明

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

/*待選項未選中*/