บทช่วยสอน jQuery UI เช่น - ความคืบหน้าบาร์ (ProgressBar) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,ป้ายที่กำหนดเอง,มูลค่าไม่ทราบแน่ชัด,
แสดงขั้นตอนบางอย่างหรือรัฐของความไม่แน่นอน
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกใน ProgressBar ดูเอกสาร API แถบความคืบหน้าสมาชิก (ProgressBar Widget ที่)
เริ่มต้นคือแถบความคืบหน้ามุ่งมั่น
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ความคืบหน้าบาร์ (ProgressBar) - ฟังก์ชั่นเริ่มต้น </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <script> $ (ฟังก์ชั่น () { $ ( "#progressbar") .progressbar ({ คุ้มค่า: 37 }); }); </ script> </ head> <body> <div id = "ProgressBar"> </ div> </ body> </ html>
ฉลากปรับปรุงที่กำหนดเอง
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ความคืบหน้าบาร์ (ProgressBar) - แท็บกำหนดเอง </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> .ui-ProgressBar { ตำแหน่ง: ญาติ; } .progress ป้าย { position: absolute; ซ้าย: 50%; ด้านบน: 4px; font-weight: หนา; ข้อความเงา: 1px 1px 0 # fff; } </ style> <script> $ (ฟังก์ชั่น () { var ProgressBar = $ ( "#progressbar") progressLabel = $ ( ".progress ป้าย"); progressbar.progressbar ({ มูลค่าเท็จ เปลี่ยนฟังก์ชั่น () { progressLabel.text (progressbar.progressbar ( "value") + "%"); } เสร็จสมบูรณ์: ฟังก์ชั่น () { progressLabel.text ( "เสร็จสมบูรณ์!"); } }); ความคืบหน้าของฟังก์ชั่น () { var = Val progressbar.progressbar ( "value") || 0; progressbar.progressbar ( "ค่า", Val + 1); ถ้า (Val <99) { setTimeout (ความคืบหน้า 100); } } setTimeout (ความคืบหน้า 3000); }); </ script> </ head> <body> <div id = "ProgressBar"> <div class = "ความคืบหน้าป้าย"> โหลด th. </ div> </ div> </ body> </ html>
แถบความคืบหน้าไม่แน่นอนและสามารถสลับระหว่างรูปแบบบางอย่างและมีความไม่แน่นอน
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ความคืบหน้าบาร์ (ProgressBar) - ค่าไม่แน่นอน </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <script> $ (ฟังก์ชั่น () { $ ( "#progressbar") .progressbar ({ มูลค่าเท็จ }); $ ( "ปุ่ม") .on ( "คลิก" ฟังก์ชั่น (event) { เป้าหมาย var = $ (event.target) ProgressBar = $ ( "#progressbar") progressbarValue = progressbar.find ( ".ui-ProgressBar ค่า"); ถ้า (target.is ( "#numButton")) { progressbar.progressbar ( "ตัวเลือก" { มูลค่า Math.Floor (Math.random () * 100) }); } else if (target.is ( "#colorButton")) { progressbarValue.css ({ "พื้นหลัง": '#' + Math.Floor (Math.random () * 16777215) .ToString (16) }); } else if (target.is ( "#falseButton")) { progressbar.progressbar ( "ตัวเลือก", "value" เท็จ); } }); }); </ script> <style> #progressbar .ui-ProgressBar ค่า { สีพื้นหลัง: # CCC; } </ style> </ head> <body> <div id = "ProgressBar"> </ div> <ปุ่ม id = "numButton"> ค่าสุ่ม - ตกลง </ ปุ่ม> <ปุ่ม id = "falseButton"> แน่นอน </ ปุ่ม> <ปุ่ม id = "colorButton"> สีแบบสุ่ม </ ปุ่ม> </ body> </ html>