의 jQuery UI의 API - 파트 갤러리 (위젯 공장)
범주
jQuery.widget (이름 [베이스], 프로토 타입) 사용
설명 : 상태 jQuery 플러그인을 만들 같은 추상화 모든 jQuery를 UI 위젯을 사용합니다.
参数 | 类型 | 类型 |
---|---|---|
name | String | 要创建的小部件名称,包括命名空间。 |
base | Function() | 要继承的基础小部件。必须是一个可以使用 `new` 关键词实例化的构造函数。默认为 jQuery.Widget。 |
prototype | PlainObject | 要作为小部件原型使用的对象。 |
당신은 사용할 수 $.Widget
상속의 기초에 관한 객체를하거나 새 위젯을 처음부터 만든 기존의 타사 컨트롤에서 명시 적으로 또는 jQuery를 UI 될 수있다. 동일한 이름을 가진 위젯의 정의는 상기베이스 부재를 상속 심지어 올바르게 위젯을 확장 할 수있다.
jQuery를 UI는 일반적인 jQuery를 약간 다른 사용 패턴을 플러그인보다, 그래서 많은 사람들이, 작은 부품을 보유 포함되어 있습니다. 부재 라이브러리 (위젯 공장)의 정의로 구성되어 동일한 모델을 사용하여 모든 jQuery를 UI 위젯. 그래서만큼 당신이 하나를 사용하는 방법에 대해 알아, 당신은 다른 위젯 (위젯)을 사용하는 방법을 알고있다.
참고 :이 섹션은 사용 진행률 막대 부재 (의 ProgressBar 위젯) 데모를하지만, 구문은 각 위젯에 적용됩니다.
초기화
위젯의 상태를 추적하기 위해, 우리는 위젯의 전과정을 소개한다. 수명주기 때 위젯 초기화를 시작합니다. 위젯을 초기화하기 위해, 단순히 전화 또는 복수의 소자를 연결해야한다.
$ ( "#elem") .progressbar ();
이것은 각 요소에 대한 jQuery 오브젝트를 초기화합니다. ID가 상기 구성 요소의 예 "elem"
.
옵션
이후 progressbar()
가 호출 매개 변수없이 위젯은 기본 옵션을 사용하여 초기화됩니다. 우리는 초기화 옵션에서 기본을 무시하는 옵션 세트를 전달할 수 있습니다 :
$ ( "#elem") .progressbar ({값 : 20});
우리는 옵션의 수에 따라 통과, 우리는 옵션 중 하나가 디폴트 값을 사용한다 통과하지 못한해야 할 수도 있습니다.
당신은 (같은 하나의 객체로 병합됩니다 매개 변수의 여러 옵션을 전달할 수있는 $.extend( true, target, object1, objectN )
). 이 숫자는 인스턴스간에 공유하는 옵션이 유용합니다, 모든 인스턴스를 충당하기 위해 설정됩니다
VAR 옵션 = {모달 : 사실, 쇼 "느린"}; $ ( "# Dialog1") .dialog (옵션); $ ( "#의 Dialog2") .dialog (옵션, {에 AutoOpen : 거짓});
모든 옵션은 개체를 수정하는 경우의 작은 부분에 영향을주지 않습니다 추적을 보장 초기화 깊은 복사 중에 전달됩니다. 그들이 참고로 그대로 배열, 유일한 예외입니다. 이것에 대한 예외는 제대로 상기 데이터 소스를 기준으로 사용되어야하며, 데이터 바인딩을 지원하기 위해서이다.
기본값은 위젯의 속성에 저장되어 있으므로 JQuery와 UI 설정 값을 포함 할 수있다. 예를 들어, 다음과 같이 설정 한 후, 진행 표시 줄의 향후 모든 인스턴스의 값은 80로 기본 설정됩니다 :
$ .ui.progressbar.prototype.options.value = 80;
옵션은 작은 회원국의 일부입니다, 그래서 우리는 또한 초기화 후 옵션을 설정할 수 있습니다. 우리는 다음 방법에 옵션이 표시됩니다.
방법
이제 위젯이 초기화 된, 우리는 그 상태를 쿼리, 또는 위젯에 대한 작업을 수행 할 수 있습니다. 모든 작업은 초기화 방법을 수행하기 위해 호출 된 후를 기준으로합니다. 위젯의 메소드를 호출하기 위해, 우리는 jQuery 플러그인에 메소드의 이름을 전달합니다. 예를 들어, 진행 막대 부재 (의 ProgressBar 위젯)에 호출 value()
방법, 우리가 사용할 수 있습니다 :
$ ( "#elem") .progressbar ( "값");
이 방법은 매개 변수를 사용하는 경우, 우리는 메소드 이름 뒤에 매개 변수를 전달할 수 있습니다. 예를 들어, 매개 변수 전달 40
받는 value()
방법, 우리가 사용할 수 있습니다 :
$ ( "#elem") .progressbar ( "값", 40);
다른 방법으로 jQuery를 같이, 대부분의 위젯 방법은 jQuery를 개체를 반환합니다 :
$ ( "#elem") .progressbar ( "값", 90) .addClass ( "거의-완료");
각 위젯은 위젯을 제공하는 기능을 기반으로 자신의 설정 방법이있다. 그러나, 몇 가지 방법이 아래 상세히 설명 될 모든 작은 부분에 존재가되어있다.
행사
모든 위젯은 그들이 상태 변경을 통지하기 위해 동작과 관련된 다양한 이벤트가있다. 이벤트가 트리거 가장 작은 부분 들어, 접두사로 위젯 이름의 형태로 소문자 이름. 예를 들어, 우리는 진행률 표시 줄에 바인딩 할 수 있습니다 change
될 때 값이 변경을 트리거 이벤트를.
$ ( "#elem") .bind ( "Progressbarchange"함수 () { 경보 ( "값이 변경!"); });
각 이벤트는 옵션으로 해당 철수가 있습니다. 필요한 경우, 우리는의 진행 파악할 수 change
하지 않고 결합보다, 콜백을 progressbarchange
이벤트를.
$ ( "#elem") .progressbar ({ 변경 : 함수 () { 경보 ( "값이 변경!"); } });
모든 위젯은이 change
인스턴스화 할 때 트리거되는 이벤트를.
인스턴스화
위젯의 예는 키와 작은 부분과 전체 이름을 사용하는 것입니다 jQuery.data()
저장. 따라서 진행률 막대 부재 (의 ProgressBar 위젯) 인스턴스 객체를 검색 할 요소에서 다음 코드를 사용할 수 있습니다.
$ ( "#elem") .DATA ( "UI-의 ProgressBar");
요소가 주어진 위젯 행 여부, 당신은 사용할 수 있습니다 :data
선택은 감지 할 수 있습니다.
$ (이하 "#elem은") ( ": 데이터 ( '▽를-의 ProgressBar를')") 네 질병; // 사실 $ (이하 "#elem은") ( ": 데이터 ( '▽를-드래그')") 네 질병; // 거짓
또한 사용할 수있다 :data
모든 요소의 예로서 주어진 위젯의리스트를 얻는다.
$ ( ": 데이터 ( '▽를-의 ProgressBar')");
재산
모든 위젯은 다음과 같은 속성이 있습니다
- defaultElement : 요소를 사용할 수있는 위젯 인스턴스를 사용할 수없는 요소를 구성. 예를 들어, 진행률 표시 줄 때문에
defaultElement
있다"<div>
"$.ui.progressbar({ value: 50 })
새로운에서<div>
진행률 표시 줄 위젯 인스턴스의 인스턴스입니다. - 문서 : 요소 내에 작은 부품이 포함되어
document
. 유용한 위젯의 프레임 워크와 상호 작용해야하는 경우. - 요소 : 위젯을 인스턴스화하는 데 사용되는 요소를 포함하는 jQuery를 객체입니다. 여러 요소를 선택하고 호출하는 경우
.myWidget()
, 각 요소의 단일 위젯 인스턴스를 생성합니다. 따라서, 속성은 항상 요소가 포함되어 있습니다. - 네임 스페이스 : 위치 위젯 프로토 타입 저장소 글로벌 jQuery를 객체입니다. 예를 들어,
"ui"
namespace
작은 프로토 타입 부품에 저장됩니다 나타내는$.ui
. - 옵션 : 옵션은 객체가 현재 위젯을 포함 사용할 수 있습니다. 인스턴스화 된 경우, 사용자에 의해 제공되는 옵션 중 하나는 자동되며
$.myNamespace.myWidget.prototype.options
정의 기본값을 병합. 사용자 지정 옵션은 디폴트 값을 대체. - UUID : 고유 한 정수 식별자가 컨트롤을 나타냅니다.
- 버전 : 위젯의 문자열 버전. jQuery를 UI 위젯의 경우, 속성은 사용 jQuery를 UI 위젯의 버전으로 설정됩니다. 플러그인 개발자는 명시 적으로 프로토 타입의 속성을 설정해야합니다.
- widgetEventPrefix : 이벤트의 접두사 이름에 위젯을 추가합니다. 예를 들어, 드래그 앤 드롭 할 수 있습니다 위젯 (드래그 가능한 위젯) 의
widgetEventPrefix
있다"drag"
당신은 드래그를 만들 때, 이벤트의 이름은,"dragcreate"
. 기본적으로 위젯widgetEventPrefix
그것의 이름입니다. 참고 :이 속성은 매우 향후 릴리스에서 중단되었습니다. 이벤트 이름은 widgetName로 변경됩니다 (예는 eventName"draggable:create"
). - widgetFullName : 위젯은 네임 스페이스의 이름이 포함되어 있습니다. 를 들어
$.widget( "myNamespace.myWidget", {} )
,widgetFullName
될 것입니다"myNamespace-myWidget"
. - widgetName : 위젯의 이름입니다. 를 들어
$.widget( "myNamespace.myWidget", {} )
,widgetName
될 것"myWidget"
. - 창은 요소 내부에 작은 부품이 포함되어
window
. 유용한 위젯의 프레임 워크와 상호 작용해야하는 경우.
jQuery.Widget 기본 위젯 사용
설명 : 기본 위젯 위젯 라이브러리 (위젯 공장) 사용.
빠른 탐색
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
disabled | Boolean | 如果设置为 true ,则禁用该小部件。代码实例: 初始化带有指定 $( ".selector" ).widget({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).widget( "option", "disabled" ); // setter $( ".selector" ).widget( "option", "disabled", true ); |
false |
hide | Boolean 或 Number 或 String 或 Object | 是否使用动画隐藏元素,以及如何动画隐藏元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } }); 在初始化后,获取或设置 // getter var hide = $( ".selector" ).widget( "option", "hide" ); // setter $( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } ); |
null |
show | Boolean 或 Number 或 String 或 Object | 是否使用动画显示元素,以及如何动画显示元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ show: { effect: "blind", duration: 800 } }); 在初始化后,获取或设置 // getter var show = $( ".selector" ).widget( "option", "show" ); // setter $( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } ); |
null |
方法 | 返回 | 描述 |
---|---|---|
_create() | jQuery (plugin only) | _create() 方法是小部件的构造函数。没有参数,但是 this.element 和 this.options 已经设置。
代码实例: 基于一个选项设置小部件元素的背景颜色。 _create: function() { this.element.css( "background-color", this.options.color ); } |
_delay( fn [, delay ] ) | Number | 在指定延迟后调用提供的函数。保持 this 上下文正确。本质上是 setTimeout() 。使用 clearTimeout() 返回超时 ID。
代码实例: 100 毫秒后在小部件上调用 this._delay( this._foo, 100 ); |
_destroy() | jQuery (plugin only) | 公共的 destroy() 方法清除所有的公共数据、事件等等。代表了定制、指定小部件、清理的 _destroy() 。
代码实例: 当小部件被销毁时,从小部件的元素移除一个 class。 _destroy: function() { this.element.removeClass( "my-widget" ); } |
_focusable( element ) | jQuery (plugin only) | 建立聚焦在元素上时要应用 ui-state-focus class 的 element 。
代码实例: 向小部件内的一组元素应用 focusable 样式: this._focusable( this.element.find( ".my-items" ) ); |
_getCreateEventData() | Object | 所有的小部件触发 create 事件。默认情况下,事件中不提供任何的数据,但是该方法会返回一个对象,作为 create 事件的数据被传递。
代码实例: 向 _getCreateEventData: function() { return this.options; } |
_getCreateOptions() | Object | 该方法允许小部件在初始化期间为定义选项定义一个自定义的方法。用户提供的选项会覆盖该方法返回的选项,即会覆盖默认的选项。
代码实例: 让小部件元素的 id 属性作为选项可用。 _getCreateOptions: function() { return { id: this.element.attr( "id" ) }; } |
_hide( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效隐藏一个元素。如需了解可能的 option 值,请查看 hide 。
代码实例: 为自定义动画传递 this._hide( this.element, this.options.hide, function() { // Remove the element from the DOM when it's fully hidden. $( this ).remove(); }); |
_hoverable( element ) | jQuery (plugin only) | 建立悬浮在元素上时要应用 ui-state-hover class 的 element 。事件处理程序在销毁时自动清理。
代码实例: 当悬浮在元素上时,向元素内所有的 this._hoverable( this.element.find( "div" ) ); |
_init() | jQuery (plugin only) | 小部件初始化的理念与创建不同。任何时候不带参数的调用插件或者只带一个选项哈希的调用插件,初始化小部件。当小部件被创建时会包含这个方法。
注释:如果存在不带参数成功调用小部件时要执行的逻辑动作,初始化只能在这时处理。
代码实例: 如果设置了 _init: function() { if ( this.options.autoOpen ) { this.open(); } } |
_off( element, eventName ) | jQuery (plugin only) | 从指定的元素取消绑定事件处理程序。
代码实例: 从小部件的元素上取消绑定所有 click 事件。 this._off( this.element, "click" ); |
_on( [suppressDisabledCheck ] [, element ], handlers ) | jQuery (plugin only) | 授权通过事件名称内的选择器被支持,例如 "click .foo" 。 _on() 方法提供了一些直接事件绑定的好处:
代码实例: 放置小部件元素内所有被点击的链接的默认行为。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); } }); |
_setOption( key, value ) | jQuery (plugin only) | 为每个独立的选项调用 _setOptions() 方法。小部件状态随着改变而更新。
代码实例: 当小部件的 _setOption: function( key, value ) { if ( key === "width" ) { this.element.width( value ); } if ( key === "height" ) { this.element.height( value ); } this._super( key, value ); } |
_setOptions( options ) | jQuery (plugin only) | 当调用 option() 方法时调用,无论以什么形式调用 option() 。如果您要根据多个选项的改变而改变处理器密集型,重载该方法是很有用的。
代码实例: 如果小部件的 _setOptions: function( options ) { var that = this, resize = false; $.each( options, function( key, value ) { that._setOption( key, value ); if ( key === "height" || key === "width" ) { resize = true; } }); if ( resize ) { this.resize(); } } |
_show( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效显示一个元素。如需了解可能的 option 值,请查看 show 。
代码实例: 为自定义动画传递 this._show( this.element, this.options.show, function() { // Focus the element when it's fully visible. this.focus(); } |
_super( [arg ] [, ... ] ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有任意指定的参数。本质上是 .call() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._super( key, value ); } |
_superApply( arguments ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有参数的数组。本质上是 .apply() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._superApply( arguments ); } |
_trigger( type [, event ] [, data ] ) | Boolean | 触发一个事件及其相关的回调。带有该名称的选项与作为回调被调用的类型相等。 事件名称是小部件名称和类型的小写字母串。 注释:当提供数据时,您必须提供所有三个参数。如果没有传递事件,则传递 如果默认行为是阻止的,则返回
代码实例: 当按下一个键时,触发 this._on( this.element, { keydown: function( event ) { // Pass the original event so that the custom search event has // useful information, such as keyCode this._trigger( "search", event, { // Pass additional information unique to this event value: this.element.val() }); } }); |
destroy() | jQuery (plugin only) | 完全移除小部件功能。这会把元素返回到它的预初始化状态。
代码实例: 当点击小部件的任意锚点时销毁小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.destroy(); } }); |
disable() | jQuery (plugin only) | 禁用小部件。
代码实例: 当点击小部件的任意锚点时禁用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.disable(); } }); |
enable() | jQuery (plugin only) | 启用小部件。
代码实例: 当点击小部件的任意锚点时启用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.enable(); } }); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 获得 this.option( "width" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前小部件选项哈希。
代码实例: 记录每个小部件选项的键/值对,用于调试。 var options = this.option(); for ( var key in options ) { console.log( key, options[ key ] ); } |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的小部件选项的值。
代码实例: 设置 this.option( "width", 500 ); |
option( options ) | jQuery (plugin only) | 为小部件设置一个或多个选项。
代码实例: 设置 this.option({ width: 500, height: 500 }); |
widget() | jQuery | 返回一个包含原始元素或其他相关的生成元素的 jQuery 对象。
代码实例: 当创建小部件时,在小部件的原始元素周围放置一个红色的边框。 _create: function() { this.widget().css( "border", "2px solid red" ); } |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | widgetcreate | 当小部件被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的小部件: $( ".selector" ).widget({ create: function( event, ui ) {} }); 绑定一个事件监听器到 widgetcreate 事件: $( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); |