一種可多選控件的實(shí)現(xiàn)方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明屬于計(jì)算機(jī)技術(shù)的信息輸入領(lǐng)域，尤其涉及一種可多選控件的實(shí)現(xiàn)方法。
【背景技術(shù)】
[0002] 在計(jì)算機(jī)系統(tǒng)的人機(jī)交互界面中，常用可多選控件進(jìn)行信息的選擇和輸入，常用 的可多選控件有下拉列表、樹(shù)形結(jié)構(gòu)、復(fù)選框等，這些可多選控件的使用非常普遍，但這些 可多選控件存在較大的易用性改進(jìn)空間。
[0003] 下拉列表需要用鼠標(biāo)點(diǎn)擊一次才能把其中的可選項(xiàng)列示出來(lái)，如果可選項(xiàng)比較多 還需要進(jìn)一步點(diǎn)擊或拖動(dòng)滾動(dòng)條，需要選擇其中的多個(gè)待選項(xiàng)時(shí)還需按住一個(gè)特定的鍵和 鼠標(biāo)配合選擇。鼠標(biāo)操作次數(shù)多，鼠標(biāo)點(diǎn)選區(qū)域小、選中困難。另外還需構(gòu)造"全部"、"反選" 兩個(gè)待選項(xiàng)以加快選擇，而"全部"、"反選"并非是真的輸入項(xiàng)內(nèi)容，和待選項(xiàng)無(wú)區(qū)別地放置 在一起，不易于使用人員的理解。另外下拉列表選擇完畢后會(huì)恢復(fù)折疊狀態(tài)，下拉顯示的待 選項(xiàng)全部隱藏了，包括選中了的待選項(xiàng)也看不見(jiàn)了，如此就需要使用人員自行記憶宄竟選 擇了哪些內(nèi)容。下拉列表這種常用可多選控件存在的上述問(wèn)題就是易用性改進(jìn)的空間。
[0004] 樹(shù)形結(jié)構(gòu)也存在需要點(diǎn)擊展現(xiàn)、使用滾動(dòng)條、多選及構(gòu)造"全部"、"反選"兩個(gè)待選 項(xiàng)、需記憶選擇內(nèi)容，和下拉列表有類似問(wèn)題和優(yōu)化的空間。
[0005] 復(fù)選框的問(wèn)題在于每個(gè)待選項(xiàng)前面都需要設(shè)置一個(gè)小方框，小方框不但占用空 間，而且只有點(diǎn)擊小方框才能進(jìn)行開(kāi)關(guān)選擇，而小方框又不容易點(diǎn)中，易用性可優(yōu)化。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明針對(duì)常用可多選控件存在易用性的問(wèn)題，提供了一種可多選控件的實(shí)現(xiàn)方 法。
[0007] 方法是將全部待選項(xiàng)平鋪并連接在一起顯示，待選項(xiàng)之間共用邊框，單擊待選項(xiàng) 即可完成該待選項(xiàng)的開(kāi)關(guān)選擇。
[0008] 只在需要全選功能時(shí)才顯示相應(yīng)的"重置"按鈕，不需要時(shí)自動(dòng)隱藏。"反選"、"重 置"按鈕和待選項(xiàng)之間保留一段間隔，并和待選項(xiàng)使用不同的顏色加以區(qū)別。
[0009] 待選項(xiàng)通過(guò)顏色變化指示是否處于選中狀態(tài)，通過(guò)顏色的變化指示是否是當(dāng)前 項(xiàng)。如此即使待選項(xiàng)很多，也能一目了然，知道選擇了哪些，該選哪個(gè)，無(wú)需記憶。
【附圖說(shuō)明】
[0010] 圖1為本發(fā)明的界面顯示效果示意。待選項(xiàng)全部平鋪出來(lái)，連接在一起顯示。"反 選"按鈕與待選項(xiàng)之間留有間隙，顏色也不一樣。全部選中時(shí)不顯示"重置"按鈕，選中的當(dāng) 前項(xiàng)和其他項(xiàng)相比，背景色不同，如圖中"北京"，此時(shí)單擊就取消了其選中狀態(tài)。
[0011] 圖2為本發(fā)明的界面顯示效果示意。有待選項(xiàng)未選中時(shí)顯示"重置"按鈕，點(diǎn)擊"重 置"按鈕可以選中所有待選項(xiàng)。北京是未選中的當(dāng)前待選項(xiàng)，此時(shí)單擊可選中。
[0012] 圖3為本發(fā)明的界面顯示效果，未選中的當(dāng)前項(xiàng)和非當(dāng)前項(xiàng)顏色不同。
【具體實(shí)施方式】
[0013] 為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，以下將結(jié)合實(shí)例來(lái)詳細(xì)說(shuō)明本發(fā) 明一種可多選控件的實(shí)現(xiàn)方法。借此對(duì)本發(fā)明一種可多選控件的實(shí)現(xiàn)方法如何應(yīng)用技術(shù)手 段解決技術(shù)問(wèn)題，并達(dá)成技術(shù)效果的實(shí)現(xiàn)過(guò)程能充分理解并據(jù)以實(shí)施。
[0014] Web頁(yè)面中的實(shí)施例
[0015] 本發(fā)明一種可多選控件的實(shí)現(xiàn)方法可以在Client/Server架構(gòu)下使用，也可以在 基于瀏覽器的Web頁(yè)面中使用。本例詳述Web頁(yè)面中實(shí)施方法、步驟。
[0016] 步驟1 :設(shè)計(jì)可選項(xiàng)展示時(shí)的CSS樣式。
[0017] 樣式是可選項(xiàng)顯示時(shí)的外觀定義，包括顯示文字的大小、顯示的高度、間隙的大 小、邊框的寬度、邊框的顏色、背景色、前景色等。
[0018] 可選項(xiàng)的樣式針對(duì)可選項(xiàng)在未選中時(shí)、選中時(shí)、是當(dāng)前項(xiàng)時(shí)、不是當(dāng)前項(xiàng)時(shí)分別設(shè) 置。
[0019] 反選及重置功能按鈕也需進(jìn)行樣式設(shè)置。
[0020] 全部樣式設(shè)置如下：
[0021] /*待選項(xiàng)選中*/
[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] /*待選項(xiàng)未選中*/
[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:編制事件處理函數(shù)。
[0044] 在待選項(xiàng)上點(diǎn)擊、以及在反選、重置功能按鈕上點(diǎn)擊需要進(jìn)行相應(yīng)的處理，這部分 代碼在鼠標(biāo)點(diǎn)擊事件中調(diào)用、執(zhí)行。
[0045] 在待選項(xiàng)上點(diǎn)擊事件的處理：
[0046] 判斷如果待選項(xiàng)沒(méi)有類定義，則將待選項(xiàng)添加取消選中的類定義，否則取消待選 項(xiàng)上的類定義。
[0047] 判斷如果待選項(xiàng)有未選中的，顯示反選功能按鈕，否則隱藏反選功能按鈕。
[0048] Javascrip和JQuery的函數(shù)代碼如下：
【主權(quán)項(xiàng)】
1. 一種可多選控件的實(shí)現(xiàn)方法，其特征在于，包括： (1) 待選項(xiàng)全部平鋪顯示； (2) 單擊待選項(xiàng)即可完成該待選項(xiàng)的開(kāi)關(guān)選擇； (3) 通過(guò)顏色變化指示待選項(xiàng)是否處于選中狀態(tài)； (4) 通過(guò)顏色的變化指示待選項(xiàng)是否是當(dāng)前項(xiàng)； (5) 只在待選項(xiàng)未全部選中時(shí)顯示具備全選功能的按鈕。
2. 如權(quán)利要求1所述方法，平鋪顯示時(shí)待選項(xiàng)連接在一起顯示并共用邊框；通過(guò)充填 顏色、字體顏色的變化來(lái)標(biāo)記是否處于選中狀態(tài)；通過(guò)充填顏色、字體顏色的變化來(lái)標(biāo)記是 否處于當(dāng)前項(xiàng)；全選功能的按鈕可以是提示為"RESET"、"ALL"、"重置"、"全選"、"全部"等。
【專利摘要】本發(fā)明針對(duì)常用可多選控件存在易用性差的問(wèn)題，公開(kāi)一種可多選控件的實(shí)現(xiàn)方法。包括將全部待選項(xiàng)平鋪并連接在一起顯示；單擊待選項(xiàng)即可完成該待選項(xiàng)的開(kāi)關(guān)選擇；待選項(xiàng)只通過(guò)顏色變化指示待選項(xiàng)是否處于選中狀態(tài)、是否是當(dāng)前項(xiàng)等。
【IPC分類】G06F3-0482, G06F9-44
【公開(kāi)號(hào)】CN104850315
【申請(qǐng)?zhí)枴緾N201510271138
【發(fā)明人】馮昱川, 高雅梅
【申請(qǐng)人】北京挺軟科技有限公司
【公開(kāi)日】2015年8月19日
【申請(qǐng)日】2015年5月26日