首頁 web前端 js教程 jQueryUI如何自定义组件实现代码_jquery

jQueryUI如何自定义组件实现代码_jquery

May 16, 2016 pm 06:16 PM
自訂元件

如何开始使用
首先用$.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 methods
if ( 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)

所有代码
复制代码 代码如下:

/*
* @by ambar
* @create 2010-10-20
* @update 2010-10-25
*/
(function($) {
var html = '
\
zoom in\
zoom out\
';
$.widget("wo.divZoom",{
_init : function() {
var self = this, opt = self.options, tgt = opt.target, $el = self.element ;
// 初始一次
if($('div.icon-zoom',$el).length) return;
$el.append(html);
self.target = ( tgt == '' ? $el : $el.find(tgt) );
// 检测初始值
var level = self.target.attr(opt.dataPrefix);
self.target.attr(opt.dataPrefix,level || opt.level[0]);
self.btnZoomIn = $el.find('span.zoom-in').click( $.proxy(self.zoomIn,self) );
self.btnZoomOut = $el.find('span.zoom-out').click( $.proxy(self.zoomOut,self) );
},
destroy : function(){
this.element.find('div.icon-zoom').remove();
},
options : {
level : [120,160,200],
target : '',
speed : 'normal',
dataPrefix : 'data-zoom-level',
zooming : null,
select : null,
show : null
},
currentLevel : function(){
var self = this, opt = self.options, lvl = Number(self.target.attr(opt.dataPrefix));
return $.inArray(lvl,opt.level);
},
zoomIn : function() {
this.zoom(this.currentLevel() + 1);
},
zoomOut : function() {
this.zoom(this.currentLevel() - 1);
},
zoom : function(i){
var self = this, opt = self.options,lvls = opt.level,$tgt = self.target;
if( i=lvls.length ) return;
var value = lvls[i],
originalValue = lvls[self.currentLevel()],
style = { width:value, height:value };
var data = { target : $tgt, css : style, originalCss : {width:originalValue,height:originalValue} };
var goon = self._trigger('start',null,data);
if(!goon) return;
$tgt.animate(style,
{
duration : opt.speed,
step : function(val) {
var css = { width:val, height:val };
self._trigger('zooming',null,$.extend({},data,{css:css}));
},
complete : function(){
$tgt.attr(opt.dataPrefix,value);
self._trigger('stop',null,data);
}
});
}
});
})(jQuery)

在页面上调用
复制代码 代码如下:







示例代码:
复制代码 代码如下:





jQueryUI









原文




a


b




本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Vue 中如何實作 V-model 的自訂元件? Vue 中如何實作 V-model 的自訂元件? Jun 11, 2023 am 09:28 AM

Vue.js是現代前端開發領域中非常流行的開源JavaScript框架,它簡化了前端開發過程中的許多問題,讓透過元件化開發的複雜應用變得更為容易。其中一個非常有用的功能是使用v-model指令輕鬆地在元件中實現雙向資料綁定。儘管Vue.js提供了許多內建的輸入元件,但如果你需要客製化的輸入元件,你可以透過實作v-model自訂元件來填滿

UniApp實作自訂元件與模組開發的設計與開發方法 UniApp實作自訂元件與模組開發的設計與開發方法 Jul 04, 2023 pm 05:37 PM

UniApp是一個基於Vue.js的跨平台開發框架,它可以透過一套程式碼實現多端(包括App、小程式、H5等多個平台)的開發。與傳統的原生開發相比,UniApp提供了更有效率和便利的方式來開發跨平台應用程式。在這篇文章中,我們將介紹UniApp如何實作自訂元件與模組的開發,並給予對應的設計與開發方法。一、自訂元件的設計與開發方法元件設計:首先​​,我們需要明確自定

uniapp實作如何使用自訂元件來實作頁面重複使用 uniapp實作如何使用自訂元件來實作頁面重複使用 Oct 20, 2023 am 08:38 AM

UniApp是一個基於Vue.js的跨平台開發框架,可以同時開發小程式、H5、App等多個平台的應用程式。在UniApp中,我們可以使用自訂元件來實現頁面重複使用,並提高開發效率。以下將介紹如何使用自訂元件來實現頁面重複使用,並提供程式碼範例。一、建立自訂元件首先,在UniApp專案的components目錄下新建一個資料夾,命名為custom-

使用Vue.extend函數自訂元件的步驟和注意事項 使用Vue.extend函數自訂元件的步驟和注意事項 Jul 25, 2023 am 08:49 AM

使用Vue.extend函數自訂元件的步驟和注意事項在Vue.js中,使用Vue.extend函數可以方便地自訂元件。自訂元件可讓我們根據業務需求建立可重複使用的元件,並將其在不同的地方進行呼叫。本文將介紹使用Vue.extend函數自訂元件的步驟和一些需要注意的事項,並透過程式碼範例來示範。步驟1:匯入Vue.js和Vue.extend函數在開始自訂群組

使用Vue.extend函數自訂元件的方法和範例 使用Vue.extend函數自訂元件的方法和範例 Jul 24, 2023 pm 06:21 PM

使用Vue.extend函數自訂元件的方法和範例Vue是一個流行的JavaScript框架,用於建立使用者介面。它提供了一種簡單而直觀的方式來創建可重複使用和可組合的元件。在Vue中定義元件的標準方法是使用Vue.component函數,但是在某些情況下,我們可能需要動態地建立元件。 Vue提供了Vue.extend函數,可以幫助我們實現這一點。 Vue.exten

Vue下如何實作響應式表單和自訂表單元件? Vue下如何實作響應式表單和自訂表單元件? Jun 27, 2023 pm 03:11 PM

Vue作為一種常用的JavaScript框架,它在處理表單輸入方面提供了非常方便且強大的工具。 Vue提供了響應式的屬性和事件,使我們可以輕鬆地處理表單輸入、驗證和提交。本文將介紹Vue下如何實作響應式表單和自訂表單元件。一、Vue響應式表單的實作表單模型綁定Vue提供了一個非常簡單的方式來實現表單資料的輸入和自動回應。透過v-model指令,我們可以將表單

Servlet 擴充教學:打造自訂元件,滿足各種業務需求 Servlet 擴充教學:打造自訂元件,滿足各種業務需求 Feb 19, 2024 pm 02:03 PM

:1.Servlet概述Servlet是JAVAWEB開發中廣泛使用的一種伺服器端程式設計元件,與CGI等傳統CGI腳本相比,它具有許多的優點。首先,Servlet是基於Java技術,因此能夠輕鬆整合到JavaEE應用中。其次,Servlet元件可以重複使用,這有助於提高開發效率和程式碼品質。 2.Servlet擴展Servlet並非一成不變的元件,開發者可以根據自己的需求對其進行擴展,以實現特定的功能。 Servlet擴充主要有以下幾種方式:繼承Servlet類別:這是最簡單的方式,開發者可以繼承Serv

Vue3中的createClass函數:自訂元件API Vue3中的createClass函數:自訂元件API Jun 18, 2023 pm 07:27 PM

Vue3是一個非常強大的JavaScript框架,它的核心是Vue實例和元件。 Vue實例是使用定義好的選項建立的,而元件則是由Vue元件API定義的。 Vue3中的createClass函數正是其中一個元件API。何為createClass函數? Vue3的createClass函數提供了一種宣告式的方式來定義元件。這是一個非常重要的概念,因為它為組件的複用和

See all articles