首頁 > web前端 > js教程 > 10分鐘學會寫Jquery外掛實例教學_jquery

10分鐘學會寫Jquery外掛實例教學_jquery

WBOY
發布: 2016-05-16 16:36:58
原創
1038 人瀏覽過

有很多朋友都用過jquery插件,但是很少有人自己動手寫過jQuery插件,本文就以實例形式簡單敘述了jQuery插件的實作方法。分享給大家參考之用。具體方法如下:
 
具體而言,其實就是把一些常用、實用、通用的功能封裝起來而以,簡單的來講就是把這些程式碼放在一個方法裡面,可以達到重複使用的效果,這樣就可以不需要每次要用此功能的時候都去重新寫一次。
 
現在Jquery裡面加入了插件的概念,只要按照它特定的格式當作平常寫function一樣去寫就可以了,不雖然搞得太複雜的。信不信由你們,反正我信了。
 
接下來用簡單的程式碼來講解一下,如果大家看了還不會寫插件的話,我只能表示無語了

具體步驟如下:

第一步:定義外掛程式

$(function() { 
  $.fn.插件名称 = function(options) { 
   var defaults = { 
     Event : "click",    //触发响应事件 
     msg : "Holle word!"    //显示内容 
   }; 
   var options = $.extend(defaults,options); 
   var $this = $(this);    //当然响应事件对象 
   //功能代码部分 
   //绑定事件 
   $this.live(options.Event,function(e){ 
     alert(options.msg); 
   }); 
  } 
}); 
 
登入後複製

第二步:呼叫外掛

$(function() { 
  //绑定元素事件 
  $("#test").插件名称({ 
   Event : "click",    //触发响应事件 
   msg : "插件原来就是这么简单!"   //显示内容 
  }); 
}); 
 
登入後複製

至此,最簡單的插件搞定! 10分鐘不到!相信大家應該都看懂了吧! jQuery插件原來就這麼簡單。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板