視頻地址:http://v.qq.com/page/m/8/c/m0150izlt8c.htmljavascript
你們好,歡迎來到【三石jQuery視頻教程】,我是您的老朋友 - 三生石上。css
今天,咱們要經過基本的HTML、CSS、jQuery以及字體庫FontAwesome來實現複選框和單選框,先來看下最終的產品:html
須要特別注意的是,在這個例子中,咱們能夠經過 TAB鍵來使複選框或者單選框獲取焦點,並將其顏色改成綠色。java
網站目錄很是簡單,包含三部分: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
爲頁面添加基本的 html 標籤,使用列表標籤 ul-li 進行組織。ide
<!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>
此時的頁面顯示效果:函數
下面咱們來建立基本的 CSS 樣式,讓這個默認顯示看起來更加專業和美觀,咱們所作的努力包含:字體
<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>
此時的頁面顯示效果:
在頁面 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 指定了某個具體的圖標字體。
此時的頁面效果:
雖然咱們能夠直接使用 FontAwesome 預約義的圖標字體 CSS 類,好比:
可是若是直接這樣來引用的話,會讓 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"; }
根據前面假設的 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'); } }) }); });
這裏有幾個注意點:
頁面的初始效果:
下面咱們來完整字體圖標的狀態同步,首選註冊 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 事件中,須要當前事件的一些上下文變量:
還須要知道當前點擊的是複選框仍是單選框,從而進行不一樣的處理,複選框的處理比較簡單:
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; }
此時的頁面效果:
若是咱們的示例就此結束,彷佛也很完整。可是缺乏一個重要的功能,此時的複選框和單選框再也不響應 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 技巧:
注: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; }
最終的頁面效果:
最後,來看下完整的 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>
三石出品,必屬精品!
若是本文對你有所幫助,請點擊 [推薦] 按鈕來鼓勵做者,你的支持是咱們前進的動力!