Jquery 插件開(kāi)發(fā)筆記整理
更新時(shí)間：2011年01月17日 17:41:59 作者：
這兩一直在看Jquery插件的開(kāi)發(fā)，上次在網(wǎng)上找了相關(guān)的文章，不過(guò)后來(lái)沒(méi)記來(lái)，再去找就難了。
只好自己來(lái)寫(xiě)個(gè)文章，已便日后記憶！
先貼出插件代碼，里面注釋
(function ($) {
//擴(kuò)展
$.fn.extend({
//插件名稱(chēng)
height: function (options) {
//默認(rèn)參數(shù)
var defaults = {
color: '紅色'
};
//覆蓋默認(rèn)參數(shù)
var opts = $.extend(defaults, options);
//主函數(shù)
return this.each(function () {
//激活事件
var obj = $(this);
obj.click(function () {
alert(opts.color);
});
});
}
})
})(jQuery);
//注后面的(jQuery)一定要這樣，Q一定要大寫(xiě)，j不能大寫(xiě)，不然出錯(cuò)。
下面為使用代碼
@{
ViewBag.Title = "Home Page";
}
@section Header{
<script src="@Url.Content("~/Scripts/jquery.extends.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("p").height({ color: '黑色' });
});
</script>
}
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
很簡(jiǎn)單吧，其實(shí)開(kāi)發(fā)Jquery插件還有其它的方法，我只是感覺(jué)這種方法比較好，可讀性也比較好。
jquery插件就寫(xiě)到這里！
先貼出插件代碼，里面注釋
復(fù)制代碼 代碼如下:
(function ($) {
//擴(kuò)展
$.fn.extend({
//插件名稱(chēng)
height: function (options) {
//默認(rèn)參數(shù)
var defaults = {
color: '紅色'
};
//覆蓋默認(rèn)參數(shù)
var opts = $.extend(defaults, options);
//主函數(shù)
return this.each(function () {
//激活事件
var obj = $(this);
obj.click(function () {
alert(opts.color);
});
});
}
})
})(jQuery);
//注后面的(jQuery)一定要這樣，Q一定要大寫(xiě)，j不能大寫(xiě)，不然出錯(cuò)。
下面為使用代碼
復(fù)制代碼 代碼如下:
@{
ViewBag.Title = "Home Page";
}
@section Header{
<script src="@Url.Content("~/Scripts/jquery.extends.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("p").height({ color: '黑色' });
});
</script>
}
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
很簡(jiǎn)單吧，其實(shí)開(kāi)發(fā)Jquery插件還有其它的方法，我只是感覺(jué)這種方法比較好，可讀性也比較好。
jquery插件就寫(xiě)到這里！
您可能感興趣的文章:
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- jquery 插件開(kāi)發(fā)備注
- jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
- 跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法（附完整實(shí)例及下載）
- tinyMCE插件開(kāi)發(fā)之插入html,php,sql,js代碼 并代碼高亮顯示
- jquery 插件開(kāi)發(fā)方法小結(jié)
- jQuery 插件開(kāi)發(fā) 其實(shí)很簡(jiǎn)單
- fckeditor 插件開(kāi)發(fā)參考文檔
- FCKeditor 插件開(kāi)發(fā) 示例（詳細(xì)版本）
- Eclipse插件開(kāi)發(fā)之新手入門(mén)
- jquery插件開(kāi)發(fā)方法(初學(xué)者)
相關(guān)文章
js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
這是一個(gè)基于jquery的圖片效果，它的作用是：當(dāng)圖片點(diǎn)擊變大(變小)時(shí)，其它圖片按照一定的規(guī)則進(jìn)行排序運(yùn)動(dòng)2012-11-11
jQuery 可以拖動(dòng)的div實(shí)現(xiàn)代碼 腳本之家修正版
最近研究了一下jQuery，覺(jué)得真的是一個(gè)很不錯(cuò)的js庫(kù)，其他的不說(shuō)，關(guān)鍵是有翔實(shí)的文檔，這點(diǎn)是非常關(guān)鍵的。2009-06-06
jQuery的ready方法實(shí)現(xiàn)原理分析
這篇文章主要介紹了jQuery的ready方法實(shí)現(xiàn)原理分析的相關(guān)資料,需要的朋友可以參考下2016-10-10
可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
總結(jié)了一下了一下$.getJSON()一些應(yīng)用，希望大家喜歡，首先我用的的是 Newtonsoft.Json.Net20.dll2011-01-01
jQuery Easyui學(xué)習(xí)教程之實(shí)現(xiàn)datagrid在沒(méi)有數(shù)據(jù)時(shí)顯示相關(guān)提示內(nèi)容
本篇文章給大家介紹easyui datagrid 加載查詢(xún)數(shù)據(jù)時(shí)，如果沒(méi)有相關(guān)記錄，則在datagrid中顯示沒(méi)有相關(guān)記錄的提示信息，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07
Jquery響應(yīng)回車(chē)鍵直接提交表單操作代碼
這篇文章主要介紹了Jquery響應(yīng)回車(chē)鍵直接提交表單操作代碼,推薦使用keyup哦,文中有說(shuō)明,需要的朋友可以參考下2014-07-07
如何使用jQuery技術(shù)開(kāi)發(fā)ios風(fēng)格的頁(yè)面導(dǎo)航菜單
這篇文章主要介紹了如何使用jQuery技術(shù)開(kāi)發(fā)ios風(fēng)格的頁(yè)面導(dǎo)航菜單,需要的朋友可以參考下2015-07-07
jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
這篇文章主要介紹了jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox功能，對(duì)checkbox感興趣的小伙伴們可以參考一下2015-12-12
jQuery 跨域訪(fǎng)問(wèn)問(wèn)題解決方法
瀏覽器端跨域訪(fǎng)問(wèn)一直是個(gè)問(wèn)題, 多數(shù)研發(fā)人員對(duì)待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時(shí)候,時(shí)不時(shí)地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級(jí)域名跨域訪(fǎng)問(wèn)的問(wèn)題.2009-12-12