使用CSS實現頁面核取方塊的方法

產品篇

在我們的後台中，需要設定廣告精準投放的區域，也就是要在全國31個省、自治區、直轄市中選擇。那麼，出現下面這幅景象也就理所應當了：

這樣做有幾個問題：

選項很多，沒有規律，找起來很累

如果是乙個已經選擇了部分選項的廣告，修改時仍然需要用肉眼尋找，無法一眼看出來投放到哪些省份

選完乙個，再選下乙個，還要從頭找，甚至會被已經選過的影響

於是我想，首先應該把所有選項分為「已選中」和「未選中」兩批，解決第2個問題，減輕第3個問題；其次核取方塊本身的價值不大，可以被替換為其它樣式；唯一可能引入的問題，就是點選時，使用者的預期是看到核取方塊裡出現乙個小對勾，表示選中，如果我把它移開放到「已選中」組裡，使用者可能會迷惑，需要一些時間學習。

於是我跟某產品經理朋友聊了聊這個想法，他表示確實可能造成使用者迷惑，不過如果能加入動畫效果，那麼基本沒問題。嗯，開始動手。

技術實現篇

近日flexbox規範定案，各瀏覽器相繼支援display:flex;，同時傳來一條好訊息，新實現比老實現display:box;快很多。這次我打算用flexbox來解決問題，因為裡面有乙個很重要的屬性：order（之前叫box-ordinal-group），它可以改變布局中元素的排列順序，配合css3新增的選擇器，應該可以滿足需要。

第一步分拆選中/未選中

（關於flexbox的知識，可以通過google了解，雖然搜到的多是上乙個版本，不過和最終版差別不大，只是叫法不同。本文不再過多講解，我就當大家都會了）

本身的樣式不能修改，所以我們必須借助的幫助；實現選中/未選中區分，那自然就要用到偽類:checked；選擇器一定是從外到內、從前到後的，沒法選擇父級元素，所以不能用去包，那麼最終布局就只能是：

css code複製內容到剪貼簿

很簡單哈，不解釋了。css3新增了「下一節點」選擇器 +，用來選擇某節點的下乙個節點，結合:checked偽類就可以將選中的和它臨近的通過改變order屬性移到前面去：

css code複製內容到剪貼簿

不過這樣只是把選中的內容提前，視覺上沒有真正的分割。所以我決定再加入一根分割線，上面是選中的，下面是未選的。這個時候我們需要用到 ~ 這個選擇器，選擇某節點後面的節點：

css code複製內容到剪貼簿

這樣基礎功能實現了。不過視覺上，排版仍然不整齊，選中的選項和未選中的選項區分不算太明顯，所以下一步我準備美化下checkbox。

第二步，美化checkbox

做法與前面類似，也要用到css3新增的選擇器。前面為了實現提前，沒有用它包裹，所以在選項很多很長導致換行的時候，可能出現核取方塊和標籤脫離的尷尬狀況。好在核取方塊的價值可以用別的樣式取代，所以先把小方框隱藏起來，轉而將作為操作目標，再來點邊框底色圓角（參考自bootstrap 3），就可以了：

css code複製內容到剪貼簿

這樣看起來還有上公升空間，如果加上幾個圖示響應使用者操作，那麼學習成本會更低，對操作後的預期也會更準確。於是引用cdn上的font-awesome，使用:before偽類加上小圖示，就得到了最終效果

我無意中發現，這樣批量新增刪除時，滑鼠可以常點不動，應該也是個意外的收穫吧。

第三步，加入動畫教育使用者（失敗）

至此功能基本做好了，不過由於修改了行為，可能導致使用者迷惑，所以準備加個動畫幫助使用者理解這個互動。

可惜作為乙個新功能，瀏覽器的支援尚不完善，雖然規範中規定「animatable: yes」，但是實測在chrome v.30下也無法工作：

看來只有等新版瀏覽器發布後再去完善了。

相容性使用純css做元件，幾乎不用擔心相容性問題，因為瀏覽器本身就做了很好的向下相容，**最多不生效，一般不會錯。

具體到這個元件，因為只針對視覺效果，沒有增刪改任何瀏覽器行為，所以相容性也沒有任何問題。不過最終效果呢，只有支援flexbox和css3選擇符的瀏覽器才能正常渲染。

我的環境是window 8 + chrome v.30，以及小公尺2 + chrome v.30，測試通過。

後記本文標題: 使用css實現頁面核取方塊的方法

本文位址: /web/css/83548.html

使用CSS實現頁面核取方塊的方法

layui vuejs實現頁面核取方塊

layui新增核取方塊 layui核取方塊使用介紹

layui新增核取方塊 layui核取方塊使用介紹

使用CSS實現頁面核取方塊的方法

layui vuejs實現頁面核取方塊

layui新增核取方塊 layui核取方塊使用介紹

layui新增核取方塊 layui核取方塊使用介紹

相關推薦