Jquery 插件開發(fā)筆記整理
更新時(shí)間:2011年01月17日 17:41:59 作者:
這兩一直在看Jquery插件的開發(fā),上次在網(wǎng)上找了相關(guān)的文章,不過后來沒記來,再去找就難了。
只好自己來寫個(gè)文章,已便日后記憶!
先貼出插件代碼,里面注釋
(function ($) {
//擴(kuò)展
$.fn.extend({
//插件名稱
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一定要大寫,j不能大寫,不然出錯(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>
很簡單吧,其實(shí)開發(fā)Jquery插件還有其它的方法,我只是感覺這種方法比較好,可讀性也比較好。
jquery插件就寫到這里!
先貼出插件代碼,里面注釋
復(fù)制代碼 代碼如下:
(function ($) {
//擴(kuò)展
$.fn.extend({
//插件名稱
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一定要大寫,j不能大寫,不然出錯(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>
很簡單吧,其實(shí)開發(fā)Jquery插件還有其它的方法,我只是感覺這種方法比較好,可讀性也比較好。
jquery插件就寫到這里!
您可能感興趣的文章:
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jquery 插件開發(fā)備注
- jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開發(fā)
- 跟我一起學(xué)寫jQuery插件開發(fā)方法(附完整實(shí)例及下載)
- tinyMCE插件開發(fā)之插入html,php,sql,js代碼 并代碼高亮顯示
- jquery 插件開發(fā)方法小結(jié)
- jQuery 插件開發(fā) 其實(shí)很簡單
- fckeditor 插件開發(fā)參考文檔
- FCKeditor 插件開發(fā) 示例(詳細(xì)版本)
- Eclipse插件開發(fā)之新手入門
- jquery插件開發(fā)方法(初學(xué)者)
相關(guān)文章
jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-01-01jQuery對象和Javascript對象之間轉(zhuǎn)換的實(shí)例代碼
jQuery對象和Javascript對象之間轉(zhuǎn)換的實(shí)例代碼,需要的朋友可以參考一下2013-03-03jQuery簡單實(shí)現(xiàn)input文本框內(nèi)灰色提示文本效果的方法
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)input文本框內(nèi)灰色提示文本效果的方法,涉及jQuery針對頁面元素的遍歷與樣式動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能完整示例
這篇文章主要介紹了JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能,結(jié)合完整實(shí)例形式分析了jQuery基于事件響應(yīng)的頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-10-10Eclipse引入jquery報(bào)錯(cuò)如何解決
有朋友問我,在是使用eclipse的過程中遇到了這么一個(gè)問題--eclipse導(dǎo)入jquery包后報(bào)錯(cuò)——究竟是什么原因?qū)е逻@一問題發(fā)生的呢?該如何解決此問題呢?下面小編給大家?guī)砹私鉀Q辦法,不妨一起看看吧2015-12-12jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果,涉及jQuery中鼠標(biāo)事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01jQuery圖片縮放插件smartZoom使用實(shí)例詳解
本文通過實(shí)例代碼給大家簡單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08