Post archive
Tag: class
-
jtip The jQuery tooltip
Live Demo | Download code ทูลทิป ไว้ใช้สำหรับแสดงคำอธิบายของอะไรสักอย่างที่อยู่บนหน้าเพจ แบบว่า พอเราเอาเมาส์ไปชี้ปุ๊บ มันก็จะแสดงคำอธิบายออกมาปั๊บ ไรเงี้ย ผมเองจะใช้มันประจำ เพราะบางครั้งหน้าเพจมันมีเนื้อที่จำกัด เลยต้องหาเทคนิคมาซ่อนรายละเอียดบางอย่างไว้ หรือบางทีผมก็ใช้สำหรับแสดงคำอธิบายวิธีป้อนข้อมูลในเท็กบ้อก ว่าคุณจะต้องใส่ข้อมูลรูปแบบไหน ตัวเลขอย่างเดียว หรือตัวหนังสือภาษาอังกฤษเท่านั้น เป็นต้น ทูลทิปตัวที่ผมจะนำเสนอวันนี้ เป็นปลั๊กอินของ jQuery ซึ่งใช้งานง่ายมากๆ แค่ใช้คำสั่งไม่กี่บรรทัด เราก็จะได้ทูลทิป อันงดงามมาใช้ในเว็บของเรา เริ่มกันเลยดีกว่าครับ
READ MORE -
.note .success .warning css class
Live Demo วันนี้เอาคลาส css ที่ผมใช้อยู่ประจำมาแจกครับ ไว้สำหรับแสดงข้อความให้โดดเด่น เห็นชัด ลองเอาไปประยุกต์ใช้ดูครับ ผลลัพธ์ของคลาสตัวนี้ ก็ตามภาพครับ โค้ด <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .note, .success, .warning { padding:.8em; margin-bottom:1em; border:2px solid #ddd; } .note { background:#FFF6BF; color:#514721; border-color:#FFD324; } .success { background:#E6EFC2; color:#264409; border-color:#C6D880; } .warning { background:#FBE3E4; color:#8a1f11; border-color:#FBC2C4; } </style> </head> <body> <p […]
READ MORE -
jquery validator ตรวจสอบฟอร์มฉบับเทพมาเอง
ปลั๊กอินที่ใช้สำหรับตรวจสอบข้อมูล ของ jquery นั้นมีมากมายเสียเหลือเกิน คุณตี๋ เจ้าคุณปู่แห่ง jquerytips.com ได้เคยเขียนบทความ jQuery Validation ครบทุกเม็ดในการ validate นั่นก็เป็นตัวตรวจสอบความถูกต้องของข้อมูลในฟอร์ม ตัวหนึ่งที่เด็ดดวงเอามากๆ วันนี้ผมไปเจอตัว validate อีกตัวหนึ่งที่เจ้าของเขาทำเสร็จแล้ว แต่ว่ายังไม่ได้เขียนอธิบายการใช้งาน ทำไว้แต่ตัวอย่างการใช้งาน ผมเห็นว่ามันน่าสนใจดี ก็เลยเอามาเขียนอธิบายเสียเลย
READ MORE -
jQuery – fancy zoom plugin
ปลั๊กอินตัวนี้ชื่อก็บอกชัดเจนอยู่แล้วว่าใช้สำหรับ ซูม ซึ่งสามารถใช้งานได้ทั้ง รูปภาพ ข้อความ และไฟล์แฟลช หลักการทำงานก็คือ ซ่อนส่วนที่เป็นรายละเอียดไว้ก่อน จนกว่าผู้ใช้คลิกตรงลิ้งก์ที่เตรียมไว้ มันก็จะแสดงเนื้อหาที่ซ่อนไว้ ด้วยเอนิเมชั่นซูม อย่างมีชั้นเชิง การซูมรูปภาพ ก็คือซ่อนภาพใหญ่ไว้ก่อน แสดงภาพเล็กให้คลิก พอคลิกภาพเล็ก ภาพใหญ่ก็ค่อยๆ วาบ ซูม เข้ามา หรือการซูมเท็ก ก็เป็นในลักษณะเดียวกัน เตรียมคำสั้นๆไว้ให้คลิก ซ่อนรายละเอียดไว้ก่อน (กรณีนี้เหมาะมาก กับหน้าเพจที่มีเนื้อที่จำกัด หรือ หน้าเพจที่อยากให้ดูใช้ง่าย ) อย่างเช่น ฟอร์มลงทะเบียนเป็นต้น เราเตรียม ? ไว้ให้ผู้ใช้คลิก หลังช่องป้อนข้อมูล พอเขาคลิก เราก็แสดงตัวอย่าง การป้อนข้อมูลที่ถูกต้องขึ้นมา (เช่น เบอร์โทรศัพท์ ต้องอยู่ในรูปแบบ 000-0000-000)
READ MORE -
jQuery Lightbox plugin
Demo : http://leandrovieira.com/projects/jquery/lightbox/ Resource Download : http://leandrovieira.com/download/7/
READ MORE -
การใช้งาน SyntaxHighlighter
วันก่อนไปเจอในบล็อกของใครแล้วก็ไม่รู้ เขาแสดงโค้ด php บนหน้าเว็บด้วยความสวยงาม หันมาดูของเรา ทำม้ายทำไม มันถึงไม่มีสีสันอย่างเขาบ้าง ด้วยความที่เห็นคนอื่นมี ตัวเองก็อยากมีบ้าง เลยใช้บริการเฮียกู ค้นหา และแล้วพรหมลิขิต บันดาล ชักพา ให้ไปเจอกับโค้ดตัวหนึ่งที่เขาเขียนไว้แจกฟรี นามกรว่า SyntaxHighlighter1.1.5 http://code.google.com/p/syntaxhighlighter/
READ MORE -
-
เมื่อท่านไม่ต้องการให้เกิด autocomplete ใน textbox
ดูรูปก่อนละกัน ว่า autocomplete ที่ผมหมายถึงนี่คืออะไร เมื่อคุณ พิมพ์ตัวอักษรลงไปในช่องป้อนข้อมูล เบราเซอร์ก็จะแสดง คำที่เคยพิมพ์ เพื่อให้สะดวก จะได้ไม่ต้องพิมพ์มาก แต่ในบางครั้งเราก็มีความจำเป็น ที่ไม่อยากให้เบราเซอร์มันแสดง autocomplete ขึ้นมา อย่างครั้งหนึ่ง ผมเขียน autocomplete ajax พอใช้งานจริง ajax ก็แสดง autocomplete เบราเซอร์ก็แสดง แย่งกันแสดง ทับกันมั่วเลย แล้วก็มาถึงเรื่องที่จะบอก วิธีการปิดไม่ให้เบราเซอร์แสดง autocomplete <input name="administrator_username" type="text" class="username" id="administrator_username" value="" size="20" maxlength="10" autocomplete="off" /> ใส่ autocomplete="off" เข้าไปใน textbox นะครับ แล้วเบราเซอร์มันจะไม่แสดง autocomplete
READ MORE -
การใช้งาน syntaxhighlighter 1.1.5
วันก่อนไปเจอในบล็อกของใครแล้วก็ไม่รู้ เขาแสดงโค้ด php บนหน้าเว็บด้วยความสวยงาม หันมาดูของเรา ทำม้ายทำไม มันถึงไม่มีสีสันอย่างเขาบ้าง ด้วยความที่เห็นคนอื่นมี ตัวเองก็อยากมีบ้าง เลยใช้บริการเฮียกู ค้นหา และแล้วพรหมลิขิต บันดาล ชักพา ให้ไปเจอกับโค้ดตัวหนึ่งที่เขาเขียนไว้แจกฟรี นามกรว่า SyntaxHighlighter1.1.5 ตัวอย่าง SELECT * FROM tbl_members WHERE member_id = 1 เว็บเขา http://code.google.com/p/syntaxhighlighter/ หลังจากที่งมหอยโข่งอยู่ 2 วัน ก็เป็นผลสำเร็จ วันแรกก้อปคำแนะนำที่เว็บเขามาลอง มันดันไม่ได้อ่ะ ว่าจะเลิกใช้แล้ว หันไปหาตัวอื่น แต่ด้วยความที่ว่า ถ้ามันใช้ไม่ได้จริง มันก็ต้องมีคนด่าบ้างแหละ แต่ก็ไม่ปรากฏว่าใครด่า คนบ่น แสดงว่ามันต้องใช้ได้ แล้วทำไมเราใช้ไม่ได้ อ่า… เป็นคำตอบที่ต้องค้นหา สิ่งที่ผมผิดมีอยู่สองอย่าง 1 include ตัวคริปต์มาไม่ถูก ก็ดันเขาแนะนำไว้อย่างไร เล่นมันตรงๆอย่างนั้นเลย 2 วางสคริปผิดตำแหน่ง ก็ในเว็บเขาไม่เห็นบอกอะไร เอาล่ะ […]
READ MORE
