Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ)
Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ)
วันนี้โปรแกรมเมอร์กากกาก จะมานำเสนอการทำ Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ) แบบสวยๆและสามารถปรับแต่ง CSS ได้ตามต้องการนะครับ ดูได้จากภาพตัวอย่างข้างต้นนะครับ เพื่อนๆสามารถที่จะ ปรับแต่ง Dialog หรือ Popup ของเพื่อนๆได้ตามต้องการเลยนะครับ ในตัวอย่างนี้เราได้โหลด jqueryui มาใน ธีม สีส้มนะครับ เพื่อนๆ เข้าไปหาโหลดกันได้ที่ www.jqueryui.com นะครับ เป็นอีกส่วนของ jquery ที่พัฒนาให้มีรูปแบบหน้าตาที่สวยงามมากขึ้นเพราะมีการพัฒนาในส่วนของ CSS ให้เราเลือกใช้กันได้ เข้าไปโหลดเลือกโหลดกันได้เลย และไฟล์อีก 1 ตัวที่ขาดไม่ได้เลยคือ ไฟล์ jquery นั้นเองครับเข้าไปโหลดมาใช้ก้นได้เลยที่ www.jquery.com หลังจากเพื่อนๆโหลดไฟล์กันมาแล้วก็มาเริ่มกันเลยครับ
เรามาดู Source code Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ) กันครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery </title>
</head>
<body>
<input type="button" id="button" value="click" />
<div id="dialog">Test jquery dialog หรือ popup </br>สามารถใส่ข้อมูลได้ในนี้</div>
</body>
</html>
อธิบาย Source code Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ) เล็กน้อยครับ
1. ในส่วน Source code ที่เป็นตัวอักษรสีดำ เป็นส่วนของ html เพื่อนๆน่าจะพอรู้กันมาแล้วนะครับ
2. ส่วนที่สองจะเป็น Source code ที่เป็นกล่องให้ copy ได้นั้น เป็นส่วนคำสั่งของ jquery นะครับ มีการเขียนกำหนดรูปแบบในการแสดงผลของ dialog กำกับไว้ นิดหน่อย และมีการปรับขนาดความกว้างได้ และอื่นๆที่เพื่อนๆสามารถไปกำหนดเองได้
3. ในส่วนที่ 3 นี้เป็นส่วนสำคัญก็ว่าได้นะครับ เพราะจะเป็นการกำหนดให้ jquery ทำงานใน id นั้นๆ หรือเขาเรียกกันว่าอะไรไม่รู้นะครับศัพท์ทางการ ผมไม่คอ่ยถนัด แต่ที่ผมพอจะเข้าใจคือ jquery จะทำงานส่วนหลักๆคือ ip ของ html ครับ ให้สังเกตตรง source code สีน้ำเงินนี่และครับ เมื่อมีการ คลิกที่ button ที่มี id = button จะให้ id = dialog เปิดขึ้นและทำงาน ในที่นี้ก็คือ <div id = "dialog"></div> นั้นเอง ก็ขอจบไว้เพียงเท่านี้และกันนะครับ หวังว่าคงมีประโยชน์ต่อผู้ที่สนใจไม่มากก็น้อยครับ ว่างๆโปรแกรมเมอร์กากกากจะมาเขียน Source cod ในแบบฉบับๆกากกาก กันต่อนะครับ ของคุณครับ
Categories
:
CSS
,
JQuery
,
Jquery dialog or popup(เจคิวรี่ ไดอะล็อก หรือ ป๊อปอัพ)
Highly descriptive article, I enjoyed that bit. Will there be a part 2?
ตอบลบ