ในการเขียน css selectors นั้น เรารู้ดีว่ามี selectors แบบไหนให้เราเลือกใช้ได้บ้าง และแต่ละแบบนั้นมีวิธีการใช้งานอย่างไร แต่หลายๆ คน อาจไม่รู้ว่าการเขียน selectors ในแต่ละแบบนั้น มันมีผลต่อ performance ด้วย  Web Browsers แบ่ง CSS Rules ออกเป็นกลุ่มๆ เรามาทำความเข้าใจถึงหลักการทำงานของ web browsers กันก่อน ไม่ว่าเราจะเขียน css rules อย่างไร web browsers จะแบ่ง rules ของเราออกเป็น 4 กลุ่ม ด้วยกัน ดังนี้ IDใช้เวลาในการหาน้อยที่สุด Classใช้เวลาในการหามากกว่า ID เล็กน้อย Tagใช้เวลาในการหามากกว่า Class Universalใช้เวลาในการหามาก ซึ่งการจะดูว่า rule นี้ถูกจัดให้อยู่ในกลุ่มไหนนั้นจะดูจาก “key selector” หรือ selector ที่อยู่ขวาสุดนั่นเอง  กลุ่ม ID rule ที่ถูกจัดให้อยู่ในกลุ่มนี้จะต้องมี id selector เป็น key selector #latest-news { } ul#latest-news { } #latest-news[title=”Latest News”] { } section > div > ul#latest-news:first-child { } จากโค้ดด้านบน จะได้ว่า rules ทั้ง 4 แบบ ถูกจัดให้อยู่ในกลุ่ม id ทั้งหมด  กลุ่ม Class rule ที่ถูกจัดให้อยู่ในกลุ่มนี้จะต้องมี class selector เป็น key selector .list-item { } #latest-news .list-item { } div ul li.list-item { } ul > .list-item:hover { } จากโค้ดด้านบน จะได้ว่า rules ทั้ง 4 แบบ ถูกจัดให้อยู่ในกลุ่ม class ทั้งหมด  กลุ่ม Tag ถ้า key selector ของ rule นั้นไม่ใช่ทั้ง id selector และ class selector ให้ดูว่ามีการระบุ tag เอาไว้หรือไม่ ถ้ามี จะถูกจัดให้อยู่ในกลุ่ม tag a { } li > a { } #latest-news div[class*=”post”] { } ul#latest-news li.list-item a:hover { } จากโค้ดด้านบน จะได้ว่า rules ทั้ง 4 แบบ ถูกจัดให้อยู่ในกลุ่ม tag ทั้งหมด  กลุ่ม Universal หาก rule นั้นไม่ตรงกับ 3 กลุ่มข้างต้นเลย จะถูกจัดให้อยู่ในกลุ่ม universal * { } [id*=”post”] { } .home [class*=”entry”] { } form > [type=”text”] { } จากโค้ดด้านบน จะได้ว่า rules ทั้ง 4 แบบ ถูกจัดให้อยู่ในกลุ่ม universal

เพื่อนๆนักพัฒนาหลายคนก็คงจะรู้จัก enum กันพอสมควรแล้วนะคะ วันนี้เรามาทำความรู้จักเจ้า Enum กันให้มากขึ้นกว่าเดิมกันดีกว่านะคะ ว่านอกจากเราจะดึงค่า Integer ที่เก็บค่าในตัวแปร หรือ Tostring() เป็นค่าstring ตามชื่อของตัวแปร Enum แล้ว เรายังสามารถ ดึงค่า  String  เป็นประโยคยาวๆได้โดยที่ไม่จำเป็นต้องเหมือนกับชื่อตัวแปรแล้วนะคะ เอาล่ะค่ะ เรามาเริ่มจากการทำความรู้จักเจ้าตัว Enum กันตั้งแต่เริ่มต้นเพื่อระลึกความจำกันก่อนละกันนะคะ ^^ Enumeration จะมีชนิดเป็น integer type ซึ่ง เราสามารถกำหนดกลุ่มของข้อมูลได้ (User-defined) ในการสร้าง enumeration เราจะใช้ keyword คำว่า  enum  ดังนี้ public enum Colors {   White,   Black,   Red,   Green,   Blue } ในตัวอย่างนี้สร้าง enum ที่ชื่อว่า Colors โดยมีสมาชิกอยู่ 5 สมาชิกคือ White,Black,Red,Green,Blue โดยสมาชิกต่างๆของ enum ถ้าเราไม่ได้กำหนดค่าเริ่มต้นจะมีค่าเริ่มต้นจาก 0 ดังนี้ white = 0 Black =1 Red =2 Green=3 Blue=4 ในการเรียกใช้งาน enum Colors  c = Colors.Green; //สร้างตัวแปร c ขึ้นมาเพื่อเรียกใช้สมาชิกที่ชื่อ Green ตัวอย่าง enum   using System; public enum Colors {     White,     Black,     Red,     Green,     Blue } public class TestEnum {     public static void Main()     {         Colors c = Colors.Blue;         Console.WriteLine(c);         Console.ReadLine();     } } ผลลัพธ์จะแสดง Blue จากตัวอย่างนี้ถ้าต้องการให้แสดงเป็น integer type   เราก็เขียนได้ดังนี้ Console.WriteLine((int)c); ผลลัพธ์จะได้ 4 เราสามารถกำหนดค่าให้กับสมาชิกของ  enum ได้ดังนี้   public enum Colors {   Red = 10,   Green =20,   Blue=30 } ตัวอย่าง   using System; public enum Colors {   Red = 10,   Green =20,   Blue=30 } public class TestEnum {     public static void Main()     {         Colors c = Colors.Green;         Console.WriteLine((int)c);         Console.ReadLine();     } } ผลลัพธ์จะได้ 20 นอกจากนี้สามารถเขียนรับค่า value

สวัสดีค่ะวันนี้เรามาว่ากันเรื่องเมนูกันดีกว่านะคะ คำว่าเมนู ผู้เขียนคิดว่าทุกคนต้องรู้จักแน่นอน เพราะในการพัฒนาแต่ละระบบนั้นส่วนใหญ่จะมีส่วนของงานหลายๆส่วน ทำให้มีการออกแบบหน้าจอการใช้งานหลายหน้าจอเพื่อรองรับการทำงานของระบบนั้น เมื่อส่งมอบระบบ แน่นอน!! ค่ะ ความต้องการของลูกค้าไม่หยุดแค่นั้นแน่นอน เมื่อความต้องการเพิ่ม การทำงานของหน้าจอก็เพิ่ม เมนูก็ต้องเพิ่มตามมาเช่นกัน ทำให้ผู้พัฒนาต้องไปแก้โค้ดในส่วนของเมนูทุกครั้งที่มีการเพิ่มเมนู การจัดหมวดหมูของเมนู หรือต้องการปรับเปลี่ยน path ที่ไปเรียกหน้าจอนั้นๆ แค่คิดก็ดูยุ่งยากต่อการจัดการแล้ว วันนี้ผู้เขียนจึงนำวิธีการออกแบบและพัฒนาในส่วนของเมนูที่ผู้เขียนได้ใช้พัฒนาใน MVC มาเป็นตัวอย่างให้ดูกันนะคะ สำหรับผู้อ่านที่ไม่ได้ใช้ MVC ก็สามารถนำไปปรับเปลี่ยนได้ค่ะ หลังจากพัฒนาแล้วระบบก็จะสามารถ เพิ่มเมนู หรือเปลี่ยน path ของเมนู หรือ จัดการกลุ่มของเมนู ได้โดยไม่ต้อง publish ระบบ ทุกครั้งที่มีการแก้ไข ทำให้ง่ายและไม่เสียเวลาในการจัดการเลยค่ะ เรามาเริ่มกันเลยค่ะ ผู้เขียนขอแบ่งการพัฒนาเป็นสองส่วนนะคะ คือ 1.การพัฒนาในฐานข้อมูล : ในส่วนของการออกแบบฐานข้อมูลผู้อ่านต้องออกแบบให้มีการเก็บ id ของ parent เพื่อระบุให้รู้ว่าเมนูตัวนี้เป็นลูกของเมนูตัวไหน ตัวอย่างการออกแบบฐานข้อมูลของเมนู คอลัมภ์ คำอธิบาย  ParentID Id ของ parent MenuID Id ของเมนู MenuName ชื่อของเมนู 2.การพัฒนาระบบ : เป็นการพัฒนาระบบผู้เขียนจะใช้วิธีการพัฒนาแบบใช้ Recursive เข้ามาจัดการในส่วนของการแสดงเมนู โดยข้อดีของ Recursive คือเราสามารถจัดการได้ทั้งส่วนที่มีเมนูย่อย และไม่มีเมนูย่อย ตัวอย่างในส่วนของ Recursive ที่ใช้ใน View เพื่อการแสดงเมนู ( MVC) @helper GetSubMenus(IEnumerable<menutable> siteMenu, Nullable<int> parentID) {     foreach (var i in Model.Where(a => a.ParentID.Equals(parentID)))     {         var submenu = Model.Where(a => a.ParentID.Equals(i.MenuID)).Count();           <li class=”@(submenu > 0 ? “dropdown-submenu” : “dropdown”)”>             <a href=”@(!string.IsNullOrEmpty(i.MenuLink) ? Url.Content(i.MenuLink) : “~/default)” style=”font-size:16px;”>@i.MenuName</a>             @if (submenu > 0)             {                 <ul class=”dropdown-menu”>                     @GetSubMenus(siteMenu, i.MenuID)                     @* Recursive  Call for Populate Sub items here*@                 </ul>             }         </li>     } }   @{     var mymenu = @Model;     var menuParentID = mymenu.First().ParentID; }  @if (mymenu != null && mymenu.Count() > 0) {     <nav class=”navbar navbar-default”>         <div class=”container-fluid”>             <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>                 <ul class=” nav navbar-nav”>                     @GetSubMenus(mymenu, menuParentID)                 </ul>             </div>         </div>     </nav> } ตัวอย่างหน้าจอของเมนูที่เรียกใช้ Recursive เพื่อจัดการเมนู

ในปัจจุบันในการพัฒนา website  เราจะเห็นว่า Table เกือบจะเป็นส่วนหนึ่งในการพัฒนาของแต่ละหน้า  ซึ่งส่วนใหญ่จะเป็นการแสดงผลของการค้นหาข้อมูลต่างๆของเมนูหรือหัวข้อในแต่ล่ะเรื่อง บ้างก็อาจจะมีข้อมูลน้อย บ้างก็อาจจะมีข้อมูลเยอะ ทำให้การแสดงผลมีความยาวล้นหน้าเพจ ถึงแม้ว่าปัจจุบันจะมีการนำ paging มาใช้แต่ในบางกรณีอาจจะมีความจำเป็นที่ต้องการตรวจสอบข้อมูลในการค้นหาทั้งหมดในหน้าเดียวกัน  แต่ปัญหาที่ตามมาในการแสดงผลทั้งหมดในหน้าเดียวกันก็คือเมื่อเรา scroll ลงมาข้างล่างสุด Header ของตัวตารางจะไม่ Fixed ไว้ และเลื่อนหายไปข้างบน ทำให้ยากลำบากในการตรวจสอบข้อมูล เนื่องจากผู้ใช้งานอาจจะลืมว่าคอลัมภ์ที่กำลังตรวจสอบอยู่นั้นคือคอลัมภ์อะไร จึงต้อง scroll ขึ้นไปดู Header อีกครั้ง ทำให้มีความล่าช้าในการตรวจสอบข้อมูล วันนี้จึงนำวิธีการ Fixed Header ของตาราง โดยใช้ css มาเสนอเพื่อเป็นแนวทางในการพัฒนากับผู้อ่าน ดังนี้ค่ะ   ตัวอย่างที่1 (CSS ในหน้า Html เดียวกัน)) tbody { display:block; height:400px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } thead { width: calc( 100% – 1em ) } ตัวอย่างที่1(การเรียกใช้ CSS ในหน้า Html เดียวกัน) <table id=”tableSearch” class=”table table-responsive table-hover” style=”border-collapse:collapse;border:1px solid #C0C0C0;table-layout:auto;width:1500px;”> <thead> <tr class=”filters” style=”background-color:#C0C0C0″> <th align=”left”>Order</th> <th align=”left”>Name</th> </tr></thead> <tbody><tr> <td colspan=”14″ style=”text-align:center;color:#808080 “>Order</td> <td colspan=”14″ style=”text-align:center;color:#808080 “>Name</td> </tr></tbody> </table> ตัวอย่างที่2 (CSS) html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal;