增加 checkbox 的状态文章

lijiakof · May 10, 2016 · 02e2acf · 02e2acf
1 parent 7c9ae40
commit 02e2acf
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 * 基础
 	* [前端工具](share/front-tools.md)
 	* [认识 HTML](share/html.md)
+	* [checkbox 的四种状态](share/checkbox-state.md)
 	* [神奇的 CSS](share/amazing-css.md)
 	* [`px` vs `em` vs `rem`](share/px-em-rem.md)
 	* [SASS](share/sass.md)
@@ -51,4 +52,6 @@
 	* [HTML meta](share/html-meta.md)
 	* WebSocket
 	* HTML viewport
+	* JavaScript |、||、&、&&
+	* 如何制作 0.5 像素的细线
 
diff --git a/frontend-book.sketch b/frontend-book.sketch
diff --git a/resources/images/checkbox-state.png b/resources/images/checkbox-state.png
diff --git a/share/checkbox-state.md b/share/checkbox-state.md
@@ -0,0 +1,26 @@
+# checkbox 的四种状态
+checkbox 是 HTML 中非常常用的控件，它可以作为多选控件，很多开发人员知道它有三种状态：`checked`、`unchecked`、`disabled`，其实它还有第四种鲜为人知的状态`indeterminate`。
+
+## indeterminate
+`indeterminate`属性用来表示 checkbox 元素的状态为**不确定**，不同的平台和浏览器对于这种状态的显示不一样，在 Chrome 下为一个横杠，在 Firefox 下为实心正方形：
+
+![checkbox](../resources/images/checkbox-state.png)
+
+## 设置 indeterminate 状态
+`checked`、`unchecked`、`disabled`可以通过 HTML 属性直接设置，但是`indeterminate`只能通过 JavaScript 来设置：
+
+```
+document.getElementById("ckb").indeterminate = true;
+```
+
+## indeterminate CSS 伪类
+类似于`:checked`和`:unchecked`伪类，我们也可以使用`:indeterminate`伪类进行对不确定状态的 checkbox 的选取：
+
+```
+checkbox:indeterminate {
+	
+}
+```
+
+
+
diff --git a/share/grunt.md b/share/grunt.md
@@ -112,6 +112,7 @@ grunt copy:taskA
 * 静态资源文件版本：grunt-rev
 * 任务运行时间插件：time-grunt
 * 加载 Grunt 插件：load-grunt-tasks
+* 自动添加样式前缀：grunt-autoprefixer
 * ...
 
 ## 集成到 Sublime

diff --git a/share/px-em-rem.md b/share/px-em-rem.md
@@ -1,4 +1,4 @@
-# px、em、rem
+# px vs em vs rem
 `px`、`em`和`rem`都是网页设计中的长度单位。`px`是最常用的单位，它是 Pixel 的缩写代表像素，它是计算机图像显示的最小单位；`em`（font size of the element）它是一个相对大小的单位，它的大小会相对于它的父级元素的字体大小；`rem`（font size of the root element）它也是一个相对大小的单位，但是它相对于根元素字体的大小；
 
 ## px