JqueryUI - โรงงานวิดเจ็ต
ก่อนหน้านี้วิธีเดียวในการเขียนคอนโทรลแบบกำหนดเองใน jQuery คือการขยายเนมสเปซ$ .fn สิ่งนี้ใช้ได้ดีกับวิดเจ็ตธรรมดา ๆ สมมติว่าคุณสร้างวิดเจ็ตที่มีสถานะมากขึ้นมันจะกลายเป็นเรื่องยุ่งยากอย่างรวดเร็ว เพื่อช่วยในกระบวนการสร้างวิดเจ็ต Widget Factory ได้ถูกนำมาใช้ใน jQuery UI ซึ่งจะลบต้นแบบส่วนใหญ่ที่มักจะเกี่ยวข้องกับการจัดการวิดเจ็ต
jQueryUI Widget Factory เป็นเพียงฟังก์ชัน ($ .widget) ที่ใช้ชื่อสตริงและอ็อบเจ็กต์เป็นอาร์กิวเมนต์และสร้างปลั๊กอิน jQuery และ "คลาส" เพื่อสรุปการทำงาน
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ของวิธี jQueryUI Widget Factory -
jQuery.widget( name [, base ], prototype )name- เป็นสตริงที่มีเนมสเปซและชื่อวิดเจ็ต (คั่นด้วยจุด) ของวิดเจ็ตที่จะสร้าง
base- วิดเจ็ตพื้นฐานที่จะสืบทอดจาก ต้องเป็นตัวสร้างที่สามารถสร้างอินสแตนซ์ด้วยคีย์เวิร์ด "new" ได้ เริ่มต้นที่jQuery.Widget
prototype- วัตถุที่จะใช้เป็นต้นแบบสำหรับวิดเจ็ตที่จะสืบทอด ตัวอย่างเช่น jQuery UI มีปลั๊กอิน "เมาส์" ซึ่งเป็นพื้นฐานของปลั๊กอินการโต้ตอบที่เหลือ เพื่อให้บรรลุสิ่งนี้สามารถลากได้หยดน้ำและอื่น ๆ ทั้งหมดได้รับการสืบทอดมาจากปลั๊กอินเมาส์เช่น: jQuery.widget ("ui.draggable", $ .ui.mouse, {... }); หากคุณไม่ระบุอาร์กิวเมนต์นี้วิดเจ็ตจะสืบทอดโดยตรงจาก "วิดเจ็ตฐาน" jQuery.Widget (โปรดสังเกตความแตกต่างระหว่างตัวพิมพ์เล็ก "w" jQuery.widget และ "W" jQuery.Widget ตัวพิมพ์ใหญ่)
วิดเจ็ตฐาน
วิดเจ็ตฐานเป็นวิดเจ็ตที่ใช้โดยโรงงานวิดเจ็ต
ตัวเลือก
ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้กับวิดเจ็ตพื้นฐาน -
| ซีเนียร์ | ตัวเลือกและคำอธิบาย | 
|---|---|
| 1 | ปิดการใช้งานซ่อน ตัวเลือกนี้จะปิดการใช้งานเครื่องมือที่ถ้าตั้งค่าเป็นจริง โดยค่าเริ่มต้นคือfalse. Option - disabledhide ตัวเลือกนี้จะปิดการใช้งานเครื่องมือที่ถ้าตั้งค่าเป็นจริง โดยค่าเริ่มต้นคือfalse. Example  | 
| 2 | ซ่อน ตัวเลือกนี้กำหนดวิธีทำให้การซ่อนองค์ประกอบเคลื่อนไหว โดยค่าเริ่มต้นคือnull. Option - hide ตัวเลือกนี้กำหนดวิธีทำให้การซ่อนองค์ประกอบเคลื่อนไหว โดยค่าเริ่มต้นคือnull. สิ่งนี้สามารถเป็นประเภท - 
 Example  | 
| 3 | แสดง ตัวเลือกนี้กำหนดวิธีทำให้การแสดงองค์ประกอบเคลื่อนไหว โดยค่าเริ่มต้นคือnull. Option - show ตัวเลือกนี้กำหนดวิธีทำให้การแสดงองค์ประกอบเคลื่อนไหว โดยค่าเริ่มต้นคือnull. สิ่งนี้สามารถเป็นประเภท - 
 Example  | 
วิธีการ
ตารางต่อไปนี้แสดงวิธีการต่างๆที่สามารถใช้กับวิดเจ็ตพื้นฐาน -
| ซีเนียร์ | การดำเนินการและคำอธิบาย | 
|---|---|
| 1 | _สร้าง() วิธีนี้เป็นตัวสร้างของวิดเจ็ต ไม่มีพารามิเตอร์ แต่นี่คือองค์ประกอบและตัวเลือกนี้ถูกตั้งค่าไว้แล้ว Action - _create() การกระทำนี้ทำลายการทำงานของหีบเพลงขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้เป็นตัวสร้างของวิดเจ็ต ไม่มีพารามิเตอร์ แต่นี่คือองค์ประกอบและตัวเลือกนี้ถูกตั้งค่าไว้แล้ว Example  | 
| 2 | _delay (fn [ล่าช้า]) วิธีนี้เรียกใช้ฟังก์ชันที่ให้มาหลังจากการหน่วงเวลาที่ระบุ ส่งกลับ ID หมดเวลาสำหรับการใช้งานกับclearTimeout () Action - _delay( fn [, delay ] ) วิธีนี้เรียกใช้ฟังก์ชันที่ให้มาหลังจากการหน่วงเวลาที่ระบุ ส่งกลับ ID หมดเวลาสำหรับการใช้งานกับclearTimeout () Example  | 
| 3 | _ทำลาย() ประชาชนทำลาย ()วิธีการทำความสะอาดข้อมูลทั้งหมดที่พบบ่อย, กิจกรรม, ฯลฯ และจากนั้นได้รับมอบหมายจากนี้_destroy ()วิธีการที่กำหนดเอง, เครื่องมือเฉพาะการทำความสะอาด Action - _destroy() ประชาชนทำลาย ()วิธีการทำความสะอาดข้อมูลทั้งหมดที่พบบ่อย, กิจกรรม, ฯลฯ และจากนั้นได้รับมอบหมายจากนี้_destroy ()วิธีการที่กำหนดเอง, เครื่องมือเฉพาะการทำความสะอาด Example  | 
| 4 | _focusable (องค์ประกอบ) วิธีนี้ตั้งค่าองค์ประกอบเพื่อใช้คลาสui-state-focusที่โฟกัส ตัวจัดการเหตุการณ์จะถูกล้างโดยอัตโนมัติเมื่อทำลาย Action - _focusable( element ) วิธีนี้ตั้งค่าองค์ประกอบเพื่อใช้คลาสui-state-focusที่โฟกัส ตัวจัดการเหตุการณ์จะถูกล้างโดยอัตโนมัติเมื่อทำลาย Example  | 
| 5 | _getCreateEventData () วิดเจ็ตทั้งหมดทริกเกอร์เหตุการณ์สร้าง โดยค่าเริ่มต้นจะไม่มีข้อมูลในเหตุการณ์ แต่วิธีนี้สามารถส่งคืนอ็อบเจ็กต์ซึ่งจะถูกส่งผ่านไปเป็นข้อมูลของเหตุการณ์สร้าง Action - _getCreateEventData() วิดเจ็ตทั้งหมดทริกเกอร์เหตุการณ์สร้าง โดยค่าเริ่มต้นจะไม่มีข้อมูลในเหตุการณ์ แต่วิธีนี้สามารถส่งคืนอ็อบเจ็กต์ซึ่งจะถูกส่งผ่านไปเป็นข้อมูลของเหตุการณ์สร้าง Example  | 
| 6 | _getCreateOptions () วิธีนี้ช่วยให้วิดเจ็ตสามารถกำหนดวิธีการที่กำหนดเองสำหรับการกำหนดตัวเลือกในระหว่างการสร้างอินสแตนซ์ ตัวเลือกที่ผู้ใช้ระบุจะแทนที่ตัวเลือกที่ส่งคืนโดยวิธีนี้ซึ่งจะแทนที่ตัวเลือกเริ่มต้น Action - _getCreateOptions() วิธีนี้ช่วยให้วิดเจ็ตสามารถกำหนดวิธีการที่กำหนดเองสำหรับการกำหนดตัวเลือกในระหว่างการสร้างอินสแตนซ์ ตัวเลือกที่ผู้ใช้ระบุจะแทนที่ตัวเลือกที่ส่งคืนโดยวิธีนี้ซึ่งจะแทนที่ตัวเลือกเริ่มต้น Example  | 
| 7 | _hide (องค์ประกอบตัวเลือก [โทรกลับ]) วิธีนี้จะซ่อนองค์ประกอบทันทีโดยใช้วิธีการเคลื่อนไหวในตัวหรือใช้เอฟเฟกต์แบบกำหนดเอง ดูตัวเลือกซ่อนสำหรับค่าตัวเลือกที่เป็นไปได้ Action - _hide( element, option [, callback ] ) วิธีนี้จะซ่อนองค์ประกอบทันทีโดยใช้วิธีการเคลื่อนไหวในตัวหรือใช้เอฟเฟกต์แบบกำหนดเอง ดูตัวเลือกซ่อนสำหรับค่าตัวเลือกที่เป็นไปได้ Example  | 
| 8 | _hoverable (องค์ประกอบ) วิธีนี้ตั้งค่าองค์ประกอบเพื่อใช้คลาส ui-state-hover บนโฮเวอร์ ตัวจัดการเหตุการณ์จะถูกล้างโดยอัตโนมัติเมื่อทำลาย Action - _hoverable( element ) วิธีนี้ตั้งค่าองค์ประกอบเพื่อใช้คลาส ui-state-hover บนโฮเวอร์ ตัวจัดการเหตุการณ์จะถูกล้างโดยอัตโนมัติเมื่อทำลาย Example  | 
| 9 | _ในนั้น() เมื่อใดก็ตามที่ปลั๊กอินถูกเรียกโดยไม่มีอาร์กิวเมนต์หรือมีเพียงแฮชอ็อพชันวิดเจ็ตจะเริ่มต้น ซึ่งรวมถึงเมื่อสร้างวิดเจ็ต Action - _init() เมื่อใดก็ตามที่ปลั๊กอินถูกเรียกโดยไม่มีอาร์กิวเมนต์หรือมีเพียงแฮชอ็อพชันวิดเจ็ตจะเริ่มต้น ซึ่งรวมถึงเมื่อสร้างวิดเจ็ต Example  | 
| 10 | _off (องค์ประกอบ eventName) วิธีนี้จะยกเลิกการผูกตัวจัดการเหตุการณ์จากองค์ประกอบที่ระบุ Action - _off( element, eventName ) วิธีนี้จะยกเลิกการผูกตัวจัดการเหตุการณ์จากองค์ประกอบที่ระบุ Example  | 
| 11 | _on ([suppressDisabledCheck] [, องค์ประกอบ], ตัวจัดการ) ผูกตัวจัดการเหตุการณ์กับองค์ประกอบที่ระบุ การมอบสิทธิ์ได้รับการสนับสนุนผ่านตัวเลือกภายในชื่อเหตุการณ์เช่น "click .foo" Action - _on( [suppressDisabledCheck ] [, element ], handlers ) ผูกตัวจัดการเหตุการณ์กับองค์ประกอบที่ระบุ การมอบสิทธิ์ได้รับการสนับสนุนผ่านตัวเลือกภายในชื่อเหตุการณ์เช่น "click .foo" Example  | 
| 12 | _setOption (คีย์ค่า) เมธอดนี้เรียกจากเมธอด _setOptions ()สำหรับแต่ละอ็อพชัน ควรอัปเดตสถานะวิดเจ็ตตามการเปลี่ยนแปลง Action - _setOption( key, value ) เมธอดนี้เรียกจากเมธอด _setOptions ()สำหรับแต่ละอ็อพชัน ควรอัปเดตสถานะวิดเจ็ตตามการเปลี่ยนแปลง Example  | 
| 13 | _setOptions (ตัวเลือก) เมธอดนี้ถูกเรียกเมื่อใดก็ตามที่มีการเรียกใช้เมธอด option () โดยไม่คำนึงถึงรูปแบบที่เรียกว่า option () method Action - _setOptions( options ) เมธอดนี้ถูกเรียกเมื่อใดก็ตามที่มีการเรียกใช้เมธอด option () โดยไม่คำนึงถึงรูปแบบที่เรียกว่า option () method Example  | 
| 14 | _show (องค์ประกอบตัวเลือก [โทรกลับ]) แสดงองค์ประกอบทันทีโดยใช้วิธีการเคลื่อนไหวในตัวหรือใช้เอฟเฟกต์แบบกำหนดเอง ดูตัวเลือกการแสดงสำหรับค่าตัวเลือกที่เป็นไปได้ Action - _show( element, option [, callback ] ) แสดงองค์ประกอบทันทีโดยใช้วิธีการเคลื่อนไหวในตัวหรือใช้เอฟเฟกต์แบบกำหนดเอง ดูตัวเลือกการแสดงสำหรับค่าตัวเลือกที่เป็นไปได้ Example  | 
| 15 | _super ([arg] [, ... ]) เมธอดนี้เรียกใช้เมธอดที่มีชื่อเดียวกันจากวิดเจ็ตพาเรนต์พร้อมด้วยอาร์กิวเมนต์ที่ระบุ โดยพื้นฐานแล้ว. call (). Action - _super( [arg ] [, ... ] ) เมธอดนี้เรียกใช้เมธอดที่มีชื่อเดียวกันจากวิดเจ็ตพาเรนต์พร้อมด้วยอาร์กิวเมนต์ที่ระบุ โดยพื้นฐานแล้ว. call (). Example  | 
| 16 | _superApply (อาร์กิวเมนต์) เรียกใช้เมธอดที่มีชื่อเดียวกันจากวิดเจ็ตพาเรนต์ด้วยอาร์เรย์ของอาร์กิวเมนต์ Action - _superApply( arguments ) เรียกใช้เมธอดที่มีชื่อเดียวกันจากวิดเจ็ตพาเรนต์ด้วยอาร์เรย์ของอาร์กิวเมนต์ Example  | 
| 17 | _trigger (พิมพ์ [เหตุการณ์] [ข้อมูล]) วิธีนี้ทริกเกอร์เหตุการณ์และการเรียกกลับที่เกี่ยวข้อง ตัวเลือกที่มีชื่อเท่ากับ type ถูกเรียกใช้เป็นการเรียกกลับ Action - _trigger( type [, event ] [, data ] ) วิธีนี้ทริกเกอร์เหตุการณ์และการเรียกกลับที่เกี่ยวข้อง ตัวเลือกที่มีชื่อเท่ากับ type ถูกเรียกใช้เป็นการเรียกกลับ Example  | 
| 18 | ทำลาย() วิธีนี้จะลบฟังก์ชันการทำงานของวิดเจ็ตทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Action - destroy() วิธีนี้จะลบฟังก์ชันการทำงานของวิดเจ็ตทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Example  | 
| 19 | ปิดการใช้งาน () วิธีนี้ปิดใช้งานวิดเจ็ต Action - disable() วิธีนี้ปิดใช้งานวิดเจ็ต Example  | 
| 20 | เปิดใช้งาน () วิธีนี้เปิดใช้งานวิดเจ็ต Action - enable() วิธีนี้เปิดใช้งานวิดเจ็ต Example  | 
| 21 | ตัวเลือก (optionName) วิธีการนี้จะได้รับค่าเชื่อมโยงกับที่ระบุOptionName Action - option( optionName ) วิธีการนี้จะได้รับค่าเชื่อมโยงกับที่ระบุOptionName Example  | 
| 22 | ตัวเลือก () วิธีนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกวิดเจ็ตปัจจุบัน Action - option() วิธีนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกวิดเจ็ตปัจจุบัน Example  | 
| 23 | ตัวเลือก (optionName ค่า) เมธอดนี้ตั้งค่าของอ็อพชันวิดเจ็ตที่เชื่อมโยงกับ optionName ที่ระบุ Action - option( optionName, value ) เมธอดนี้ตั้งค่าของอ็อพชันวิดเจ็ตที่เชื่อมโยงกับ optionName ที่ระบุ Example  | 
| 24 | option (ตัวเลือก) วิธีนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับวิดเจ็ต Action - option( options ) วิธีนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับวิดเจ็ต Example  | 
| 25 | วิดเจ็ต () วิธีนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบดั้งเดิมหรือองค์ประกอบอื่น ๆ ที่สร้างขึ้นที่เกี่ยวข้อง Action - widget() วิธีนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบดั้งเดิมหรือองค์ประกอบอื่น ๆ ที่สร้างขึ้นที่เกี่ยวข้อง Example  | 
เหตุการณ์
| ซีเนียร์ | วิธีการและคำอธิบายเหตุการณ์ | 
|---|---|
| 1 | สร้าง (เหตุการณ์, UI) เหตุการณ์นี้ถูกทริกเกอร์เมื่อสร้างวิดเจ็ต Event - create( event, ui ) เหตุการณ์นี้ถูกทริกเกอร์เมื่อสร้างวิดเจ็ต ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax  | 
วงจรชีวิตของโรงงานวิดเจ็ต jQueryUI
โรงงานวิดเจ็ต jQueryUI จัดเตรียมวิธีเชิงวัตถุในการจัดการวงจรชีวิตของวิดเจ็ต กิจกรรมวงจรชีวิตเหล่านี้ ได้แก่ -
การสร้างและทำลายวิดเจ็ต: ตัวอย่างเช่น
$( "#elem" ).progressbar();การเปลี่ยนตัวเลือกวิดเจ็ต: ตัวอย่างเช่น
$( "#elem" ).progressbar({ value: 20 });การโทรแบบ "super" ในวิดเจ็ตคลาสย่อย: ตัวอย่างเช่น
$( "#elem" ).progressbar( "value" );
or 
$( "#elem" ).progressbar( "value", 40 );การแจ้งเตือนเหตุการณ์: ตัวอย่างเช่น
$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});ตัวอย่าง
ตอนนี้ให้เราสร้างวิดเจ็ตที่กำหนดเองในตัวอย่างต่อไปนี้ เราจะสร้างวิดเจ็ตปุ่ม เราจะดูวิธีสร้างตัวเลือกวิธีการและเหตุการณ์ในวิดเจ็ตในตัวอย่างต่อไปนี้ -
การสร้าง Custom Widget
ก่อนอื่นให้เราสร้างวิดเจ็ตแบบกำหนดเองง่ายๆ
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML widgetfactoryexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
การเพิ่มตัวเลือกไปยัง Custom Widget
ในตัวอย่างก่อนหน้านี้เราใช้ฟังก์ชัน_createเพื่อสร้างคอนโทรลแบบกำหนดเอง แต่ผู้ใช้โดยทั่วไปต้องการปรับแต่งการควบคุมโดยการตั้งค่าและปรับเปลี่ยนตัวเลือก เราสามารถกำหนดอ็อบเจ็กต์อ็อพชันซึ่งเก็บค่าดีฟอลต์สำหรับอ็อพชันทั้งหมดที่คุณกำหนด ฟังก์ชัน_setOptionถูกใช้เพื่อจุดประสงค์นี้ เรียกสำหรับแต่ละตัวเลือกที่ผู้ใช้กำหนด ที่นี่เรากำลังตั้งค่าความกว้างและสีพื้นหลังของปุ่ม
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML widgetfactoryexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
การเพิ่มวิธีการลงใน Custom Widget
ในตัวอย่างต่อไปนี้เราจะเพิ่มวิธีการที่ผู้ใช้สามารถใช้ประโยชน์ได้ซึ่งง่ายมากที่จะสร้างลงในกรอบงาน เราจะเขียนวิธีการย้ายซึ่งจะเลื่อนปุ่มตามระยะทางแนวนอนที่ระบุ เพื่อให้ทำงานได้เราต้องกำหนดตำแหน่งและคุณสมบัติด้านซ้ายในฟังก์ชัน_create -
this._button.css("position", "absolute");   
this._button.css("left", "100px");ต่อไปนี้ผู้ใช้สามารถเรียกเมธอดของคุณด้วยวิธี jQuery UI ตามปกติ -
this._button.css("position", "absolute");   
this._button.css("left", "100px");$("button3").myButton("move", 200);<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML widgetfactoryexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -
การเพิ่มเหตุการณ์ไปยัง Custom Widget
ในตัวอย่างนี้เราจะสาธิตวิธีการสร้างเหตุการณ์ ในการสร้างเหตุการณ์สิ่งที่คุณต้องทำคือใช้เมธอด _trigger พารามิเตอร์แรกคือชื่อของเหตุการณ์อ็อบเจ็กต์เหตุการณ์มาตรฐานที่สองที่คุณต้องการส่งผ่านและอ็อบเจ็กต์เหตุการณ์ที่กำหนดเองที่สามที่คุณต้องการส่งผ่าน
ที่นี่เรากำลังเริ่มต้นเหตุการณ์เมื่อหากปุ่มเลื่อนเกิน x = 400 สิ่งที่คุณต้องทำคือเพิ่มฟังก์ชันย้าย -
if(x<400) { this._trigger("outbounds",{}, {position:x}); }ในกรณีนี้เหตุการณ์นี้เรียกว่าขาออกและอ็อบเจ็กต์เหตุการณ์ว่างจะถูกส่งผ่านด้วยอ็อบเจ็กต์เหตุการณ์แบบกำหนดเองที่ให้ตำแหน่งเป็นคุณสมบัติเดียวเท่านั้น
ฟังก์ชันการย้ายทั้งหมดคือ -
move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}ผู้ใช้สามารถตั้งค่าฟังก์ชันการจัดการเหตุการณ์โดยกำหนดตัวเลือกที่มีชื่อเดียวกัน
$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML widgetfactoryexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์กล่องแจ้งเตือนจะเปิดขึ้น