GAJAX บทที่ 11 VScroll และ HScroll
HScroll และ VScroll เป็น Control ที่สร้างต่อจาก GScroll โดยมีความสามารถที่เพิ่มเติมขึ้นมาคือสามารถควบคุมการ Scroll ไปในทิศทางที่ต้องการได้โดย user
HScroll และ VScroll มีการใช้งานที่เหมือนกันครับ โดยที่ HScroll จะเป็น Scroll ในแนวตั้งและ VScroll จะเป็นแนวนอน
container กรอบภายนอกสำหรับเป็นส่วนห่อหุ้ม
scroller กรอบภายในซึ่งเป็นส่วนที่จะถูกเลื่อน และใส่รูปภาพไว้ภายใน
options เป็นข้อมูลชนิด hash มี property ดังนี้
speed: ความเร็วในการ scroll (30)
duration: step การเคลื่อนที่ ของ scroller (5)
arrowLeft: id ของส่วนที่เป็นลูกศรด้านซ้าย (arrowLeft) // สำหรับ VScroll เท่านั้น
arrowRight: id ของส่วนที่เป็นลูกศรด้านขวา (arrowRight) // สำหรับ VScroll เท่านั้น
arrowTop: id ของส่วนที่เป็นลูกศรด้านบน (arrowTop) // สำหรับ HScroll เท่านั้น
arrowBottom: id ของส่วนที่เป็นลูกศรด้านล่าง (arrowBottom) // สำหรับ HScroll เท่านั้น
หมายเหตุ * สีชมพูเป็นค่า default
ส่วน HScroll ดูตัวอย่าง ที่นี่ เลยครับ
var scroller = new HScroll(container, scroller);
scroller.play(options);
HScroll และ VScroll มีการใช้งานที่เหมือนกันครับ โดยที่ HScroll จะเป็น Scroll ในแนวตั้งและ VScroll จะเป็นแนวนอน
container กรอบภายนอกสำหรับเป็นส่วนห่อหุ้ม
scroller กรอบภายในซึ่งเป็นส่วนที่จะถูกเลื่อน และใส่รูปภาพไว้ภายใน
options เป็นข้อมูลชนิด hash มี property ดังนี้
speed: ความเร็วในการ scroll (30)
duration: step การเคลื่อนที่ ของ scroller (5)
arrowLeft: id ของส่วนที่เป็นลูกศรด้านซ้าย (arrowLeft) // สำหรับ VScroll เท่านั้น
arrowRight: id ของส่วนที่เป็นลูกศรด้านขวา (arrowRight) // สำหรับ VScroll เท่านั้น
arrowTop: id ของส่วนที่เป็นลูกศรด้านบน (arrowTop) // สำหรับ HScroll เท่านั้น
arrowBottom: id ของส่วนที่เป็นลูกศรด้านล่าง (arrowBottom) // สำหรับ HScroll เท่านั้น
หมายเหตุ * สีชมพูเป็นค่า default
<style type="text/css">
#contianer-scroll {
position: relative;
width: 370px;
height: 90px;
overflow: hidden;
border:1px solid #666666;
float: left;
}
#scroller {
position: absolute;
width:630px;
height: 80px;
white-space: nowrap;
}
#scroller img { /* style ของรูปภาพ */
float: left;
margin: 5px;
}
#arrowLeft,#arrowRight { /* stylle ของ ลูกศรสำหรับเลื่อนรูปภาพ อาจใช้รูปแทนได้ */
height: 90px;
line-height: 90px;
float: left;
cursor: pointer;
}
</style>
<div id="arrowLeft"><<</div>
<div id="contianer-scroll">
<div id="scroller"><img alt="" src="m7a3c3.jpg" /> <img alt="" src="2ustct.jpg" /> <img alt="" src="vkpb74.jpg" /> <img alt="" src="epqb4e.jpg" /> <img alt="" src="khzmr3.jpg" /> <img alt="" src="et4dgs.jpg" /> <img alt="" src="9ya5qz.jpg" /> <img alt="" src="mctq78.jpg" /> <img alt="" src="egahru.jpg" /></div>
</div>
<div id="arrowRight">>></div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>
ส่วน HScroll ดูตัวอย่าง ที่นี่ เลยครับ
ตัวอย่าง :
<<









>>
คำแนะนำในการใช้งาน เพื่อป้องกันข้อผิดพลาดของบราวเซอร์รุ่นใหม่ๆ ผมแนะนำให้ใช้รูปภาพเรียงต่อๆกันไปโดยไม่ต้องขึ้นบรรทัดใหม่นะครับ ตามนี้