Month: March 2018

CSS : การเน้น text input เวลาทำการกรอกข้อมูล

ปกติเมื่อมีการใช้งาน text input หากไม่มีการตกแต่งใดๆ ในขณะที่ทำการที่กรอกข้อมูลลงไป textbox input ก็จะมีรูปลักษณ์ไม่ต่างไปจากตอนที่ไม่ได้กรอกข้อมูล แต่ถ้าหากต้องการเพิ่มลูกเล่นให้ text input มีการเน้นจุดที่ทำการกรอกข้อมูล ก็สามารถทำได้โดยกำหนดค่า input ภายใต้ <style>…</style> แล้วใช้โค้ดนี้ input[type=ประเภทtextbox]:focus { ลักษณะ text input ที่ต้องการ เช่น สี สีขอบ ความหนาของขอบ ฯลฯ; }   ตัวอย่างการใช้งาน (สมมติกำหนดให้ input 2 ประเภทแสดงผลต่างกัน)

  จะได้ผลลัพธ์ดังนี้ – เมื่อทำการกรอกส่วนที่เป็นประเภท text ส่วนที่ทำการกรอกข้อมูลจะขึ้นขอบสีดำหนารอบตัว text input ตามที่ตั้งค่าไว้ว่า border: 3px solid #555 – เมื่อทำการกรอกส่วนที่เป็นประเภท password ส่วนที่ทำการกรอกข้อมูลจะมีพื้นหลังสีเหลืองอ่อนภายใน text input ตามที่ตั้งค่าไว้ว่า background-color: […]

การใช้งาน Popover Bootstrap

Popover คือเครื่องมือที่มีลักษณะเหมือนกล่องข้อความที่เป็นแบบ pop up เด้งขึ้นมา การใช้งาน popover เบื้องต้น โดยใส่ BootstrapCDN ไว้ในหน้า html ในส่วนของ <head>

เราสามารถกำหนดทิศทางการแสดงข้อความของ popover ได้ 4 ทาง คือ ซ้าย ขวา บนและล่าง   ในส่วนของการกำหนดทิศทางเราสามารถแก้ไขในส่วน data-placement = top / left / right / bottom ข้อความที่ต้องการใส่อยู่ในส่วนของ data-content   popover นั้นต้องใช้ Javascript ในการทำงาน   จากนั้นก็สามารถใช้ popover ได้        

การใช้ Sass ฉบับย่อเพื่อช่วยเขียน CSS ให้มีประสิทธิภาพมากขึ้น

Sass คืออะไร ? Sass คือ CSS Preprocessor หรือพูดง่าย ๆ ว่าเราจะเขียน Sass ตามที่ต้องการโดยอาศัยเทคนิคทางด้านการเขียนโปรแกรมโปรแกรมมาช่วยให้เขียนง่ายขึ้น หลังจากนั้นหากต้องการนำไปใช้ จำต้องทำการ Compile เป็น CSS ก่อนจึงจะนำไปใช้ได้ ประโยชน์ของการใช้ Sass นั้นมีมากพอและคุ้มค่าในระยะยาวหากจะต้องทำการเขียน CSS กับงานที่ซับซ้อน มีการแก้ไขบ่อย ๆ ไม่ว่าจะเป็นการกำหนดค่าเป็นตัวแปร แล้วนำไปวางแทนค่าดิบ ๆ  หรือการ Include Code ที่ต้องการใช้ซ้ำ ๆ ซึ่งถ้าเป็น CSS เราจะต้องเขียนใหม่เองทุกบรรทัด หากต้องแก้ ก็ต้องมาไล่แก้ทุกบรรทัด วิธีการเขียน Sass การเขียน Sass จะมี Syntax คล้ายคลึงกับ CSS คือถ้าเราเขียน CSS ได้ก็เข้าใจ Sass ได้ไม่ยาก การเขียนจะแบ่งออกเป็น 2 Syntax คือ […]

การหาชื่อ Columns จากทุกตารางใน DATABASE SQL