文章出處

 

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

 

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

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

 

需要特別注意的是，在這個例子中，我們可以通過 TAB鍵來使復選框或者單選框獲取焦點，并將其顏色改為綠色。

Step1：網站目錄

網站目錄非常簡單，包含三部分：lesson2.html文件、lib目錄。

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

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

    
</body>
</html>

 

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

 

Step2：頁面結構

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

  1. 在 label 標簽內放置 input 和文本，可以實現點擊文本時選中相應 input 的效果
  2. 使用 checked="checked" 屬性，來指定默認的選中項
  3. 單選框列表通過 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 樣式，讓這個默認顯示看起來更加專業和美觀，我們所做的努力包含：

  1. 頁面背景設為非常淺的灰色（#efefef）
  2. 主體內容加上了邊框和白色背景
  3. 主體內容居中（margin-left 和 margin-right 設為 auto）
  4. 清空無序列表 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');
			}
		})
	});
});

 

這里有幾個注意點：

  1. input 的 type 屬性剛好作為字體圖標的 CSS 名稱（checkbox 和 radio）
  2. 使用 jQuery 提供的 is(':checked') 來判斷復選框或者單選框是否處于選中狀態
  3. 通過 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 事件中，需要當前事件的一些上下文變量：

  1. checkEl：當前點擊的復選框或者單選框
  2. checked：當前輸入框是否選中
  3. 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 技巧：

  1. 使用 position:absolute 將復選框浮動起來
  2. 設置寬度和高度為 1px，使其在頁面顯示為一個像素的小黑點
  3. 通過 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>

　　

源碼和視頻下載  

三石出品，必屬精品！

如果本文對你有所幫助，請點擊 [推薦] 按鈕來鼓勵作者，你的支持是我們前進的動力！

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()