DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用JQuery庫提供的擴展功能實現自定義方法
使用JQuery庫提供的擴展功能實現自定義方法
編輯:JQuery特效代碼     

JQuery包裝器提供了大量的方法,可以再頁面中直接使用。但是,沒有任何一個庫可以滿足所有的需求,所以,JQuery庫提供了豐富的擴展功能。以禁用一組表單元素為例,看看怎麼簡單有效的在JQuery庫中添加自定義的功能擴展。(JQuery沒有禁用表單元素的方法哦)

上代碼:

<!DOCTYPE> 

<html lang="en"> 

<head> 

<title>Custom Method!</title> 

<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="js/jquery-2.1.1.js"></script> 

<script type="text/javascript"> 

jQuery(function() 

{ 

$("form input").disable(); 

}); 

</script> 

</head> 

<body> 

<p>測試自定義方法禁用表單元素</p> 

<form> 

<input type="text" value="test"><br/> 

<input type="button" value="confirm" class="test"> 

</form> 

</body> 

</html>

文本框和按鈕已經被禁用:

若只禁用按鈕,添加一個css類即可;

jQuery(function() 
{
$("form input.test").disable(); 
});

看看是不是禁用了按鈕:

實現也很簡單,打開jquery-2.1.1.js源碼,沒有壓縮的,比較容易,我引入

的是jquery-2.1.1.js,然後添加下列代碼

jQuery.fn.disable=function () { 

return this.each(function() 

{ 

if(this.disabled != null) this.disabled=true; 

}); 

}

在按照上述案例的方式調用即可。

在《JQuery In Action》一書中,提到以$.fn.方法名方式擴展(P12),我測試過,沒有實現禁用。錯誤之處,還望指正。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved