本篇文章帶給大家的內容是關於jquery外掛的創建方法有哪些? jquery外掛創建的方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
1.透過$.extend()來擴充jQuery
2.透過$.fn 將新的方法
3.透過$.widget()應用jQuery UI的部件工廠方式創建
方法1太簡單,創建後透過$.myfunction()方式調用,不能對指定元素調用。
方法3相對於方法2太複雜。
方法2就是常用的建立jq外掛的方法。可以對指定元素進行操作。例如$('#title').myfunction();
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
如果想要支援鍊式呼叫只需return一下即可。
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') return this.css('color', 'red'); }
$.fn.myPlugin = function(options) { var defaults = {//设置默认值 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码 //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
為了以後程式碼維護與可讀性我們可以進行物件導向的方法開發插件。
var Beautifier = function(ele, opt) { this.$element = ele, //获取当前选中的jq对象。 this.defaults = { 'color': 'red', 'fontSize': '12px' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); }
相關推薦:
以上是jquery外掛的建立方法有哪些? jquery外掛程式創建的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!