บทช่วยสอน jQuery UI การทำงาน ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ติดตั้ง,ทาง,เหตุการณ์,
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()
นอกจากนี้ยังสามารถ ()
หรือ .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
เหตุการณ์ กรณีที่มีการเรียกเมื่อเครื่องมือที่ถูกสร้างขึ้น