jQuery UI การทำงาน

jQuery UI มีชิ้นส่วนขนาดเล็กจำนวนมากในการรักษาสถานะ (Widget) จึงเป็นปลั๊กอิน jQuery ทั่วไปใช้รูปแบบที่แตกต่างกันเล็กน้อย การติดตั้งคล้ายกับการติดตั้งมากที่สุดของปลั๊กอิน jQuery, เครื่องมือ jQuery UI เป็นไปตาม ห้องสมุดชิ้นส่วน (โรงงาน Widget) สร้างห้องสมุดเครื่องมือให้ทั่วไป API ดังนั้นตราบใดที่คุณเรียนรู้วิธีการใช้งานหนึ่งคุณรู้วิธีการใช้เครื่องมืออื่น ๆ (Widget) กวดวิชานี้จะ (ProgressBar) แถบความคืบหน้า ตัวอย่างโค้ด Widget อธิบายคุณสมบัติทั่วไป

ติดตั้ง

เพื่อที่จะติดตามสถานะขององค์ประกอบแรกที่เราแนะนำวงจรชีวิตของเครื่องมือ เมื่อเครื่องมือที่มีการติดตั้งและวงจรชีวิตเริ่มต้น เราก็ต้องเรียก plug-in ในหนึ่งหรือมากกว่าหนึ่งองค์ประกอบที่เป็นเครื่องมือที่ติดตั้ง

$( "#elem" ).progressbar();

นี้จะเริ่มต้นแต่ละองค์ประกอบในวัตถุ jQuery ในกรณีนี้รหัสองค์ประกอบเป็น "ELEM" เพราะที่เราเรียกว่าไม่มีข้อโต้แย้ง .progressbar() วิธีการเครื่องมือที่เป็นตัวเลือกเริ่มต้นเพื่อให้สอดคล้องกับการเริ่มต้นของ เราสามารถส่งผ่านชุดของตัวเลือกในช่วงเวลาของการติดตั้งเพื่อให้สามารถแทนที่ตัวเลือกเริ่มต้น

$( "#elem" ).progressbar({ value: 20 });

จำนวนของตัวเลือกในการติดตั้งที่ผ่านมากตามความต้องการของเรา เราไม่ผ่านตัวเลือกใด ๆ ที่คุณใช้ค่าเริ่มต้นของพวกเขา

ตัวเลือกการเป็นส่วนหนึ่งของประเทศสมาชิกขนาดเล็กเพื่อให้เรายังสามารถตั้งค่าตัวเลือกหลังการติดตั้ง เราจะทำตาม option อธิบายเป็นส่วนหนึ่งของวิธีการนี้

ทาง

เนื่องจากเครื่องมือที่ได้รับการเริ่มต้นเราสามารถสอบถามสถานะของตนหรือดำเนินการในเครื่องมือ การดำเนินการทั้งหมดจะดำเนินการหลังจากที่เริ่มต้นในรูปแบบของวิธีการเรียก เรียกวิธีการในเครื่องมือที่เราสามารถส่งชื่อของวิธีการที่จะปลั๊กอิน jQuery ตัวอย่างเช่นการเรียกร้องให้แถบความคืบหน้า (ProgressBar) Widget value วิธีการที่เราควรจะใช้:

$( "#elem" ).progressbar( "value" );

หากวิธีการใช้พารามิเตอร์เราสามารถส่งผ่านพารามิเตอร์หลังชื่อวิธีการ ยกตัวอย่างเช่นในการส่งผ่านพารามิเตอร์ 40 กับ value วิธีการที่เราสามารถใช้:

$( "#elem" ).progressbar( "value", 40 );

เช่นเดียวกับวิธีการ jQuery อื่น ๆ ส่วนใหญ่ของเครื่องมือที่เชื่อมโยงวิธีการส่งกลับวัตถุ jQuery

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

วิธีการโยธา

แต่ละเครื่องมือที่มีชุดของตัวเองของเครื่องมือที่ให้แนวทางการทำงานตาม แต่มีวิธีการที่ทุกคนมีเหมือนกันกำลังวิดเจ็ต

ตัวเลือก

ที่เรากล่าวถึงก่อนหน้านี้เราสามารถเริ่มต้นหลังจากที่ option ที่จะเปลี่ยนวิธีการเลือก ตัวอย่างเช่นเราสามารถเรียก option ที่จะเปลี่ยนวิธีการ ProgressBar (แถบความคืบหน้า) ราคา 30

$( "#elem" ).progressbar( "option", "value", 30 );

โปรดทราบนี่คือก่อนที่เราจะเรียก value ตัวอย่างของวิธีการที่แตกต่างกัน ในตัวอย่างนี้เราเรียก option วิธีการเลือกที่จะเปลี่ยนค่าเป็น 30

นอกจากนี้เรายังสามารถได้รับค่าปัจจุบันของตัวเลือก

$( "#elem" ).progressbar( "option", "value" );

นอกจากนี้เราสามารถให้ option ผ่านวิธีการวัตถุอัปเดตหลายตัวเลือก

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

คุณอาจจะได้สังเกตเห็นว่า option วิธีการที่มีค่ารหัส jQuery และธงเดียวกัน Setter เป็น .css() และ .attr() แต่ที่แตกต่างคือการที่คุณจะต้องผ่านสตริง "ตัวเลือก" เป็นพารามิเตอร์แรก

ปิดการใช้งาน

disable วิธีการปิดการใช้งานเครื่องมือที่ ในแถบความคืบหน้า (ProgressBar) กรณีนี้จะเปลี่ยนรูปแบบเพื่อให้แถบความคืบหน้าเป็นคนพิการ

$( "#elem" ).progressbar( "disable" );

โทร disable วิธีการจะเทียบเท่ากับการตั้งค่า disabled ตัวเลือก true

ทำให้สามารถ

enable เป็นวิธีการ disable วิธีการตรงข้าม

$( "#elem" ).progressbar( "enable" );

โทร enable วิธีการจะเทียบเท่ากับการตั้งค่า disabled ตัวเลือกที่ false

ทำลาย

หากคุณไม่ต้องการเครื่องมือที่คุณสามารถทำลายมันกลับไปที่เครื่องหมายเดิม ซึ่งหมายความว่าการสิ้นสุดของวงจรชีวิตของวิดเจ็ต

$( "#elem" ).progressbar( "destroy" );

เมื่อคุณทำลายเครื่องมือที่คุณไม่สามารถเรียกวิธีการใด ๆ ในส่วนเว้นแต่คุณจะเริ่มต้นอีกครั้งวิดเจ็ต หากคุณต้องการที่จะลบองค์ประกอบโดยตรงผ่าน .remove() นอกจากนี้ยังสามารถ .html() หรือ .empty() เพื่อปรับเปลี่ยนบรรพบุรุษ, เครื่องมือจะถูกทำลายโดยอัตโนมัติ

วิดเจ็ต

บางเครื่องมือสร้างองค์ประกอบห่อหรือองค์ประกอบที่เชื่อมต่อกับองค์ประกอบเดิมจะถูกตัดการเชื่อมต่อ ในตัวอย่างต่อไปนี้ widget ผลตอบแทนที่สร้างองค์ประกอบ ในแถบความคืบหน้า (ProgressBar) ตัวอย่างที่ไม่ได้สร้างเสื้อคลุม, widget วิธีการส่งกลับองค์ประกอบเดิม

$( "#elem" ).progressbar( "widget" );

เหตุการณ์

เหตุการณ์วิดเจ็ตทั้งหมดมีความหลากหลายของพฤติกรรมที่เกี่ยวข้องกับพวกเขาสำหรับเมื่อมีการเปลี่ยนแปลงรัฐแจ้งให้คุณทราบ สำหรับชิ้นส่วนขนาดเล็กที่สุดเมื่อเหตุการณ์จะถูกเรียกชื่อให้เป็นชื่อเครื่องมือที่เป็นคำนำหน้า ตัวอย่างเช่นเราสามารถผูกแถบความคืบหน้า () กรณีที่มีการเปลี่ยนแปลงเมื่อการเปลี่ยนแปลงค่าทริกเกอร์

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

แต่ละเหตุการณ์มีการแก้ไขที่สอดคล้องกันเป็นตัวเลือกสำหรับต้นแบบ เราสามารถใช้แถบความคืบหน้า (ProgressBar) สำหรับ change การเรียกกลับซึ่งเทียบเท่ากับการมีผลผูกพัน progressbarchange เหตุการณ์

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

กิจกรรมสาธารณะ

เหตุการณ์ที่เกิดขึ้นส่วนใหญ่จะเป็นเครื่องมือสำหรับเฉพาะวิดเจ็ตทั้งหมดได้ร่วมกัน create เหตุการณ์ กรณีที่มีการเรียกเมื่อเครื่องมือที่ถูกสร้างขึ้น