Progress Bar คือการแสดงแถบประมวลผลการทำงานของโปรแกรมที่เราได้กำหนดไว้ โดยเราสามารถกำหนดข้อความ ก่อนทำการประมวลผล และ หลังการประมวลผล
ตัวอย่างโค้ด
**โค้ดรวมทั้งหมด
โค้ด: เลือกทั้งหมด
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI(Progressbar)</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "เสร็จสิ้น!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">กรุณารอสักครู่...</div></div>
</body>
</html>
โดยจะเเยกเป็นแต่ละส่วนการทำงานไว้ดังนี้
ส่วนที่ 1 จะเป็นตัวของ style ไว้สำหรับ ตำแหน่งของข้อความ ความหนาของข้อความ
โค้ด: เลือกทั้งหมด
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
ส่วนที่ 2 จะเป็นการทำงานของ JavaScript โดยจะเป็นการกำหนดตัวที่ทำให้ตัวแถบประมวลผลมีข้อความ บ่งบอกว่าถึงขึ้นตอนไหนเเล้ว อีกทั้งผู้ใช้งานยังสามารถกำหนดตัวเลขระหว่างการ ประมวลผลได้ด้วย
โค้ด: เลือกทั้งหมด
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "เสร็จสิ้น!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 0.10 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 300);
});
</script>
ผลลัพธ์ส่วนที่ 1 ก่อนทำการประมวลผล
- g3.png (9.36 KiB) Viewed 1732 times
ผลลัพธ์ส่วนที่ 2 ระหว่างการประมวลผล
- g2.png (7.5 KiB) Viewed 1732 times
ส่วนที่ 3 เสร็จสิ้นการประมวลผล
- g1.png (9.11 KiB) Viewed 1732 times
จากภาพการทำงานด้านบนสรุปได้ว่า เมื่อเราทำการเรียกหน้าเว็บนี้ขึ้นมา ตัวโปรแกรมนี้จะทำการเเสดงผลการประมวลผลจากโค้ดภายใน
JavaScript โดยผู้ใช้งานสามารถกำหนดข้อความ หรือ ระยะเวลาในการประมวลผลได้
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
-
สอนการใช้งาน jQuery & Ajax
-
ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-
ศึกษาบทเรียนเกี่ยวกับ JavaScript
-
ศึกษาบทเรียนเกี่ยวกับ jQuery
-
ศึกษาบทเรียนเกี่ยวกับ Ajax
Progress Bar คือการแสดงแถบประมวลผลการทำงานของโปรแกรมที่เราได้กำหนดไว้ โดยเราสามารถกำหนดข้อความ ก่อนทำการประมวลผล และ หลังการประมวลผล
[b]ตัวอย่างโค้ด[/b]
[color=#FF0000]**โค้ดรวมทั้งหมด[/color]
[code]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI(Progressbar)</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "เสร็จสิ้น!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">กรุณารอสักครู่...</div></div>
</body>
</html>[/code]
โดยจะเเยกเป็นแต่ละส่วนการทำงานไว้ดังนี้
[b]ส่วนที่ 1[/b] จะเป็นตัวของ style ไว้สำหรับ ตำแหน่งของข้อความ ความหนาของข้อความ
[code]<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>[/code]
[b]ส่วนที่ 2[/b] จะเป็นการทำงานของ JavaScript โดยจะเป็นการกำหนดตัวที่ทำให้ตัวแถบประมวลผลมีข้อความ บ่งบอกว่าถึงขึ้นตอนไหนเเล้ว อีกทั้งผู้ใช้งานยังสามารถกำหนดตัวเลขระหว่างการ ประมวลผลได้ด้วย
[code]<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "เสร็จสิ้น!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 0.10 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 300);
});
</script>[/code]
[b]ผลลัพธ์ส่วนที่ 1 ก่อนทำการประมวลผล [/b]
[attachment=2]g1.png[/attachment]
[b]ผลลัพธ์ส่วนที่ 2 ระหว่างการประมวลผล [/b]
[attachment=1]g2.png[/attachment]
[b]ส่วนที่ 3 เสร็จสิ้นการประมวลผล[/b]
[attachment=0]g3.png[/attachment]
จากภาพการทำงานด้านบนสรุปได้ว่า เมื่อเราทำการเรียกหน้าเว็บนี้ขึ้นมา ตัวโปรแกรมนี้จะทำการเเสดงผลการประมวลผลจากโค้ดภายใน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]JavaScript[/url] โดยผู้ใช้งานสามารถกำหนดข้อความ หรือ ระยะเวลาในการประมวลผลได้
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- [url=https://www.mindphp.com/forums/viewforum.php?f=78]สอนการใช้งาน jQuery & Ajax[/url]
- [url=https://www.mindphp.com/forums/viewforum.php?f=18]ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]ศึกษาบทเรียนเกี่ยวกับ JavaScript[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]ศึกษาบทเรียนเกี่ยวกับ jQuery[/url]
- [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax.html]ศึกษาบทเรียนเกี่ยวกับ Ajax[/url]