jQuery UI (UI = User Interface) ก็คือ widget หรือ interface ที่ออกแบบมาให้ใช้กับเว็บ ทำให้เว็บมีปฏิสัมพันธ์กับผู้ใช้ได้สะดวกและสวยงามขึ้น ซึ่ง jQuery UI เองก็ถูกพัฒนาโดยใช้ jQuery ซึ่งเป็น javascript library อย่างหนึ่ง (jquery.com)
ลองมาดูตัวอย่างการใช้งานครับ ในที่นี้เราจะลองใช้ datepicker widget หรือ calendar widget เพื่อป้อนข้อมูลวันที่ ดังนี้ครับ
การติดตั้งและขั้นตอนการใช้งาน ดูได้จาก http://jqueryui.com/docs/Getting_Started โดยสรุปสั้นๆว่า
- ไปดาวน์โหลด jQuery UI มาก่อน สามารถเลือก theme หรือเลือกเฉพาะ widget ก็ได้ ถ้าอยากได้ง่ายๆไม่ต้องทำอะไรมากก็ดาวน์โหลดตัวปกติได้ที่หน้าหลัก เช่น http://jqueryui.com/download/jquery-ui-1.8.20.custom.zip
- แตกไฟล์ออกมา จะมีไดเรกทอรี js (jQuery), css, development-bundle (เอกสาร, ตัวอย่าง, UI) และไฟล์ index.html
- ใช้ text editor เปิดไฟล์ index.html จะเห็นว่ามี 3 บรรทัดคือ
< link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
< script type="text/javascript" src="js/jquery-1.7.1.min.js" > < /script >
< script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js" > < /script >
จากนั้นให้สร้างไฟล์ html ของเราที่จะใช้งาน เช่น testUI.html แล้วนำโค้ดข้างต้นมาเพิ่ม พร้อมกับเติม textbox ที่ต้องการป้อนค่าวันที่เข้าไป เช่น
<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<div>
<p> Date <input type="text" name="date" id="date" /> </p> </div>
</body>
</html>
ต่อมาให้สร้างไฟล์ javascript เช่น myScript.js ให้สอดคล้องกับไฟล์ html ที่อ้างถึง แล้วเพิ่มรายละเอียด ได้แก่
$(function(){
$('#date').datepicker();
});
บันทึกไฟล์ทั้งหมด แล้วลองเปิดไฟล์ html ก็จะได้ผลลัพธ์ตามต้องการครับ
อย่างไรก็ตาม วันที่ที่ป้อนจะเป็น เดือน/วัน/ปี โดยอัตโนมัติ เราสามารถเปลี่ยนรูปแบบให้เป็น วัน/เดือน/ปี ได้โดยกำหนด
$(function(){
$('#date').datepicker({ dateFormat: "dd/mm/yy" });
});
เอกสารอ้างอิง
- http://jqueryui.com/docs/Getting_Started
- http://jqueryui.com/demos/datepicker/
- http://jquery.com
No comments:
Post a Comment