【三石jQuery視頻教程】02.建立 FontAwesome 複選框和單選框

時間 2019-11-30

標籤三石jQuery視頻教程建立 fontawesome 複選框單選欄目 JQuery 简体版

原文原文鏈接

視頻地址：http://v.qq.com/page/m/8/c/m0150izlt8c.htmljavascript

你們好，歡迎來到【三石jQuery視頻教程】，我是您的老朋友 - 三生石上。css

今天，咱們要經過基本的HTML、CSS、jQuery以及字體庫FontAwesome來實現複選框和單選框，先來看下最終的產品：html

須要特別注意的是，在這個例子中，咱們能夠經過 TAB鍵來使複選框或者單選框獲取焦點，並將其顏色改成綠色。java

Step1：網站目錄

網站目錄很是簡單，包含三部分：lesson2.html文件、lib目錄。瀏覽器

其中 lesson1.html 包含了一個頁面最基本的組成部分，正確的設置 DOCTYPE 有助於頁面在現代瀏覽器中正確渲染。app

<!DOCTYPE html>
<html>
<head>
    <title>02.建立FontAwesome複選框和單選框 - 三石jQuery視頻教程</title>
    
</head>
<body>

    
</body>
</html>

lib目錄僅包含了最新的 jQuery 庫；以及最新的 FontAwesome 庫（CSS文件和相應的字體文件）。　less

Step2：頁面結構

爲頁面添加基本的 html 標籤，使用列表標籤 ul-li 進行組織。ide

在 label 標籤內放置 input 和文本，能夠實現點擊文本時選中相應 input 的效果
使用 checked="checked" 屬性，來指定默認的選中項
單選框列表經過 name 屬性進行分組（同一個分組內的單選框，同時只能有一個處於選中狀態）

<!DOCTYPE html>
<html>
<head>
    <title>02.建立FontAwesome複選框和單選框 - 三石jQuery視頻教程</title>
</head>
<body>
    <div id="main">
        <h2>
            02.建立FontAwesome複選框和單選框
        </h2>
        
        <h4>
            複選框列表
        </h4>
        <ul>
            <li>
                <label>
                    <input type="checkbox">
                    複選框一
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" checked="checked">
                    複選框二
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox">
                    複選框三
                </label>
            </li>
        </ul>
        
        <h4>
            單選框列表
        </h4>
        <ul>
            <li>
                <label>
                    <input name="group1" type="radio">
                    單選框一
                </label>
            </li>
            <li>
                <label>
                    <input name="group1" type="radio" checked="checked">
                    單選框二
                </label>
            </li>
            <li>
                <label>
                    <input name="group1" type="radio">
                    單選框三
                </label>
            </li>
        </ul>
    </div>
</body>
</html>

此時的頁面顯示效果：函數

Step3：CSS樣式

下面咱們來建立基本的 CSS 樣式，讓這個默認顯示看起來更加專業和美觀，咱們所作的努力包含：字體

頁面背景設爲很是淺的灰色（#efefef）
主體內容加上了邊框和白色背景
主體內容居中（margin-left 和 margin-right 設爲 auto）
清空無序列表 ul-li 的默認樣式

<style>
	body {
		background-color: #efefef;
	}
	
	#main {
		border: solid 1px #ccc;
		padding: 10px;
		background-color: #fff;
		max-width: 500px;
		margin: 100px auto;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
</style>

此時的頁面顯示效果：

Step4：引入FontAwesome字體

在頁面 head 中添加對 FontAwesome 字體的引用：

<link href="lib/fa/css/font-awesome.css" rel="stylesheet">

在頁面底部引入 jQuery 庫，並在 DOMReady 中動態添加字體圖標到每個複選框或者單選框的後面：

<script>
	$(function() {
		$('[type=checkbox],[type=radio]').each(function() {
			var checkEl = $(this);
		
			$('<i>', {
				'class': 'fa fa-check'
			}).insertAfter(checkEl);
		});
	});
</script>

其中CSS 類 fa 是每一個圖標字體所必須的， fa-check 指定了某個具體的圖標字體。

此時的頁面效果：

Step5：自定義複選框和單選框 CSS 類

雖然咱們能夠直接使用 FontAwesome 預約義的圖標字體 CSS 類，好比：

複選框：fa-square-o
選中的複選框：fa-check-square-o
單選框：fa-circle-o
選中的單選框：fa-dot-circle-o

可是若是直接這樣來引用的話，會讓 JavaScript 代碼變得很乏味而且容易出錯，好比將複選框改成選中狀態：

checkIconEl.addClass('fa-check-square-o').removeClass('fa-square-o');

所以，咱們決定自定義 CSS 類，來實現複選框的字體圖標，咱們所指望的複選框的 HTML 結構：

<label>
	<input type="checkbox">
	<i class="fa checkbox">
	複選框一
</label>

注意：這裏使用 checkbox 字符串做爲圖標字體的 CSS 類，不是隨意寫的。這個字符串正好就是 input 的 type 屬性，從而能夠簡化 JavaScript 代碼。

相應的，選中的複選框的 HTML 結構：

<label class="checked">
	<input type="checkbox">
	<i class="fa checkbox">
	複選框一
</label>

下面，咱們就能夠根據 FontAwesome 官網頁面來定義咱們本身須要的 CSS 類：

.fa.checkbox:before {
	content: "\f096";
}

label.checked .fa.checkbox:before {
	content: "\f046";
}

.fa.radio:before {
	content: "\f10c";
}

label.checked .fa.radio:before {
	content: "\f192";
}

Step6：複選框和單選框的初始狀態

根據前面假設的 HTML 結構和自定義圖標 CSS，咱們能夠完成 DOMReady 的初始化操做：

$(function() {
	 $('[type=checkbox],[type=radio]').each(function() {
			var checkEl = $(this);
		
			$('<i>', {
				'class': 'fa ' + checkEl.attr('type')
			}).insertAfter(checkEl);
		
			if(checkEl.is(':checked')) {
				checkEl.parent('label').addClass('checked');
			}
		})
	});
});

這裏有幾個注意點：

input 的 type 屬性恰好做爲字體圖標的 CSS 名稱（checkbox 和 radio）
使用 jQuery 提供的 is(':checked') 來判斷複選框或者單選框是否處於選中狀態
經過 parent 函數來查找某個元素的直接父元素（immediate parent）

頁面的初始效果：

Step7：同步複選框和單選框狀態到字體圖標

下面咱們來完整字體圖標的狀態同步，首選註冊 change 事件：

$('[type=checkbox],[type=radio]').change(function() {
	var checkEl = $(this);
	var checked = checkEl.is(':checked');
	var labelEl = checkEl.parent('label');
	
	if(checkEl.is('[type=checkbox]')) {
		// checkbox
	} else {
		// radio
	}
});

在 change 事件中，須要當前事件的一些上下文變量：

checkEl：當前點擊的複選框或者單選框
checked：當前輸入框是否選中
labelEl：當前輸入框的直接父元素（label標籤）

還須要知道當前點擊的是複選框仍是單選框，從而進行不一樣的處理，複選框的處理比較簡單：

if(checked) {
	labelEl.addClass('checked');
} else {
	labelEl.removeClass('checked');
}

單選框的處理相對複雜點，由於咱們在每次選中單選框時，都要先清空同一分組內的其餘單選框的狀態：

var radioName = checkEl.attr('name');
var radioEls = $('[type=radio][name='+ radioName +']');
radioEls.parent('label').removeClass('checked');

labelEl.addClass('checked');

最後，咱們只須要隱藏前面的 input 輸入框就好了：

[type=checkbox],
[type=radio] {
	display: none;
}

此時的頁面效果：

Step8：響應TAB鍵，以及焦點樣式

若是咱們的示例就此結束，彷佛也很完整。可是缺乏一個重要的功能，此時的複選框和單選框再也不響應 TAB鍵了。

咱們分別在頁面頂部和底部放置一個 input[type=text]，就能方便的看到效果了，在第一個文本輸入框按下 TAB鍵，會直接跳轉到第二個文本輸入框：

怎麼辦？

應該是 display:none 致使 input[type=checkbox] 再也不響應 TAB鍵了，可是咱們必需要把他隱藏掉才行啊！

不要緊，除了使用 display:none 隱藏掉複選框，咱們可讓複選框顯示出來，可是你卻看不到：

[type=checkbox],
[type=radio] {
	position: absolute;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
}

這裏的 CSS 技巧：

使用 position:absolute 將複選框浮動起來
設置寬度和高度爲 1px，使其在頁面顯示爲一個像素的小黑點
經過 clip:rect(0 0 0 0) 設置裁剪矩形爲空，最終讓你看不到這個複選框，可是這個複選框仍是存在的

注：clip 屬性僅可用來裁剪絕對定位元素，對於 position:static 或者 position:relative 的元素無效。

這還不算結束，咱們還須要複選框獲取焦點時，能有樣式的改變，便於用戶察覺：

$('[type=checkbox],[type=radio]').focus(function(){
	$(this).parent('label').addClass('focusit');
}).blur(function() {
	$(this).parent('label').removeClass('focusit');
});

以及相應的 CSS 樣式：

label.focusit {
	color: green;
}

最終的頁面效果：

Step10：完整的JavaScript代碼

最後，來看下完整的 JavaScript 代碼：

<script>
	$(function() {
		$('[type=checkbox],[type=radio]').each(function() {
			var checkEl = $(this);
		
			$('<i>', {
				'class': 'fa ' + checkEl.attr('type')
			}).insertAfter(checkEl);
		
			if(checkEl.is(':checked')) {
				checkEl.parent('label').addClass('checked');
			}
		}).change(function() {
			var checkEl = $(this);
			var checked = checkEl.is(':checked');
			var labelEl = checkEl.parent('label');
			
			if(checkEl.is('[type=checkbox]')) {
				if(checked) {
					labelEl.addClass('checked');
				} else {
					labelEl.removeClass('checked');
				}
			} else {
				var radioName = checkEl.attr('name');
				var radioEls = $('[type=radio][name='+ radioName +']');
				
				radioEls.parent('label').removeClass('checked');
			
				labelEl.addClass('checked');
			}
		}).focus(function(){
			$(this).parent('label').addClass('focusit');
		}).blur(function() {
			$(this).parent('label').removeClass('focusit');
		});
	});
</script>