[jQuery] jQuery UI怎樣自定義組件？

又是第一次，現在的感受是jQueryUI Widget能讓你代碼組織得更好,風格更一致。 如何開始使用首先用$.widget()方法開始定義你的組件，它只接收三個參數：第一個是組件名稱，第二個是可選的基類組件（默認的基類是$.Widget），第三個是組件的原型。組件名稱必須包含命名空間，要注意的是，官方組件的命名空間是以‘ui’開頭的，比如:‘ui.tabs’。我在下面的用‘我’的拼音(‘wo’)。$.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype)$.Widget基類含有一個重要的屬性‘options’，它用來定義公有參數，組件初始化時外部調用的參數會覆蓋內部定義的參數；以及三個重要的私有的方法‘_create’、‘_init’、‘’，前兩個相當于構造函數的作用，按順序執行，_create()方法執行之后會觸發'create'事件。 _trigger()方法會將參數中的指定函數標準化為W3C事件，并且觸發這個自定義事件。 另外還有三個公有方法‘enable’，‘disable’，‘destroy’，分別表示啟用、禁用和銷毀組件。這里很有意思的，是私有方法和公有方法的實現。jQuerUI Widget暴露的方法都是不以‘_’開頭的：// prevent calls to internal methodsif ( isMethodCall && options.charAt( 0 ) === "_" ) {return returnValue;}實際上，jQueryUI Widget還是保留了原始的API，比如這樣使用：var $div = $('.demo:first');var api = $div.data('divZoom');// console.dir(api);api.zoomIn();// 對比$div.divZoom('zoomIn');一個實現完全私有變量的小技巧：(function($) {var privateVar = '';$.widget("wo.divZoom",{}); })(jQuery)

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[jQuery] jQuery UI怎样自定义组件？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。