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

又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。 如何開始使用首先用$.widget()方法開始定義你的組件，它只接收三個參數(shù)：第一個是組件名稱，第二個是可選的基類組件（默認的基類是$.Widget），第三個是組件的原型。組件名稱必須包含命名空間，要注意的是，官方組件的命名空間是以‘ui’開頭的，比如:‘ui.tabs’。我在下面的用‘我’的拼音(‘wo’)。$.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype)$.Widget基類含有一個重要的屬性‘options’，它用來定義公有參數(shù)，組件初始化時外部調(diào)用的參數(shù)會覆蓋內(nèi)部定義的參數(shù)；以及三個重要的私有的方法‘_create’、‘_init’、‘’，前兩個相當(dāng)于構(gòu)造函數(shù)的作用，按順序執(zhí)行，_create()方法執(zhí)行之后會觸發(fā)'create'事件。 _trigger()方法會將參數(shù)中的指定函數(shù)標準化為W3C事件，并且觸發(fā)這個自定義事件。 另外還有三個公有方法‘enable’，‘disable’，‘destroy’，分別表示啟用、禁用和銷毀組件。這里很有意思的，是私有方法和公有方法的實現(xiàn)。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');一個實現(xiàn)完全私有變量的小技巧：(function($) {var privateVar = '';$.widget("wo.divZoom",{}); })(jQuery)

個人簡介

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

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。