ควรออกแบบหน้านี้ด้วย jQuery ยังไงครับ

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

PM.Pichit
PHP Newbie
PHP Newbie
Posts: 2
Joined: 03/03/2012 8:59 pm

ควรออกแบบหน้านี้ด้วย jQuery ยังไงครับ

Post by PM.Pichit »

คือว่า เรียนตามตรงเลยว่า ตอนนี้ผมกำลังพัฒนาโปรเจ็คจบอยู่ครับ
มีอยู่ระบบนึงในนั้นที่ผมตั้งใจว่าจะทำเป็น Quiz และในหน้าผมจะทำดังนี้

1. เมื่อผู้ใช้ใส่ข้อมูลลงในฟอร์มตั้งคำถามพร้อมช้อยเสร็จ หลังจากกดเพิ่มคำถาม
หน้าที่แสดงฟอร์มกรอกข้อมูล ต้องไม่่ถูกรีเฟรช (ส่งไปเฉพาะพารามิเตอร์)

2.ในหน้าสำหรับเพิ่มคำถามลงฐานข้อมูล ข้อมูลจะถูกนำไปเก็บไว้ในอาเรย์ก่อน เพื่อใช้ public ทีหลัง

3. ในหน้าแสดงคำถามต้องแสดงคำถามที่เพิ่งเพิ่มเข้าไปใหม่ และมีปุ่มสามารถลบได้หากไม่ต้องการ

สำหรับเทคนิคที่ผมเล็งไว้คือการใช้ iframe เข้าช่วยคือ จะแบ่งหน้าออกเป็น 3 หน้า หน้าแรกจะเป็นหน้าที่มี iframe สองตัว ตัวแรกโชว์ฟอร์มของการเพิ่มคำถาม ส่วนอีกกล่องโชว์หน้าที่แสดงข้อมูลคำถามที่เพิ่มแล้ว แต่ติดปัญหาตรงที่ว่า

เมื่อมีการเพื่มคำถามเข้าไป ความสูงของหน้าที่แสดงรายการคำถามจะต้องยืดตาม แต่ iframe ที่อยู่หน้า main จะไม่ยืดตาม เพราะไม่ได้ถูกรีเฟรชด้วย จริงมั้ยครับ ถ้าผมกำหนด iframe กล่องนี้ให้ overflow = scroll ก็จะทำให้หน้าตาไม่สวยดูเกะกะลูกตา เพราะฉะนั้นคิดว่าคงรู้กันแล้วว่าผมต้องการอะไร

ใช่แล้วครับ ผมอยากได้กล่อง iframe ที่สามารถยืดได้หดได้ตามขนาดของหน้าที่เราไปจั๊มป์เค้ามานั่นเอง ซึ่งผมคิดว่ามันจะลำบากไปรึเปล่าหากเทียบกับวิธีที่สอง คือ กำหนดช่อง input ให้เท่ากับจำนวนคำถามที่ผู้ใช้เลือกเข้ามาก่อนถึงหน้านี้ เช่น หากผู้ใช้เลือกสร้างแบบ 10 คำถาม ผมก็ให้ PHP วนลูปเลย สร้างฟอร์มสำหรับกรอกคำถามและตัวเลือกแบบ 10 คำถามในหน้าเดียวเลย แต่ผมว่าวิธีนี้ถึงจะทำได้ง่าย แต่มันไม่มีความดึงดูดใจเท่าวิธีแรกเลยครับ เหมือนเวลาที่เราอัพโหลดคลิปในยูทูป หากต้องการเพิ่มคลิปใหม่ต่อไปแค่กดปุ่มเพิ่มมันจะแอดเครื่องมือตัวใหม่มาให้เลย และ Fade ได้สวยงามมากครับ

เหตุที่ผมต้องมาปรึกษาที่นี่ เพราะผมยังเป้นผู้ใหม่กับภาษา jquery อยู่ อ่านหนังสือก็ไม่ค่อยเข้าใจ เค้าสอนแบบสับไปสับมา เลยต้องมาหาที่ปรึกษาเพิ่มเติมนี้แหละครับ

ผมไม่ขอโค้ดอะไรมากมาย ขอแค่กล่องไอเฟรมที่ยืดหดได้ตามที่ผมได้กล่าวข้างบน ซึ่งหากเขียนให้ได้ก็ขอขอบพระคุณล่วงหน้า แต่ถ้าเห็นว่ามีวิธีที่ดีกว่าก็ช่วยแนะนำด้วยนะครับ

อ้อ ผมไปได้ตัวอย่างของโค้ดมา อยากให้ท่านที่รู้วิธีช่วยทำให้ตัวอย่างนี้มีการค่อย ๆ เพิ่มความสูงให้หน่อยนะครับ แบบว่าอันนี้มันเพิ่มขนาดได้จริง แต่ยังไม่สวยก็เลยอยากให้ช่วยเพิ่มเรื่อง timer ให้ด้วยนะครับขอบคุณครับ
iframe_code.zip
โค้ดครับ
(52.57 KiB) Downloaded 258 times

touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: ควรออกแบบหน้านี้ด้วย jQuery ยังไงครับ

Post by touleg »

หน้าที่แสดงฟอร์มกรอกข้อมูล ต้องไม่่ถูกรีเฟรช (ส่งไปเฉพาะพารามิเตอร์)
ใช้ Ajax ดีกว่าครับอย่าไปใช้ iframe เลยถ้าไม่จำเป็น แทนที่จะโหลดเฉพาะข้อมูลที่จำเป็นแต่คุณต้องโหลดทั้งหน้า ของ iframe แต่ละอัน ถ้าหน้านึงมี 3 block ก็เท่ากับโหลดหน้า 3 หน้าโดยไม่จำเป็น

Ajax ของ Jquery ก็ใช้งานง่ายๆครับ แต่การแสดงข้อมูลหรือการเปลี่ยนแปลง หรือเปลี่ยนรูปแบบข้อมูลต่างๆ คุณอาจจะต้องใช้พวก CSS เข้ามาใช้งานด้วย

ปัจจุบันผมใช้ iframe เฉพาะ upload รูปเพราะว่า Javascript ไม่สามารถส่งข้อมูลที่เป็น Binary แบบ Ajax ได้ ก็ใช้วิธีซ่อน iframe ไว้แล้วก็ส่งข้อมูล upload ไปผ่านทาง iframe ให้อีกหน้าประมวลผล แค่นี้ ส่วนอื่นๆไม่ได้นำมาใช้เลย

PM.Pichit
PHP Newbie
PHP Newbie
Posts: 2
Joined: 03/03/2012 8:59 pm

Re: ควรออกแบบหน้านี้ด้วย jQuery ยังไงครับ

Post by PM.Pichit »

อืมขอบคุณมาก ๆ ครับ ก็จริงอย่างที่ว่า มันมีทั้งข้อดีและข้อด้อยจริงๆ

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 1 guest