HTML5: <progress>
Phần tử <progress> dùng để hiển thị tiến trình thực hiện (theo thời gian) của một tác vụ.
Các sự kiện DOM của phần tử:
| Sự kiện DOM | Mô tả |
|---|---|
| mselementresize | Được kích hoạt khi phần tử HTML thay đổi kích thước |
Các thuộc tính DOM của phần tử:
| Thuộc tính | Kiểu truy cập | Mô tả |
|---|---|---|
| form | Lấy một tham chiếu đến form mà đối tượng được nhúng vào trong. | |
| max | Read/Write | Định nghĩa giá trị lớn nhất hoặc giá trị "done" cho phần tử progress. |
| position | Read-only | Trả về thương số của value/max khi thiết lập giá trị cho thuộc tính value (thanh tiến trình được xác định), trả về -1 nếu không thiết lập giá trị cho thuộc tính value (thanh tiến trình không được xác định). |
| value | Read/Write | Thiết lập hoặc lấy giá trị hiện thời của phần tử <progress>, giá trị nằm trong đoạn [0,max]. |
Lưu ý:
Nếu Bạn không sử dụng thuộc tính value thì thanh tiến trình sẽ ở trạng thái không được xác định (ring or inderteminate), khi đó thanh tiến trình vẫn xuất hiện nhưng không có hiệu ứng tiến trình. Còn nếu Bạn sử dụng thuộc tính value nhưng không sử dụng thuộc tính max thì dải tiến trình sẽ là từ 0 đến 1. Bạn cũng có thể sử dụng CSS để thay đổi dạng thể hiện của tiến trình như màu nền, màu chữ (màu tiến trình), ...
Ví dụ:
<html>
<head>
<meta charset="utf-8">
<title>Progress bar example</title>
<style type="text/css">
progress{
/* style the progress bar */
border: 1px solid black;
color: red;
background-color:Yellow;
}
</style>
<script>
function goingUp(){
// add 5% to value
var pBar = document.getElementById( "pbar");
if (pBar.value <= (pBar.max - 5)){
pbar.value += 5;
}
checkStatus();
}
function checkStatus(){
// Shows position and value
// -1 for indeterminate, otherwise current value divided by max.
var pBar = document.getElementById( "pbar");
document.getElementById( "positionStatus").innerHTML = "Value: " + pBar.value;
document.getElementById( "positionStatus").innerHTML += "<br/>Position: " + pBar.position.toFixed(3);
}
function toggle(){
var pBar = document.getElementById( "pbar");
if (pBar.hasAttribute("value")) {
// Removing the value attribute makes the progress bar indeterminate
pBar.removeAttribute( "value");
document.getElementById( "tgl").innerHTML = "Make determinate";
} else {
// Setting the value attribute makes the progress bar determinate
pBar.value = 5;
document.getElementById( "tgl").innerHTML = "Make indeterminate";
}
checkStatus();
}
</script>
</head>
<body onload="checkStatus();">
<h1>Progress bar test</h1>
<p>Thanh tiến trình không xác định: <progress></progress></p>
<p>Nút lệnh "Make determinate" hoặc "Make indeterminate" dùng để nạp hoặc huỷ tiến trình.</p>
<p>Click nút lệnh "Up" để thực hiện tiến trình (mỗi lần click tăng 5%).</p>
<div>
<label id="progLabel">Progress: <progress id="pbar" max="100">Put alternate display here</progress></label>
<button onclick="goingUp();">Up</button>
<button id= "tgl" onclick="toggle();">Make determinate</button>
</div>
<div id="positionStatus"></div>
</body>
</html>