-
คำสั่ง css ของ jQuery
ผมได้เขียนบทความเรื่อง jQuery กับการจัดการ CSS ไปแล้วครั้งหนึ่ง ในบทความนั้นจะกล่าวถึงเรื่อง การเพิ่ม css คลาสให้กับออบเจ็กในเพจ และการเอา css คลาสออก นั่นหมายถึงว่า การจะใช้งานคำสั่งนั้น เราจะต้องเขียนคลาสของ css เตรียมไว้ก่อน แล้วถ้าเราไม่ได้เขียน css ไว้ก่อนล่ะ?่ jquery ยังมีคำสั่งที่ใช้สำหรับจัดการกับ css อีกชุดหนึ่ง คือ css( name,value ) name : (string) ชื่อ css value : (string|number|function) ค่าที่เราต้องการกำหนด ชนิดจะขึ้นอยู่กับ css ตัวนั้นๆ เช่นถ้า width เราก็ใช้ตัวเลข คำสั่งนี้ใช้สำหรับกำหนดค่า element ผ่านทาง css ผมขอยก html มาให้ท่านดูประกอบนิดนึง <p style="padding-left:10px;width:200px"> Paragraph </p><p style="padding-left:10px;width:200px"> […]
READ MORE -
วิธีทำ flash drive ให้บู๊ตได้
เรื่องของเรื่องก็คือวันนี้ผมจะนำไฟล์วินโดว ที่เคยโกสไว้ กลับมาใช้งาน แล้วเครื่องของผมถอดซีดีรอมทิ้งไปเสียแล้ว ก็เลยต้องใช้ flash drive มาช่วย เคยทำมาหลายครั้งแล้วล่ะ แต่นานเข้ามันก็ลืม ไปหาอ่านบทความจากเว็บเพื่อนบ้าน บางเว็บก็ต้องล้อกอินก่อนจะอ่านได้ บ้าง บางเว็บอ่านได้แต่ไม่มีไฟล์ให้ดาวน์โหลดบ้าง ปวดใจ เขียนเองมันซะเลย ก่อนอื่นให้ดาวน์โหลด 2 ไฟล์นี้ไปก่อน HP Windows Format Utility for USB drive key ไฟล์บู๊ต winME หลังจากนั้นให้ท่านแตกซิปไฟล์ WinMenoram_bootdisk.rar ออก แล้วก็เสียบ flash drive คา USB ไว้เลย แล้วมาเริ่มกัน ติดตั้งโปรแกรม HP Windows Format Utility ดับเบิลคลิกที่ไฟล์ HPFLASH1.EXE ที่ดาวน์โหลดไป คลิก Run
READ MORE -
jQuery กับการจัดการ CSS
การทำเว็บเดี๋ยวนี้เราไม่ค่อยใช้ตารางในการจัดวางโครงสร้างกันแล้ว เรานิยมใช้ CSS มาช่วยจัดการการแสดงผล เรียกได้ว่า CSS เข้ามามีบทบาทมากกว่าเมื่อก่อน jQuery นั้นมีคำสั่งจัดการ CSS อยู่ 3 คำสั่ง คือ addClass(names) removeClass(names) toggleClass(name) ผมจะอธิบายไล่ไปทีละคำสั่งเลยนะครับ addClass(names) ใช้สำหรับเพิ่มชื่อคลาสเข้าไปใน element ใดๆ โดยจะไม่ไปทับคลาสเดิม html นั้นในอีลิเม้นท์ตัวหนึ่งๆ สามารถมีคลาสได้หลายคลาสอยู่แล้ว names :(string) ชื่อคลาสที่เราต้องการเพิ่ม ในกรณีต้องการเพิ่มทีเดียวหลายคลาส ให้คั่นคลาสแต่ละตัวด้วยช่องว่าง
READ MORE -
คำสั่ง removeAttr ของ jQuery
Live Demo ในกรณีที่เราต้องการ remove attribute ออกจาก element ภายในเพจ jQuery ได้เตรียมคำสั่งไว้คำสั่งหนึ่งคือ removeAttr อย่างถ้าสมมติว่า ในฟอร์มของเรามีช่องเท็กบ้อกช่องหนึ่ง ซึ่งเราเซตไว้ว่าให้อ่านได้อย่างเดียว <input type="text" name="username" id="username" readonly="readonly" /><input type="text" name="username" id="username" readonly="readonly" /> แล้วเราต้องการให้ยูสเซ่อร์สามารถป้อนข้อมูลเข้าไปในช่องเท็กบ้อกนี้ได้ เราก็ใช้คำสั่ง $(‘#username’).removeAttr( ‘readonly’ );$(‘#username’).removeAttr( ‘readonly’ );
READ MORE -
คำสั่ง attr ของ jQuery
Live Demo คำสั่ง attr ของ jQuery นั้นไว้สำหรับดึงค่าจาก attribute ของ element ในเพจ หรือใช้สำหรับกำหนดค่าให้กับ attribute ก็ได้ครับ การดึงค่า ไวยากรณ์ จะเป็นดังนี้ : attr(attrname)attr(attrname) attrname : คือ ชื่อ attribute ดูตัวอย่างครับ จะเข้าใจชัดเจนขึ้น $(‘#get’).click(function(){ alert( $(‘img’).attr( ‘src’ ) ); //= http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg alert( $(‘img’).attr( ‘alt’ ) ); //= select2web alert( $(‘img’).attr( ‘width’ ) ); //= 400 }); <img src="http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg" alt="select2web" […]
READ MORE -
การสร้างเนื้อหาแบบ on the fly ด้วย jQuery
Live Demo มันเป็นอะไรที่ง่ายเอามากๆครับ ดูโค้ดเลยละกัน แล้วผมจะอธิบายทีหลัง <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Insert element on the fly</title> <script type="text/javascript"> $(document).ready(function(){ var inner = $(‘<h1>This is H1</h1>’); $(‘#content’).html( inner ); }) </script> </head> <body> <div id="content"> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD […]
READ MORE -
serialize php function
ฟังก์ชั่น serialize() เป็นฟังก์ชั่นที่ใช้สำหรับแพ็ก อะเรย์หรืออ้อบเจ็ก ให้อยู่ในรูปของสตริง โดยเมื่อเราใช้ฟังก์ชั่น unserialize() มันออกมา ข้อมูลจะกลับมาอยู่ในรูปเดิมอย่างไม่เสียคุณสมบัิิติ ถ้าเรา serialize() อะเรย์ เมื่อ unserialize() ก็จะได้อะเรย์คืนมา วิธีการใช้งาน: $animals = array(’dog’,’cat’,’cow’); $string = serialize( $animals ); // จะได้สตริง $animals = unserialize( $string ); // จะได้อะเรย์เหมือนบรรทัดแรก$animals = array(‘dog’,’cat’,’cow’); $string = serialize( $animals ); // จะได้สตริง $animals = unserialize( $string ); // จะได้อะเรย์เหมือนบรรทัดแรก ทีนี้เราจะนำมันไปใช้ประโยชน์อะไรได้บ้างล่ะ ฟังก์ชั่นนี้ ผมขอยกตัวอย่างนะครับ สมมุติว่าเรามีตัวเลือกซึ่งดึงมาจากฐานข้อมูลสร้างเป็นเช็กบ้อก ให้ยูสเซอร์ติ๊กเลือก ซึ่งยูสเซอร์อาจจะเลือกเพียงหนึ่งตัวหรือมากกว่า […]
READ MORE -
-
selector ของ jQuery
selector คืออะไร คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ ดูตัวอย่าง javascript กันก่อนนะครับ document.getElementById(’username’); document.getElementByTagName(’p’);document.getElementById(‘username’); document.getElementByTagName(‘p’); คำสั่งแรกจะอ้างอิงไปถึง อะไรก็ตามที่อยู่บนหน้าเพจที่มี id เท่ากับ username คำสั่งที่สอง อ้างอิงไปถึงแท็ก p ทุกตัวที่อยู่บนหน้าเพจ ทีนี้เรามาดู selector ในรูปแบบ css #username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;}#username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;} #username จะอ้างไปถึงออบเจ็กที่มี id เท่ากับ username .classname จะอ้างไปถึงอ้อบเจ็กทุกตัวที่เรากำหนด class เท่ากับ classname p a จะอ้างไปถึง แท็ก a ที่อยู่ภายใต้แท็ก p ทุกตัวในเพจ จากที่กล่าวมาท่านพอจะเข้าใจบ้างนะครับว่า selector คืออะไร ้ ทีนี้เรามาว่ากันถึง selector ของ […]
READ MORE -
วิธีการตรวจสอบ checkbox ด้วย jQuery
เช็กบ้อกมี attribute ตัวหนึ่งที่จะเป็นตัวบอกว่า ตัวมันเองถูกติ๊กเลือกหรือเปล่า คือ checked ถ้าหากว่าผู้ใช้ติ๊กเครื่องหมายถูก checked จะมีค่าเท่ากับ true ถ้าไม่ถูกเช็กจะมีค่าเท่ากับ false jQuery นั้นมีคำสั่งดึงค่าค่าจาก attribute ของคอนโทรลตัวไหนๆ ก็ตามง่ายๆ ดูตัวอย่าง Live Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>jquery checkbox checked</title> <script type="text/javascript"> $(document).ready(function(){ $(‘#button’).click(function(){ alert( $(‘#checkbox’) .attr( ‘checked’ ) ); }); […]
READ MORE
Beeanca
Modern Blogging Template
