HTML5 Progress Bar


HTML5_ProgressBar

เมื่อคุณสร้างเว็บไซต์
บางงาน คุณจำเป็นต้องเบี่ยงเบน ความสนใจของผู้ใช้งาน
เพื่อให้ผู้ใช้งาน รู้สึกว่า ไม่รอนานเกินไป
หากคุณปล่อย หน้าจอโปรแกรม ที่ค้างไปสักครู่อย่างนั้น
ต่อหน้า ต่อตา ผู้ใช้งาน เขาจะบ่นขึ้นทันที

คุณจะต้องทำอะไร ก็ได้เพื่อให้ผู้ใช้ รู้สึกว่า
เขา ไม่ได้ถูกทิ้งโดยเดียวดาย
คุณจำเป็นต้องสร้างอะไร ใหวๆ ขึ้นที่หน้าจอ
แทนหน้าจอค้าง ไม่ตอบสนองอะไรนั้น
โดยเพื่อ ให้โปรแกรม ดูดีขึ้น
คุณจะต้องแจ้งให้ ความคืบหน้าของการทำงาน เบื้องหลังนั้น
ให้ผู้ใช้งานรับรู้ด้วย เดี๋ยวนั้น ทันที เช่นกัน

เช่น

  • การคิวรี่ข้อมูลจำนวนมาก (บนโฮสที่อยู่ระยะไกล)
  • การอัพโหลดไฟล์ (ขนาดใหญ่)
  • การเล่นวิดีโอ (คุณเห็นบ่อยในโปรแกรมเล่นวิดีโอ)
  • การนำเข้าข้อมูล
  • หรือการประมวลผลบางอย่างที่ หน้าจอจะนิ่งไปสักพัก…

HTML5 ทำให้ชีวิตโปรแกรมเมอร์ง่ายขึ้น

โดยคุณสามารกำหนด อีลิเมนต์ : <progress></progress> เท่านั้น
คุณก็จะสามารถทำให้หน้าจอ ที่นิ่งเงียบ มีชีวิตขึ้นมาได้ เราไปรู้จักมันสักเล็กน้อย เป็นไง

The progress element

Progress แสดงให้เห็นถึง ความคืบหน้า ของการทำงานบางอย่าง ที่เสร็จสมบูรณ์
ซึ่งมีสองคุณสมบัติหลักๆ คือ

  • value attribute ระบุจำนวนงานที่ได้ทำแล้ว เสร็จสมบูรณ์
  • max attribute ระบุจำนวนงานทั้งหมดที่ต้องใช้

เช่น

<progress max=”100″ value=”0″></progress>
จำนวนงานเริ่มที่ 0 ไปสิ้นสุดที่ 100

ไปดูตัวอย่างการใช้งาน ProgressBar ด้วย HTML5 กัน

สิ่งที่จำเป็น (Prerequisites)

ขั้นตอนการพัฒนาแอปพลิเคชั่น

1. สร้างโปรเจ็กต์ ASP.NET Empty Web Application (Visual C#)
2. เพิ่มไอเทม WebForm1.aspx
3. เพิ่ม jQuery

1. สร้างโปรเจ็กต์ ASP.NET Empty Web Application (Visual C#)

สร้างโปรเจ็กต์…


โครงสร้างโปรเจ็กต์…


2. เพิ่มไอเทม WebForm1.aspx

เพิ่มเว็บฟอร์มว่างๆ มา 1 อัน…


ตั้งชื่อ…แล้วกด OK



คุณจะเห็นหน้าจอนี้


3. เพิ่ม jQuery

เนื่องจากคุณสร้างโปรเจ็กต์ แบบ ASP.NET Empty…
คุณต้องเพิ่ม jQuery เอง ดังนี้
    คลิก TOOLs => คลิก Library Package Manager=>
    คลิกเมนู ManageNuGet Package for Solution….


เลือก jQuery …=> กด Install


กด OK


รอสักครู่…

คุณจะได้ Package Update ล่าสุดของ jQuery เขามาในโปรเจ็กต์


ดึงไปใช้งานบนเว็บฟอร์มที่เตรียมไว้…
จากนั้นไปเขียนโค้ด JavaScript เล็กน้อย…
เนื่องจาก jQuery ยังไม่รู้จักคอนโทรล ProgressBar ที่คุณวางบนฟอร์ม
คุณต้องช่วยบอกมัน เล็กน้อย


4. เขียนโค้ดโปรแกรม

โค้ดสมบูรณ์: WebForm1.aspx
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title></title>

<script src=”Scripts/jquery-2.0.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

var interval = 1,

updatesPerSecond = 100, //(100 milliseconds)

progress = $(‘progress’),

animator = function () {

progress.val(progress.val() + interval);

$(‘#val’).text(progress.val() + ‘%’);

if (progress.val() + interval <= progress.attr(‘max’)) {

setTimeout(animator, updatesPerSecond);

} else {

$(‘#val’).text(‘Process is complete…’);

progress.val(progress.attr(‘max’));

}

}

setTimeout(animator, updatesPerSecond);

});

</script>

</head>

<body>

<form id=”form1″ runat=”server”>

<table>

<tr>

<td>

<progress max=”100″ value=”0″></progress>

</td>

<td>

<div id=”val”></div>

</td>

</tr>

</table>

</form>

</body>

</html>

นี่เป็นเพียง
ตัวอย่างเล็กน้อย ของการแสดง ProgressBar ง่ายๆ
โดยแสดงความคืบหน้างาน Update ทุกๆ 100 มิลิวินาที
วิ่งจาก 0 ถึง 100 โดยบวกทีละ 1…

โอกาส หน้า จะนำตัวอย่างอื่นๆ มาเล่าต่อ

แหล่งข้อมูลอ้างอิง:

http://www.w3.org/TR/html5-author/the-progress-element.html

แหล่งข้อมูลดาวน์โหลด:

http://sdrv.ms/18ehMmA

{จบบริบูรณ์}

โดย:

Nuchit Atjanawat (นุชิต อรรจนวรรจน์)
Software Development Section Manager

…………………………………………………………………………………………………

…………………………………………………………………………………………………


เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Uncategorized

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: