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

 

視頻地址: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

  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>

  

源碼和視頻下載  

三石出品,必屬精品!

若是本文對你有所幫助,請點擊 [推薦] 按鈕來鼓勵做者,你的支持是咱們前進的動力!

相關文章
相關標籤/搜索