jQuery UI เช่น - ความคืบหน้าบาร์ (ProgressBar)
แสดงขั้นตอนบางอย่างหรือรัฐของความไม่แน่นอน
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกใน 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 = "ความคืบหน้าป้าย"> โหลด ... </ 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>