บทเรียนที่ 30 หน้าต่างและตัวถูกกระทำ : screen
หน้าจอของคุณกว้าง 1280 พิกเซล สูง 800 พิกเซล ใช่รึเปล่าครับ ?
จริงๆแล้ว ผมไม่รู้เลยครับ ว่าคุณใช้หน้าจอ ความละเอียดหรือกว้างสูงเท่าไหร่ ผมเพียงแค่ใช้คำสั่งจาวาสคริปดึงค่าหน้าจอของคุณ มาแสดงบนบรรทัดแรกข้างบนนั้นโดยใช้..
สคริป..
<script language="javascript">
document.write("หน้าจอของคุณกว้าง "+
screen.width+" พิกเซล "+" สูง "+
screen.height +" พิกเซล ใช่รึเปล่าครับ ?")
</script>
document.write("หน้าจอของคุณกว้าง "+
screen.width+" พิกเซล "+" สูง "+
screen.height +" พิกเซล ใช่รึเปล่าครับ ?")
</script>
คุณสามารถเรียกค่าความกว้างของหน้าจอได้ในหน่วยของพิกเซลด้วย screen.width และเรียกค่าความสูงได้ด้วย screen.height แต่ไม่สามารถปรับความกว้างและสูงของหน้าจอผู้ใช้ ด้วยสองคำสั่งนี้ครับ
การปรับขนาดและตำแหน่งหน้าต่าง
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้าง 500px สูง 500px
คลิ๊กบรรทัดนี้เพื่อให้หน้าต่างเต็มจอ
โค้ดที่สร้างสองบรรทัดบน..
<center style="background-color:pink"
onClick="resizeTo(500,500)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้าง
500px สูง 500px</center>
<center style="background-color:00FFFF"
onClick="resizeTo(screen.width,screen.height)">
คลิ๊กบรรทัดนี้เพื่อให้หน้าต่างเต็มจอ</center>
onClick="resizeTo(500,500)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้าง
500px สูง 500px</center>
<center style="background-color:00FFFF"
onClick="resizeTo(screen.width,screen.height)">
คลิ๊กบรรทัดนี้เพื่อให้หน้าต่างเต็มจอ</center>
คำสั่ง resizeTo(กว้าง,สูง) ใช้ปรับขนาดความกว้างและสูงของหน้าต่าง Browser ซึ่งรูปคำสั่งเต็ม คือ window.resizeTo(กว้าง,สูง) โดยใช้ค่าความกว้างและสูงในหน่วยพิกเซลเท่านั้น คุณจะเห็นได้ว่าบรรทัดที่คลิ๊กแล้วหน้าต่างเต็มจอ(หากเต็มจออยู่แล้วจะไม่เห็นผล) มีการกำหนดความกว้างเป็น screen.width และสูงเป็น screen.height ซึ่งนั่นคือความกว้างและความสูงเต็มๆของหน้าจอใช่มั้ยครับ จึงได้ผลเช่นนี้... ลองดูคำสั่งต่อไปครับ
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างน้อยลง 50px สูงน้อยลง 50px
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างขึ้น 50px สูงขึ้น 50px
...จากโค้ด
<center style="background-color:pink"
onClick="resizeBy(-50,-50)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างน้อยลง 50px สูงน้อยลง 50px</center>
<center style="background-color:00FFFF"
onClick="resizeBy(50,50)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างขึ้น 50px สูงขึ้น 50px</center>
onClick="resizeBy(-50,-50)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างน้อยลง 50px สูงน้อยลง 50px</center>
<center style="background-color:00FFFF"
onClick="resizeBy(50,50)">
คลิ๊กบรรทัดนี้เพื่อปรับขนาดหน้าต่างให้กว้างขึ้น 50px สูงขึ้น 50px</center>
resizeBy(เพิ่มหรือลดกว้าง,เพิ่มหรือลดสูง) เป็นคำสั่งเพิ่มหรือลดความกว้างและสูงในหน่วยพิกเซล คงจะแยกความแตกต่างกับคำสั่ง resizeTo ได้นะครับ ...ลองมาดูคำสั่งย้ายตำแหน่งหน้าต่างบ้างครับ
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างไปทางขวา 100px เลื่อนลง 100px
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างมาชิดขอบซ้ายบนสุด
...จากโค้ด
<center style="background-color:pink"
onClick="window.moveTo(100,100)">
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างไปทางขวา 100px เลื่อนลง 100px</center>
<center style="background-color:00FFFF"
onClick="window.moveTo(0,0)">
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างมาชิดขอบซ้ายบนสุด</center>
onClick="window.moveTo(100,100)">
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างไปทางขวา 100px เลื่อนลง 100px</center>
<center style="background-color:00FFFF"
onClick="window.moveTo(0,0)">
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างมาชิดขอบซ้ายบนสุด</center>
คำสั่ง moveTo(ตำแหน่งในแนวนอน,ตำแหน่งในแนวตั้ง) ใช้เลื่อนหน้าต่างไปยังตามแหน่งต่างๆตามที่คุณต้องการ โดยนับมุมซ้ายบนสุดของหน้าจอเป็นตำแหน่ง (0,0) ลองมาดูคำสั่งที่ใช้เลื่อนหน้าต่างเช่นกันครับ แต่อันนี้เป็นการเพิ่มและลดค่า ซึ่งมีส่วนคล้ายกับคำสั่ง resizeBy
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างไปทางขวา 100px เลื่อนลง 100px
คลิ๊กบรรทัดนี้เพื่อเลื่อนหน้าต่างไปทางซ้าย 100px เลื่อนขึ้น 100px
...จากโค้ด
ไม่ต้องอธิบายอะไรมากครับ เพียงคุณคลิ๊กแถบสองสี กดไปกดมา น่าจะเข้าใจ แต่ต้องระวังเวลานำไปใช้ อย่ากำหนดค่ามากๆจนหน้าต่างหรือเมนูหลุดออกนอกจอนะครับ ผู้ใช้เว็บของคุณคงรำคาญได้แน่ๆ ถ้าเกิดผู้ใช้ไม่ทราบว่ากดปุ่ม Alt พร้อมกับ F4 จะปิดหน้าต่างล่องหนนั้นได้ (จะทำหน้าต่างล่องหนก็ได้ครับ แต่คุณต้องทำให้หน้าต่างนั้น กลับมาเป็นเหมือนเดิมโดยอัตโนมัติ)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น