產品篇

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

這樣做有幾個問題：

    選項很多，沒有規律，找起來很累
    如果是一個已經選擇了部分選項的廣告，修改時仍然需要用肉眼尋找，無法一眼看出來投放到哪些省份
    選完一個，再選下一個，還要從頭找，甚至會被已經選過的影響

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

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

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

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

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表