สอน HTML5 Responsive เบื้องต้นด้วย Bootstrap3 ตอน Grid system

Share the joy
  •  
  •  
  •  
  •  
  •  

Bootstrap3 ที่ออกมาใหม่นี่เป็นเวอชั่นใหม่ที่เพิ่มความยืดหยุ่นให้กับการทำ responsive device ต่างๆมากขึ้น แต่ก็จะมีความซับซ้อนในเรื่องการใช้มากขึ้น แต่ถ้าเราทำความเข้าใจแล้วก็จะมีประโยชน์สำหรับหรับเรามากเช่นกัน ที่ต้องพูดเรื่อง Grid system ก่อนเป็นอันดับแรก เพราะมันจะเกี่ยวข้องกับ Layout Responsive ของเราที่ต้องใช้มากที่สุด ในที่นี้เราจะเรียกมันว่าคอลัมน์ ซึ่งใน Bootstrap2 ใช้คลาสชื่อ span1, span2,…, span12 แต่ใน Bootstrap3 จะ col-lg-1, col-lg-2, col-lg-3 หรือ col-md1, col-md2, col-md3 หรือ col-sm1, col-sm2, col-sm3…  ฮ่าๆ ไม่ทันไรเริ่มเห็นความซับซ้อนแล้วใช่ไหมครับ เรามาทำความเข้าใจกันทีละอย่างดีกว่า เริ่มจาก Bootstrap3 จะกำหนดจุดแปลงร่าง (Break point) ออกเป็น 4 ขนาดความกว้าง โดยที่แต่ละขนาดถือว่ามีคอลัมน์อยู่ภายใน 12 คอลัมน์ Extra small devices Phones (<768px) ใช้ prefix .col-xs- Small devicesTablets (≥768px) ใช้ prefix .col-sm- Medium devicesDesktops…

Details

Emmet html plugin เขียนโครงสร้าง HTML CSS อย่างรวดเร็ว

Share the joy
  •  
  •  
  •  
  •  
  •  

ใช้ tool นี้แล้วทำให้การทำงาน Front end  รวดเร็วขึ้นเยอะเลย Expand Abbreviation เขียนโครงสร้าง HTML อย่างรวดเร็ว ตัวอย่าง เช่น ใน HTML เราต้องการ div คลาส row-fluid และมี div ลูกอีก 2 ตัวคลาส span6 และแต่ละdiv มี h2 และ p เราจะเขียนคำสั่งดังนี้ div.row-fluid>div.span6*2>h2+p เสร็จแล้วไปที่ทำสั่ง command > emmett > Expand Abbreviation (หรือตั้ง keyboard shotcut)  มันจะรันแล้วได้โครงสร้างตามที่เราต้องการ <div class=”row-fluid”> <div class=”span6″> <h2></h2> <p></p> </div> <div class=”span6″> <h2></h2> <p></p> </div> </div>…

Details

getting along? ซีักันยัง

getting along? แปลว่า  ซีักันยัง

ประโยคมักจะถามว่า How are you getting along?

ซึ่งเป็นสถานการที่อาจจะมีคนสองคนเพิ่งเจอกัน ทำความรู้จักกัน เราเลยถามไปว่า เป็นไงรู้จักกันหรือยัง

jQuery Radio button fancy design

Share the joy
  •  
  •  
  •  
  •  
  •  

แท็ก HTML radio มันเขียน CSS ให้สวยงามไม่ได้ ก็จัดการ Hack มันด้วย jQuery ซะเลย คราวนี้อยากได้หน้าตาจิ้มลิ้มขนาดไหนตามสบาย  ตัวอย่าง  HTML โครงสร้าง HTML แอบซ่อนอินพุท hidden ไว้ เพื่อนำค่ามาใส่ให้โปรแกรมเมอร์เอาไปต้มยำทำแกงต่อไป <div class=”group1″> <a href=”javascript:void(0)” value=”ชาย” class=”select”>ชาย</a> <a href=”javascript:void(0)” value=”หญิง”>หญิง</a> <a href=”javascript:void(0)” value=”เก้ง”>เก้ง</a> <a href=”javascript:void(0)” value=”กวาง”>กวาง</a> <input type=”hidden”> </div> CSS แต่งหน้าทาปากตากสะดวก .group1 > a{display: inline-block; background: url(radio-btn.png) no-repeat; height: 20px; padding-left: 23px; color: orange; margin-right: 10px;}…

Details

jQuery Mega menu เมนูแบบรวมลิงค์แบบ amazon

เมนูนี้เลียนแบบมาจาก amazon.com ปี 2013 เมนูรวมลิงค์ เหมาะกับเว็บที่มีหมวดหมู่เยอะๆ สามารถใส่รูปที่เกียวข้องกับหมวดหมู่นั้นได้ด้วย

ตัวอย่าง

 

jQuery Ajax load data แทปโหลดข้อมูลแบบแยกไฟล์

Share the joy
  •  
  •  
  •  
  •  
  •  

ถ้าข้อมูลในแต่ละแทปของเว็บมีเยอะก็สมควรจะแยกไฟล์ เมื่อคลิกแทปนั้นจึงทำการโหลดข้อมูลของแทปนั้นมาแสดง ตัวอย่าง ฟังก์ชั่น plugin ที่จะทำ สามารถเพิ่มจำนวนแทปได้ตามต้องการ ตั้งชื่อแทปได้ ไฟล์ที่ทำการโหลดเข้ามาจะเป็นไฟล์นามสกุลอะไรก็ได้ (html, php, asp,…) กำหนดค่าเริ่มต้อนได้ว่าต้องการให้ เริ่มต้นที่แทปใด HTML โครงสร้างมีแทปที่เป็นแท็ก a และส่วนของ div data-tab ไว้แสดงข้อมูล <ul class=”tab-nav”> <li><a href=”javascript:void(0)”>About us</a></li> <li><a href=”javascript:void(0)”>Service</a></li> <li><a href=”javascript:void(0)”>Contact</a></li> </ul> <div id=”data-tab”> <!– Data –> </div>  CSS ก็ตกแต่งตามเรื่องตามราวไม่มีอะไรเป็นพิเศษ .wrap{ width: 400px; margin: 50px auto 0 auto;} .tab-nav{ margin: 0; padding: 0; list-style-type: none; border-bottom:…

Details

jQuery hide list menu (พับเก็บเมนู ซ่อน และแสดงข้อมูลลิสท์)

Share the joy
  •  
  •  
  •  
  •  
  •  

ลิสท์ที่ยาวมากๆ ก็จะทำให้ต้องสกอลบาร์เพื่อจะได้เห็นคอนเทนท์ที่อยู่ด้านล่าง ฟิลเตอร์นี้จะช่วยให้เราซ่อนลิสท์ที่ยาวมากๆได้ ตัวอย่าง ฟังก์ชั่นของ plugin ที่เราจะทำ กำหนดได้ว่าตอนซ่อนจะให้โชว์จำนวนกี่แถว กำหนด่ข้อความของปุ่มที่กดให้โชว์และซ่อนได้ ทั้งภาษาไทย อังกฤษ และอื่นๆ กำหนดความเร็วของการยืดและหดได้  โครงสร้าง HTML ก็สร้างแบบ list ปกติ <div class=”wrap”> <ul class=”list”> <li>jQuery</li> <li>PHP</li> … </ul> <a href=”javascript:void(0)” class=”toggle-list”>ขยาย…</a> </div> ส่วน CSS Stylesheet กำหนดให้คลาสที่ ul มีการ transition .list{ margin: 0; overflow: hidden;-webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s;} .list > li{ height: 22px;} การเรียกใช้…

Details