adkdev - Just another web development blog - php, ajax, Ajax, PHP, google maps, google map, api, javascript, css, CSS, web 2.0, html, xhtml

Archive for Script.aculo.us

Lightbox 2

แปลกใจตัวเองอยู่เหมือนกัน ว่าทำไม เราไม่เคยเขียนถึง สคริปส์ ตัวนี้หว่า…O_o มีแต่เขียนอ้างถึงเฉยๆ เอาหละวันนี้ ก็ขอเขียนสักหน่อยก็แล้วกันนะ อาจจะเป็นเรื่องเก่าแล้ว แต่สคริปส์ตัวนี้ก็เก๋าอยู่พอตัว 555+

Lightbox 2 เป็นสคริปส์ที่เอาไว้แสดงรูปภาพ โดยที่เมื่อเราคลิกที่รูป จะมีหน้าต่างขึ้นมา
(แต่ไม่ใช่ Popup windows นะ) โดยหน้าต่างนั้นจะปรากฏที่หน้าเว็บเดิม โดยจะมีการสร้าง Layer ขึ้นมาทับหน้าเว็บเดิม เพื่อแสดงรูปภาพนั้นๆ และเมื่อเราคลิก ที่ layer ที่เป็นพื้นหลัง (Background) สคริปส์ก็จะทำการปิดรูปภาพ พร้อมกับแสดงหน้าเว็บเดิม โดยที่ไม่มีการโหลดหน้าเว็บใหม่ แต่อย่างใด ดังตัวอย่างข้างล่าง

Lightbox 2

Read more »

Prototip - Tooltips for prototype

ก่อนหน้าผมเคยเขียนถึง Script.aculo.us - Effect.Tooltip คราวนี้ จากผู้จัดคนเดิม ได้ออกเวอร์ชั่นใหม่แล้ว เป็นเวอร์ชั่น 1.0.1 แถมมีชื่อใหม่ซะด้วย โดยมีชื่อว่า Prototip ซึ่งทำให้เราสามารถสร้าง Tooltips ได้อย่างง่ายดาย แต่ความสามารถไม่ได้เรียบง่าย ธรรมดา เหมือนวิธีการใช้นะ Prototip นี้ยังคงใช้ Prototype javascript framework และ Scriptaculous ในการสร้างสรรค์ผลงานเหมือนเดิม

สิ่งที่เพิ่มมาใน Prototip คือ Hooking (เจ้าของเขาเรียกอย่างงั้น) คือ ความสามารถที่ทำให้เรากำหนดทิศทางการแสดงผลของ Tooltips ได้ ว่าจะให้เด้งขึ้นมาทางไหน เช่น bottomRight TopLeft เป็นต้น ซึ่งในเว็บ Prototip เขามีตัวอย่าง ในส่วนของ Hooking ซึ่งดูแล้วเข้าใจง่ายมาก ส่วนการกำหนดระยะห่างของ Tooltips ยังคงมีเหมือนเดิม

อีกทั้งยังมีวิธีใช้งานอย่างละเอียด อีกด้วย และสามารถดาวโหลด SourceCode มาลองใช้ได้ ที่หน้าเดียวกันครับ

Prototip - Tooltips for prototype

Script.aculo.us Accordion

คุณ Kevin Miller ผู้จัดทำ LightWindows ได้ทำของเล่นออกมาให้เราๆ ได้ใช้กันอีกแล้ว งานนี้เป็น Script.aculo.us Accordion ซึ่งทำออกมาให้ใช้งานได้ทั้งแบบแนวตั้ง และ แนวนอน

ซึ่งแต่ก่อนนั้นทางทีมงาน Script.aculo.us ไม่ได้ทำออกมา (แต่ทำไม Mootools ทำหว่า Rico ก็ด้วย) คุณ Kevin ก็เลยจัดการทำมันซะเอง (ทำไมเก่งจัง)
ผมก็ไม่รู้จะให้คำจำกัดความของ Accordion ว่าอะไรดี ประมาณว่าคล้ายประตูเลื่อน หนะครับ เลื่อนไปมา ซ้าย-ขวา หรือ บน-ล่าง ลองไปใช้ดูละกันนะครับ ใครให้คำจำกัดความได้แบบถูกต้อง ช่วยบอกผมทีนะครับ

Script.aculo.us Accordion

Script.aculo.us and Prototype.js Offline Docs

แปลกใจเหมือนกันว่าเหตุอันใด library สองตัวนี้ถึงไร้ซึ่งคู่มือให้ดาวโหลดกัน มีแต่แบบ online ซึ่งจะอ่านได้คุณต้อง ออนไลน์ เท่านั้น wiki.script.aculo.us สำหรับ Script.aculo.us และ www.prototypejs.org/api สำหรับ Prototype
ซึ่งบางทีกว่าจะค้นเจอ ก็เล่นเอาลำบากเหมือนกัน วันนี้เรามีฮีโร่ ออกมาช่วยเหลือเราแล้ว ที่เว็บ m3nt0rs weblog ได้จัดทำมาให้เราแล้ว

โดย มีให้มาถึง 3 เวอร์ชั่นสำหรับ Script.aculo.us และ อีก 1 สำหรับ Prototype.js ให้เราดาวโหลดมาไว้เป็นคู่มือในเครื่องได้เลย
เวลามีปัญหาคาใจ จะได้เปิดหาได้ง่ายขึ้น ดูรายละเอียดได้ที่บล็อกของเจ้าตัวครับ

ข้างล่างนี้เป็นลิงค์สำหรับดาวโหลด ไฟล์ที่ว่าครับ

Script.aculo.us

Prototype.js

Script.aculo.us - Effect.Tooltip

วันนี้ผมมี Javascript Effect มานำเสนออีกชิ้นหนึ่ง ชื่อว่า Effect.Tooltip ซึ่งใช้ Script.aculo.us เป็นฐาน ผู้เขียนคือ คุณ Nick Stakenburg ซึ่งวิธีการเรียกใช้ ก็จะคล้ายการเรียกใช้ effect ของ scriptaculous ทั้วไป

การจะใช้ effect ตัวนี้ต้องการ Prototype.js และ Script.aculo.us ซึ่งสามารถดาวโหลดได้จากลิงค์ แล้วก็ดาวโหลดไฟล์ Effect ครับ

วิธีการเรียกใช้ก็เป็นดังนี้ :
new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});

Read more »

inicio Contact me! sindicaci;ón