บทความ

การสร้าง Popup หรือ Dialog สวย ๆ ด้วย jQuery UI

รูปภาพ
jQuery เป็น library ของ Javascript ที่ช่วยให้เราใช้ Javascript ได้ง่าย และรวดเร็ว ตามสโลแกนของ jQuery ที่ ว่า Write less, do more. สำหรับการสร้าง Popup ความจริง Javascript มีฟังก์ชัน Alert() ให้ใช้ได้ทันที แต่มีข้อจำกัดที่เราไม่สามารถเปลี่ยนข้อความส่วนหัว หรือปรับแต่งใด ๆ ได้ แต่ถ้าใช้ Jquery สร้าง Popup ทำให้ได้ Popup สวย ๆ มีหลายแบบ ปรับแต่งข้อความต่าง ๆ ได้ตามต้องการ และถ้าใช้ควบคู่กับการติดต่อกับฐานข้อมูล เช่น ผ่าน Php และ mySQL ด้วยแล้ว ทำให้สามารถ สร้าง Dialog รับข้อมูล นำข้อมูลไปประมวลผลบน Server  และ รายงานผล โดยใช้ Popup โดยไม่ต้องเปลี่ยนหน้า เช่น ดาวน์โหลดไฟล์ตัวอย่าง คลิกที่นี่ จากตัวอย่าง จะเห็นว่า มีฟอร์ม และมีการส่งข้อความไปยัง PHP และส่งผลกลับจาก PHP แล้วนำมาแสดงผ่าน Popup ของ jQuery (อ่านเรื่อง การส่งข้อมูลจาก jQuery ไปยัง PHP คลิกที่นี่ ) Popup หรือ ที่เรียกว่า Dialog ของ jQuery เป็นอีก library หนึ่ง ชื่อ jQuery UI เข้าถึงได้ที่ http://www.jqueryui.com ซึ่งนอกจาก Dialog แล้ว ยังมีอื่น ๆ อีก เช่น การสร้างแถบ(Tab) การซ่อน/แสดงข้อความ(Accordion) ปฏิทิน (Date picke

การส่งข้อมูล จาก jQuery ไปยัง PHP

รูปภาพ
jQuery เป็น Javascript Library ที่ช่วยให้การใช้งาน Javascript สะดวก รวดเร็วขึ้น เช่น ตัดปัญหาเรื่อง Browser ว่าจะใช้ได้หรือไม่ และอื่น ๆ อีกมากมาย และที่สำคัญ ในตัวอย่างนี้ จะเป็นการใช้ jQuery เพื่อส่งข้อมูลไปยัง PHP เพื่อเก็บลงฐานข้อมูลต่อไป แต่ในตัวอย่างนี้ จะเป็นการส่งข้อมูลไปยัง PHP และให้ PHP ส่งกลับมาที่ JQuery  และแสดงผ่านหน้าจอ Popup ของ JQuery การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ index.html คือไฟล์หลัก ใช้เป็นแบบฟอร์มกรอกข้อมูล เพื่อส่งข้อมูลผ่าน jQuery ไปยัง PHP jquery-2.2.2.min.js คือไฟล์ jquery ที่ดาวน์โหลดมา เพื่อใช้งาน welcome.php คือไฟล์ PHP สำหรับรับข้อมูล และส่งกลับ ไฟล์ทั้งหมด อยู่ในห้องเดียวกันบน Server ก่อนอื่น ต้องไปดาวน์โหลด jQuery มาก่อน ที่ http://www.jquery.com การดาวน์โ

การกำหนดเลขหน้าที่ต่างกัน ใน MS Word 2010

รูปภาพ
ถ้าต้องการให้เอกสารมีเลขหน้าต่างกัน เช่น 2 หน้าแรก ไม่มีเลขหน้า หน้าที่ 3 เริ่มต้น หมายเลขหน้า เป็นเลข 1 จะทำอย่างไร หลักการ ต้องแบ่งไฟล์เอกสารออกเป็นส่วน ๆ โดยใช้ Section Break หรือ การแบ่งส่วน ถ้าไม่ต้องการให้มีเลขหน้าในบางส่วน ให้ตัดส่วนเชื่อมโยงของส่วนถัดไปออก และ ลบหมายเลขหน้าของส่วนก่อนหน้านั้นออก ถ้าไม่ตัดการเชื่อมโยง เมื่อลบหมายเลขหน้า จะลบหมายเลขหน้าออกทั้งเอกสาร วิธีการ กำหนดหมายเลขหน้าของเอกสารทั้งหมด โดยไปที่ แทรก > หมายเลขหน้า ไปที่่หน้าที 3 ซึ่งต้องการเริ่มต้นหมายเลขหน้า เป็นหน้าที่ 1 คลิกที่ตำแหน่งเริ่มต้นของหน้าที่ 3  ไปที่ เค้าโครงหน้ากระดาษ > แทรกตัวแบ่งส่วนและหน้า > ตัวแบ่งส่วน > หน้าถัดไป ถ้าไม่สังเกต อาจจะไม่เห็นว่าเกิดอะไรขึ้น แต่ถ้ากด Ctrl + Shift + * เพื่อแสดงเครื่องหมายย่อหน้า และสัญลักษณ์การจัดรูปแบบอื่น ๆ หรือคลิกที่ เครื่องหมาย  ∏  แล้ว ดูที่การแบ่งส่วน จะเห็นมีข้อความการแบ่งส่วนให้เห็น กลับไปที่หน้าที่ต้องการเริ่มต้นหมายเลขหน้า เป็นหน้าที่ 1 (ปัจจุบันจะแสดงหน้าที่ 3) และดับเบิ้ลคลิกที่ตัวเลขหน้าเลขหน้า เพื่อเข้าสู่หัวกระด

การจัดลำดับแบบไม่ซ้ำกัน โดยมีเงื่อนไข ใน Excel 2010 ด้วย rank.eq() และ sumproduct()

รูปภาพ
โจทย์ปัญหา ถ้าต้องการจัดลำดับ โดยกำหนดเกณฑ์ว่า ถ้าได้คะแนนรวมเท่ากัน ให้พิจารณาผลคะแนนอื่นประกอบ เช่น ในการสอบคัดเลือก ถ้าคะแนนรวมได้เท่ากัน ให้พิจารณาคะแนนในการสอบ ภาค ก. ถ้าใครได้คะแนนสอบภาค ก. มากกว่า จะได้ลำดับที่ดีกว่า สังเกตการจัดลำดับผู้สอบคัดเลือกได้ ในตารางข้างล่างนี้ จากตัวอย่าง จะเห็นว่า ผู้เข้าสอบมีคะแนนรวม ที่เท่ากัน หลายคน เช่น เลขที่ 1, 6 และ 7 ได้คะแนน 100 คะแนน เท่ากัน แต่จัดลำดับที่ต่างกัน โดยพิจารณาจากคะแนนใน ภาค ก. ประกอบ ได้แก่ เลขที่ 7 ได้คะแนนรวม 100 คะแนน และได้คะแนนภาค ก. 40 คะแนน ได้ลำดับที่ 4 เลขที่ 6 ได้คะแนนรวม 100 คะแนน และได้คะแนนภาค ก. 30 คะแนน ได้ลำดับที่ 5 เลขที่ 1 ได้คะแนนรวม 100 คะแนน และได้คะแนนภาค ก. 20 คะแนน ได้ลำดับที่ 6 การเรียงลำดับลักษณะนี้ ใช้ฟังก์ชั่น Rank() อย่างเดียวไม่พอ ต้องใช้ Sumproduct() เพื่อกำหนดเงื่อนไขเพิ่มเติม วิธีการ มีดังนี ใช้ RANK.EQ() เพื่อหาลำดับที่ตามปกติ จะได้ดังนี้ จะเห็นว่า มีลำดับที่ซ้ำกัน คือ ลำดับที่ 2 มี 2 คน และ ลำดับที่ 4 มี 3 คน เกณฑ์ต่อมา คือต้องพิจารณาว่า ตำแหน่งที่เท่ากัน หรือซ้ำกัน ใครได้

การสร้างภาพสามมิติและเงา ด้วย Illustrator cs6

รูปภาพ
ภาพที่ต้องการสร้างคือ ภาพข้างล่าง วิธีการสร้าง การสร้างภาพขวดสามมิติ การสร้างเงา การปรับตำแหน่งแสงและแปะภาพที่ขวด การสร้างขวดสามมิติ เปิดโปรแกรม และนำภาพพื้นหลังเข้า โดยไปที่ File > Place... กำหนด Fill เป็นไม่ไม่ และกำหนด Stroke เป็นสีเขียว ความหนาของเส้นคือ 1 pixel ใช้ Pen Tool วาดภาพขวด ดังภาพ ไปที่ Effect > 3D > Revolves... แล้วคลิก OK ใช้ White Arrow Tool ปรับแต่งภาพขวด โดยปรับตำแหน่งของจุด Anchor point จนได้ภาพขวดที่ต้องการ ดังภาพ การสร้างเงา เลือกชั้นรูปขวดที่สร้างขึ้น คัดลอกและวาง โดยกด Ctrl + C และ Ctrl + F จะเกิดชั้นใหม่อีกหนึ่งชั้น ให้ซ่อนชั้นบน โดยคลิกที่ตา และคลิกเลือกชั้นล่าง ไปที่ Object > Expand Appearance เปิดแถบสี (Window > swatches) และเลือกสีเทา เปิด Pathfinder (Window > Pathfinder) และเลือก Unite ลดจำนวนจุด Anchor point ให้น้อยลง โดยไปที่ Object > Path > Simplify path ปรับค่า ดังภาพ คลิก OK เลือกเครื่องมือลูกศรสีดำ เปิดชั้นขวด และคลิกช่องลูกกุญแจเพื่อล็อคชั้นนี้ เลือกชั้นขวดสีเทา และเลื่อ

การส่งค่าตัวแปร ระหว่าง javascript และ php (2)

รูปภาพ
การส่งค่าจาก Javascript  ไปยังไฟล์ Php ถ้าต้องการสร้างปุ่มกด ใน Javascript เพื่อให้ส่งค่าไปยัง ไฟล์ php สามารถทำได้ โดย ใช้คำสั่ง window.location.herf เช่น ตัวอย่างไฟล์ html ส่งค่าตัวแปร Javascript ไปยังไฟล์ php <!DOCTYPE html> <html> <body> <p>การส่งค่าตัวแปร จาก Javascript ไปยังไฟล์ php ด้วย query string</p> <button type="button" onclick="myFunction()"  onmouseover="this.style.cursor='pointer';">ส่งค่าตัวแปร</button> <script> function myFunction() {   var myJsVar = "สมศักดิ์";   window.location.href = "my_php.php?name=" + myJsVar; } </script> </body> </html> ตัวอย่างข้างต้น ส่งตัวแปร Javascript ชื่อ myJsVar ไปยังไฟล์ php ชื่อ my_php.php ข้อสังเกต ปกติปุ่มของ Javascript จะไม่แสดงรูปนิ้วมือเมื่อนำเมาส์ไปวางที่ปุ่ม ถ้าต้องการให้เคอร์เซอร์เปลี่ยนเป็นรูปมือ ให้ใช้คำสั่ง onmouseover="this.style.cursor='pointer' เพิ่มเข้าไปที่ปุ่ม