Loading Progress with NProgress

วันนี้จะมาแนะนำวิธีการทำ Loading ด้วย NProgress นะครับ หลายคนอาจจะยังไม่ภาพไม่ออกว่า NProgress นี่ทำ Loading แล้วจะมีหน้าตาออกมาเป็นแบบไหน ให้ไปลองดูที่ Youtube นะครับเมื่อเราเข้ามาแล้วจะมี Loading เล็กวิ่งอยู่ด้านบนสุด

ซึ่งเราสามารถนำ NProgress นี่เข้ามาใช้งานบนเว็บไซต์ของเราได้ไม่ยาก โดยสามารถทำได้ ดังนี้ครับ

เข้าไปที่ http://ricostacruz.com/nprogress/ เพื่อดาวน์โหลด nprogress.css และ nprogress.js มาไว้ใน Solution ในตัวอย่างนี้ผมขอใช้ผ่าน CDN ดังนี้ครับ

<link href="http://ricostacruz.com/nprogress/nprogress.css"

    rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    type="text/javascript"></script>

<script src="http://ricostacruz.com/nprogress/nprogress.js"

    type="text/javascript"></script>

เท่านี้เราก็ติดตั้ง NProgress เสร็จเรียบร้อยแล้วครับ ต่อมาจะเริ่มใช้งานกันนะครับ โดยมี 2 คำสั่งที่จำเป็นในการใช้งาน คือ NProgress.start(); เพื่อใช้สำหรับสั่งให้ Progress Bar เริ่มทำงาน และ NProgress.done(); เพื่อใช้สำหรับสั่งให้ Progress Bar สิ้นสุดการทำงาน

เริ่มทดสอบการทำงานโดยใช้ Code นี้นะครับ

<script>

    $(document).ready(function () {

        NProgress.start();

        setTimeout(function () {

            NProgress.done();

            $('.fade').removeClass('out');

        }, 1000);

    });

</script>

หลังจากลอง Run แล้วจะมี Loading แสดงขึ้นมา เท่านี้ก็เสร็จแล้วครับกับการใช้ NProgress สำหรับทำ Loading

Split String ด้วย LINQ

วันนี้ขอนำเสนอทิปเล็กๆ เกี่ยวกับการแยกคำ หรือ Split ข้อมูล String ออกมาเป็น List โดยใช้ความสามารถของ LINQ นะครับ ซึ่งสามารทำได้หลายวิธีมาก วันนี้ขอยกตัวอย่างการ Split คำ โดยใช้ตัวอย่างนี้นะครับ

สมมติว่าผมมีข้อมูล String ในรูปแบบนี้ "00001_CompanyA_5000,00002_CompanyB_2000,00003_CompanyC_7000" โดยใน string นี้จะประกอบด้วย CompanyID , CompanyName , Price ซึ่งมี '_' เป็นตัวคั่น และข้อมูลแต่ละชุดมี ',' เป็นตัวคั่น โดยทั่วไปอาจจะทำได้โดยการวน Loop แล้ว Split String เก็บที่ละฟิลด์ ก็จะได้ผลลัพธ์ที่ต้องการเหมือนกัน แต่ถ้าใช้ LINQ เราสามารถทำได้โดยใช้ Code ดังนี้

string companydata = "00001_CompanyA_5000,00002_CompanyB_2000,00003_CompanyC_7000";
            var companylist = companydata.Split(',')
                                        .Select(s => s.Split('_'))
                                        .Select(a => new
                                        {
                                            CompanyID = a[0].ToString()
                                            , CompanyName = a[1].ToString()
                                            , Price = a[2].ToString()
                                        });

ที่นึี้ลองมาทดสอบผลการทำงา่นกันนะครับว่าสามารถทำงานได้จริงหรืิเปล่า

จะสังเกตว่าเมื่อใช้ฟังก์ชั่น Split ของ LINQ เราสามารถทำการแยก String ได้โดยใชัคำสั่งเพี้ยงแค่บรรทัดเดียว

การแสดงผล CSS3 บน Internet Explorer ด้วย PIE

ในปัจจุบันมีเทคโนโลยีมากมายที่ช่วยให้เราสามารถออกแบบเวบไซต์ได้สะดวกและรวดเร็วมากขึ้น CSS (cascade style sheet) ก็เป็นอีกทางเลือกหนึ่งที่ช่วยเพิ่มความสวยงามให้กับเวบไซต์ รวมถึงสามารถแก้ไขหรือปรับปรุงหน้าเพจได้ง่าย เพราะรูปแบบการแสดงผลมาจากคำสั่ง Style Sheet ชุดเดียวกัน

ปัจจุบันได้มีการพัฒนา CSS3 เพื่อให้มีความสามารถเพิ่มขึ้นจาก CSS2 โดยเพิ่มฟีเจอร์ต่างๆขึ้น เช่น Border-Radius ,  Multiple Backgrounds เป็นต้น (สามารถดูเพิ่มเติมได้ที่ http://www.css3.info/preview ) อย่างไรก็ดี CSS3  ก็มีข้อเสียตรงที่ ไม่สามารถรองรับได้ทุกเว็บบราวเซอร์ โดยเฉพาะ Internet Explorer ดังนั้น  จึงได้มีการพัฒนา PIE (Progressive Internet Explorer) เพื่อเป็น Extensions ที่ช่วยให้ Internet Explorer ตั้งแต่รุ่น 6.x - 8.x สามารถแสดงผลหน้าเว็บที่ใช้ CSS3 ได้

ขั้นตอนการใช้ PIE 

1. ดาวน์โหลดไฟล์ PIE.htc (สามารถดาวน์โหลดได้จาก http://css3pie.com )

2. นำไฟล์ PIE.htc มาใส่ไว้ใน Solution ของเว็บไซต์ โดยเก็บไว้ใน Directory เดียวกันกับ StyleSheet ดังนี้

3. ใน StyleSheet ที่มีการใช้ Properties ของ CSS3 ให้เขียน Properties behavior ลงไป ตัวอย่าง  behavior: url(PIE.htc); โดยระบุ Path ที่เข้าถึง PIE.htc ให้ถูกต้อง ดังนี้

4. ในตัวอย่างนี้จะเกิดช่องสี่เหลี่ยมที่มีขอบโค้งมลและมีเงา ซึ่งเป็นคุณสมบัติของ CSS3 ซึ่งไม่สามารถแสดงบน IE8 ได้  แต่เมื่อเรากำหนด Properties behavior ของ PIE ลงไปก็สามารถแสดงผลได้ปกติ โดยไม่ต้องแก้ไข CSS