jQuery UI API - ส่วนที่แกลลอรี่ (โรงงาน Widget)
หมวดหมู่
ยูทิลิตี้ (Utilities) | เครื่องมือ (วิดเจ็ต)
jQuery.widget (ชื่อ [ฐาน] ต้นแบบ) การใช้งาน
คำอธิบาย: ใช้ทุกเครื่องมือ jQuery UI กับนามธรรมเดียวกันเพื่อสร้างปลั๊กอิน jQuery stateful
参数 | 类型 | 类型 |
---|---|---|
name | String | 要创建的小部件名称,包括命名空间。 |
base | Function() | 要继承的基础小部件。必须是一个可以使用 `new` 关键词实例化的构造函数。默认为 jQuery.Widget。 |
prototype | PlainObject | 要作为小部件原型使用的对象。 |
คุณสามารถใช้ $.Widget
วัตถุเป็นพื้นฐานของมรดกหรืออาจจะชัดเจนหรือ jQuery UI จากที่มีอยู่การควบคุมของบุคคลที่สามที่สร้างขึ้นจากรอยขีดข่วนเครื่องมือใหม่ ความหมายของเครื่องมือที่มีชื่อเดียวกันที่จะสืบทอดสมาชิกฐานและยังช่วยให้คุณที่จะต้องขยายวิดเจ็ต
jQuery UI มีหลายถือชิ้นส่วนขนาดเล็กดังนั้นกว่า jQuery ทั่วไปปลั๊กอินรูปแบบการใช้แตกต่างกันเล็กน้อย เครื่องมือทั้งหมด jQuery UI การใช้รูปแบบเดียวกันซึ่งประกอบด้วยสมาชิกห้องสมุด (โรงงาน Widget) นิยาม ดังนั้นตราบใดที่คุณเรียนรู้วิธีการใช้งานหนึ่งคุณรู้วิธีการใช้เครื่องมืออื่น ๆ (Widget)
หมายเหตุ: ส่วนนี้โดยใช้ แถบความคืบหน้าของสมาชิก (ProgressBar Widget) สาธิต แต่ไวยากรณ์ถูกนำไปใช้เครื่องมือแต่ละ
การเขียนอักษรย่อ
เพื่อที่จะติดตามสถานะของเครื่องมือที่เราต้องแนะนำวัฏจักรชีวิตทั้งหมดของเครื่องมือ วงจรชีวิตเริ่มต้นขึ้นเมื่อเริ่มต้นวิดเจ็ต ในการเริ่มต้นเครื่องมือเราก็ต้องเสียบสายหรือส่วนใหญ่ขององค์ประกอบ
$ ( "#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 Widget ที่) value()
วิธีการที่เราสามารถใช้:
$ ( "#elem") .progressbar ( "Value");
หากวิธีการใช้พารามิเตอร์เราสามารถส่งผ่านพารามิเตอร์หลังชื่อวิธีการ ยกตัวอย่างเช่นในการส่งผ่านพารามิเตอร์ 40
กับ value()
วิธีการที่เราสามารถใช้:
$ ( "#elem") .progressbar ( "Value", 40);
เช่น jQuery ในรูปแบบอื่น ๆ วิธีการเครื่องมือส่วนใหญ่ส่งกลับวัตถุ jQuery:
$ ( "#elem") .progressbar ( "ค่า", 90) .addClass ( "เกือบทำ");
เครื่องมือแต่ละวิธีมีการตั้งค่าของตัวเองซึ่งจะขึ้นอยู่กับการทำงานโดยวิดเจ็ต แต่มีวิธีการบางอย่างอยู่บนชิ้นส่วนขนาดเล็กทั้งหมดซึ่งจะอธิบายในรายละเอียดด้านล่าง
เหตุการณ์
วิดเจ็ตทั้งหมดและพวกเขามีความหลากหลายของกิจกรรมที่เกี่ยวข้องกับพฤติกรรมในการที่จะแจ้งให้คุณทราบเมื่อมีการเปลี่ยนแปลงของรัฐ สำหรับชิ้นส่วนขนาดเล็กที่สุดเมื่อเหตุการณ์จะถูกเรียกชื่ออักษรตัวพิมพ์เล็กในรูปแบบของชื่อ Widget เป็นคำนำหน้านั้น ตัวอย่างเช่นเราสามารถผูกแถบความคืบหน้าของ change
เหตุการณ์ซึ่งจะถูกเรียกเมื่อมีการเปลี่ยนแปลงค่า
$ ( "#elem") .bind ( "Progressbarchange" ฟังก์ชั่น () { การแจ้งเตือน ( "ค่าที่มีการเปลี่ยนแปลง!"); });
แต่ละเหตุการณ์มีดึงสอดคล้องกันซึ่งเป็นตัวเลือก ถ้าจำเป็นเราสามารถเข้าใจความคืบหน้าของ change
การเรียกกลับมากกว่าผูกพัน progressbarchange
เหตุการณ์
$ ( "#elem") .progressbar ({ เปลี่ยนฟังก์ชั่น () { การแจ้งเตือน ( "ค่าที่มีการเปลี่ยนแปลง!"); } });
วิดเจ็ตทั้งหมดมี change
เหตุการณ์ซึ่งจะถูกเรียกเมื่ออินสแตนซ์
instantiation
ตัวอย่างของเครื่องมือคือการใช้ชื่อเต็มกับส่วนเล็ก ๆ เป็นคีย์ jQuery.data()
การจัดเก็บ ดังนั้นคุณสามารถใช้รหัสต่อไปนี้จากองค์ประกอบที่จะดึงสมาชิกแถบความคืบหน้า (ProgressBar Widget) วัตถุตัวอย่างเช่น
$ ( "#elem") .data ( "UI-ProgressBar");
ไม่ว่าจะเป็นองค์ประกอบที่ถูกผูกไว้สำหรับวิดเจ็ตที่กำหนดคุณสามารถใช้ :data
ตัวเลือกในการตรวจสอบ
$ ( "#elem") .is ( ": ข้อมูล (UI-ProgressBar ')"); // จริง $ ( "#elem") .is ( ": ข้อมูล (UI-ลากไปมาได้)"); // เท็จ
นอกจากนี้คุณยังสามารถใช้ :data
ที่จะได้รับรายชื่อของวิดเจ็ตที่กำหนดเป็นตัวอย่างขององค์ประกอบทั้งหมดที่
$ ( ": ข้อมูล (UI-ProgressBar ')");
คุณสมบัติ
วิดเจ็ตทั้งหมดมีคุณสมบัติดังต่อไปนี้:
- defaultElement: องค์ประกอบเมื่อสร้างอินสแตนซ์ Widget องค์ประกอบไม่พร้อมใช้งานในการใช้ ตัวอย่างเช่นเพราะแถบความคืบหน้า
defaultElement
เป็น"<div>
"$.ui.progressbar({ value: 50 })
ในใหม่<div>
อินสแตนซ์ของอินสแตนซ์ Widget แถบความคืบหน้า - เอกสาร: มีชิ้นส่วนขนาดเล็กภายในองค์ประกอบ
document
ประโยชน์ถ้าคุณจำเป็นต้องมีปฏิสัมพันธ์กับในกรอบของเครื่องมือ - องค์ประกอบ: วัตถุ jQuery ที่มีองค์ประกอบที่ใช้ในการยกตัวอย่างเครื่องมือ หากคุณเลือกหลายองค์ประกอบและเรียก
.myWidget()
คุณจะสร้างอินสแตนซ์ Widget เดียวของแต่ละองค์ประกอบ ดังนั้นคุณสมบัติเสมอมีองค์ประกอบ - namespace: สถานที่ตั้ง Widget ร้านต้นแบบวัตถุ jQuery ทั่วโลก ยกตัวอย่างเช่น
"ui"
namespace
หมายถึงชิ้นส่วนต้นแบบขนาดเล็กจะถูกเก็บไว้ใน$.ui
- ตัวเลือก: เลือกที่จะใช้วัตถุในปัจจุบันมีเครื่องมือ เมื่ออินสแตนซ์ใด ๆ ของตัวเลือกที่มีให้โดยผู้ใช้จะทำงานโดยอัตโนมัติและ
$.myNamespace.myWidget.prototype.options
รวมค่าเริ่มต้นที่กำหนดไว้ ตัวเลือกที่ผู้ใช้ระบุแทนที่ค่าเริ่มต้น - UUID: ตัวระบุจำนวนเต็มไม่ซ้ำกันบ่งชี้การควบคุม
- รุ่นสตริงของเครื่องมือ: รุ่น สำหรับเครื่องมือ jQuery UI ทรัพย์สินที่จะถูกกำหนดให้รุ่นของเครื่องมือ jQuery UI ที่ใช้ นักพัฒนา Plug-in ต้องกำหนดอย่างชัดเจนทรัพย์สินของต้นแบบของพวกเขา
- widgetEventPrefix: เพิ่มวิดเจ็ตคำนำหน้าชื่อของเหตุการณ์ ยกตัวอย่างเช่น สามารถลากและวางวิดเจ็ต (Widget ลาก) ของ
widgetEventPrefix
เป็น"drag"
ดังนั้นเมื่อคุณสร้างที่ลากชื่อของเหตุการณ์คือ"dragcreate"
โดยค่าเริ่มต้นเครื่องมือwidgetEventPrefix
เป็นชื่อของตน หมายเหตุ: คุณสมบัตินี้ถูกทิ้งร้างที่เปิดตัวในอนาคตมาก ชื่อเหตุการณ์จะเปลี่ยนไป widgetName: EventName (เช่น"draggable:create"
) - widgetFullName: เครื่องมือที่มีชื่อเต็มของการ namespace สำหรับ
$.widget( "myNamespace.myWidget", {} )
,widgetFullName
จะ"myNamespace-myWidget"
- widgetName: ชื่อของวิดเจ็ต สำหรับ
$.widget( "myNamespace.myWidget", {} )
,widgetName
จะ"myWidget"
- หน้าต่าง: มันมีชิ้นส่วนขนาดเล็กภายในองค์ประกอบ
window
ประโยชน์ถ้าคุณจำเป็นต้องมีปฏิสัมพันธ์กับในกรอบของเครื่องมือ
การใช้งาน Widget พื้นฐาน jQuery.Widget
คำอธิบาย: ห้องสมุดเครื่องมือ Widget ฐาน (โรงงาน 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 ) {} ); |