.::www.Chayoo.in.th::.

 ลืมรหัสผ่าน
 สมัครสมาชิก
ค้นหา
ดู: 91|ตอบกลับ: 3

การเปลี่ยนเฟรมหลายหน้าในครั้งเดียว

  [คัดลอกลิงก์]
แก้ไขครั้งสุดท้ายโดย inoomz เมื่อ 2012-11-15 21:45 \n\nเครดิต ด็อกเตอร์ Joe Burns

คำสั่งจาวาสคริปง่ายๆ เพื่อเปลี่ยนทั้งสามเฟรมทางขวา แต่ก่อนอื่น หากคุณยังไม่ได้กดปุ่มเปลี่ยนเฟรม ในสามเฟรมจะอ่านได้ว่า frames[1], frames[2], และ frames[3] ซึ่งในจาวาสคริปจะเป็นชื่อของเฟรมนั้นๆ (หากคุณผ่านบทเรียนจาวาสคริปมาแล้ว จะเข้าใจบทนี้ได้ง่ายและละเอียดครับ)
โค้ดของหน้าที่ให้ 4 หน้าอยู่
                ในการที่จะบอกคุณได้ว่าเราทำได้อย่างไร ต้องเริ่มจากให้คุณรู้โค้ดที่ทำให้เกิดหน้าที่มี 4 เฟรมนี้ก่อน :
<FRAMESET cols=85%,15%>
<FRAME src="f51.html">
<FRAMESET rows=33%,33%,33%>
<FRAME src="http://www.htmlgoodies.com/tutors/zippy2.html">
<FRAME src="http://www.htmlgoodies.com/tutors/zippy3.html">
<FRAME src="http://www.htmlgoodies.com/tutors/zippy4.html">
</FRAMESET>
</FRAMESET>


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

                เลขลำดับจะไม่ถูกนับเริ่มจาก 1 แต่เป็น 0   เฟรมทางขวาถูกตั้งชื่อต่างๆคือ frames[1], frames[2], และ frames[3] ...Browser จะตั้งชื่อเช่นนั้น เอ...แล้ว frames[0] อยู่ไหนล่ะ ?  ..ก็คือเฟรมที่คุณกำลังอ่านอยู่ไงครับ และต่อไปเป็นการแสดงชื่อของแต่ละเฟรม โดยนำโค้ดข้างบนมาประกอบ :

<FRAMESET cols=85%,15%>
<FRAME src="f51.html">   ----> เฟรมนี้ชื่อว่า frames[0]
<FRAMESET rows=33%,33%,33%>
<FRAME src="http://www.htmlgoodies.com/tutors/zippy2.html">   ----> เฟรมนี้ชื่อว่า frames[1]
<FRAME src="http://www.htmlgoodies.com/tutors/zippy3.html">   ----> เฟรมนี้ชื่อว่า frames[2]
<FRAME src="http://www.htmlgoodies.com/tutors/zippy4.html">   ----> เฟรมนี้ชื่อว่า frames[3]
</FRAMESET>
</FRAMESET>

________________________________________

                เห็นรึยังครับว่า Browser จะนับลำดับเฟรมเริ่มจาก 0 แล้วอย่าลืมตัวเอส s ในคำว่า frames[--] ด้วยครับ ถ้าเวลานำไปใช้แล้วลืมพิมพ์ตัวเอส จะแย่เอานะครับ ...เรามาดูวิธีทำขั้นต่อไปครับ
________________________________________

คำสั่งเปลี่ยน 3 เฟรม
<FORM>
<INPUT onClick="parent.frames[1].location=
'http://www.htmlgoodies.com/tutors/zippy5.html';
parent.frames[2].location=
'http://www.htmlgoodies.com/tutors/zippy6.html';
parent.frames[3].location=
'http://www.htmlgoodies.com/tutors/zippy7.html';"
type=button value="เปลี่ยน 3 เฟรมในทันที">
</FORM>


อธิบายคำสั่งต่างๆ
•        FORM   ใช้บอก Browser ว่าจะวางแบบฟอร์มที่นี่
•        INPUT TYPE="button"   ระบุชนิดของฟอร์ม ว่าเป็นปุ่ม
•        VALUE=   กำหนดข้อความที่จะอยู่บนปุ่ม
•        onClick=   กำหนดว่าจะมีอะไรเกิดขึ้นเมื่อคลิ๊กที่ปุ่ม โปรดใช้ C ตัวใหญ่เสมอ (ดูบทเรียนของคำสั่งนี้ได้ใน บท เรียนจาวาสคริปที่ 5)
•        parent.frames[1].location='.../zippy5.html';   เป็นคำสั่งจาวาสคริปที่ทำให้เกิดเทคนิคนี้
  "parent" คือหน้าหลัก ที่มี 4 เฟรมอยู่
  "frames[1]" คือเฟรมที่เราจะให้เปลี่ยนหน้า
  "location='---'" ใช้ระบุที่อยู่ของหน้าเว็บที่จะเข้ามาใหม่
อย่าลืมใส่เครื่องหมายลูกน้ำคั่นระหว่างคำสั่งด้วย ไม่งั้นคุณอาจได้รับ Error หากใส่คำสั่งทั้งหมดในบรรทัดเดียวกัน
•        /FORM   ใส่เพื่อจบการสร้างฟอร์ม


                คุณสามารถเพิ่มคำสั่งเปลี่ยนหน้าได้มากเท่าที่คุณต้องการ ถ้าคุณมี 20 เฟรม คุณสามารถเปลี่ยนได้หมด ด้วยคลิ๊กครั้งเดียว โดยต้องแน่ใจว่า คุณใส่ parent.frames[#].location='--'; สำหรับทุกๆเฟรมแล้ว แต่ถึงจะมากเพียงใด คุณก็ยังใช้คำสั่ง onClick เพียงคำสั่งเดียว

                ผมขอเตือนคุณอีกอย่างว่า ให้ใช้เครื่องหมายขีดเดียว( ' )ในเครื่องหมายคำพูด("----") การใช้เครื่องหมายคำพูดเช่น parent.frames[#].location="--"; จะทำให้เกิด Error
________________________________________

                คราวนี้ คุณก็สามารถสร้างเฟรมได้มากเท่าที่คุณต้องการ และเปลี่ยนเฟรมเดียวหรือหลายๆเฟรมด้วยคำสั่ง onClick แต่จำไว้ว่าเมื่อคุณโหลดหลายๆเฟรม นั่นหมายถึง คุณกำลังโหลดหน้าเว็บหลายๆหน้าพร้อมกันอยู่ ซึ่งอาจใช้เวลานานมากกว่าจะโหลดครบทุกหน้า (ผมคนไทยเคยเจอหน้าแบบนั้นครับ เป็นหน้าของไมโครซอฟท์ มี 3 เฟรม แต่ว่า แต่ละเฟรมมีเนื้อหาประมาณ 80 กิโลไบท์(KB) (หน้าเว็บ Home page ปกติประมาณ 50 KB) แล้วเน็ตที่ใช้ก็อืด(56K ..โหลดได้ 4-5 KB/วินาที) กว่าจะโหลดเสร็จ ต้องรอนานทีเดียวครับ) ถ้าคุณคิดจะใช้เทคนิคนี้ ก็พยายามสร้างหน้าที่มีความจุน้อยๆ KB ต่ำๆ เพื่อให้ผู้ใช้โหลดได้เร็วๆครับ
 เจ้าของ| โพสต์ 2012-11-15 12:28:28 | ดูโพสต์ทั้งหมด
ทดสอบ
โพสต์ 2012-11-15 18:44:23 | ดูโพสต์ทั้งหมด
มัน น่าให้รางวัล นัก แต่คลุมโค้ดหน่อยก็ดีครับ..
 เจ้าของ| โพสต์ 2012-11-15 21:26:21 | ดูโพสต์ทั้งหมด
ต้นฉบับโพสต์โดย KingProZa เมื่อ 2012-11-15 18:44
มัน น่าให้รางวัล นัก แต่คลุมโค้ดหน่อยก็ดีครับ.. ...

แนะนำด้วยยังใหม่อยู่ครับ
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

รายละเอียดเครดิต

ประวัติการแบน|Mobile|รูปแบบข้อความล้วน|www.Chayoo.in.th

GMT+8, 2019-6-16 18:37 , Processed in 0.038023 second(s), 14 queries , Gzip On.

Powered by Discuz! X3.4 R20180101, Rev.59

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้