Get Adobe Flash player

Monthly Archives: 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: lightyellow

จะเห็นได้ว่า สิ่งที่ทำให้ text input ทั้งสองประเภทแสดงผลลัพธ์ต่างกัน อยู่ที่คำสั่งภาย :focus ของ input แต่ละชนิดนั่นเอง
ซึ่งการกำหนด input[type=???]:focus ก็ต้องสอดคล้องกับ type=”???”  ที่เซตบนตัว input ด้วย

การใช้งาน 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 คือ .sass และ .scss สามารถดูเพิ่มเติมได้ที่ https://sass-lang.com/guide

โดยในตัวอย่างจะใช้ Syntax แบบ SCSS (เหมือน CSS มากกว่า) ดังเช่นการตั้งค่าเป็นตัวแปร แล้วนำไปใช้

เมื่อเขียนเสร็จจะได้ไฟล์ .scss เรายังไม่สามารถนำไปใช้ได้ จะต้องทำการ Compile เป็น CSS ก่อน

วิธีการ Compile Sass เป็น CSS

สามาถทำได้ 2 วิธีคือใช้ Application และ Command line ดูเพิ่มเติมที่ https://sass-lang.com/install แต่ในตัวอย่างจะใช้ Application โดยจะแนะนำให้ใช้เป็น Koala สามารถใช้งานได้ทั้งบน Windows และ Mac และยังเป็น Opensource สามารถ Download ได้ที่ http://koala-app.com/

เมื่อติดตั้งเสร็จแล้วสามารถเปิด Koala แล้วคลิกปุ่ม + เพื่อเลือก Folder Project งานที่ต้องการ ระบบจะแสดงไฟล์ที่ Koala รองรับ (Koala เป็น Tool สำหรับ develop web app ที่ทำได้หลายอย่าง) เราสามารถเลือกไฟล์ .scss ที่ต้องการ แล้วจะมีแถบเมนูขึ้นด้านขวา สามารถคลิกปุ่ม Complie เพื่อสร้างไฟล์ CSS ได้เลย

แต่ถ้าเราเลือก Auto Compile ไว้ ถ้ามีการแก้ไขไฟล์ .scss อีกครั้ง Koala จะทำการ Complie CSS ใหม่ทันที

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