UI หรือ User interface เป็นส่วนแสดงผลที่ติดต่อกับผู้ใช้งาน เพื่อให้ผู้ใช้งานสามารถจัดการและเข้าถึงข้อมูลได้สะดวกรวดเร็ว ที่เป็นที่นิยมกันอย่างแพร่หลายคือ jQuery Ui ซึ่งหลายเว็บไซต์ได้นำไปใช้งานกัน (รวมถึงเว็บแห่งนี้ด้วย) แต่วันนี้ผมจะมาแนะนำให้รู้จักกันกับน้องใหม่อย่าง Kendo UI
Kendo UI เป็นชุดคำสั่งที่ช่วยทำให้การแสดงผลมีความสวยงามทันสมัย พัฒนาขึ้นจากเทคโนโลยีล่าสุด HTML5, CSS3 และ JavaScript ประกอบไปด้วยเครื่องมือต่างๆที่สำคัญสำหรับผู้ใช้ ไม่ว่าจะเป็น ปฏิทิน เมนู สไลด์บาร์ และอื่นๆ อีกทั้งยังสามารถใช้งานร่วมกันกับ jQuery ได้อย่างสมบูรณ์แบบ
การใช้งาน
สำหรับการดาวน์โหลด Kendo UI มาใช้งานนั้น ท่านจะต้องทำการลงทะเบียนเพื่อขอใช้แบบ OpenSource License ภายใต้สัญญาอนุญาต GPL ที่ http://www.kendoui.com/get-kendo-ui.aspx หลังจากที่ลงทะเบียนและดาวน์โหลดมาเรียบร้อยแล้ว ให้ทำการแตกไฟล์ออกมาอีกที
ภายในไฟล์จะประกอบไปด้วยโฟลเดอร์
- examples ตัวอย่างของการใช้งาน เพื่อนๆสามารถศึกษาได้จากไฟล์ด้านในนี้เลย
- js ชุดคำสั่งทั้งหมดของ Kendo UI
- source รวมชุดคำสั่งและรูปแบบการแสดงผล
- styles ไฟล์รูปแบบการแสดงผลของ Kendo UI
ซึ่งเวลาใช้งานผมจะนำไปใช้คือโฟลเดอร์ source โฟลเดอร์เดียว
ตัวอย่างการใช้งาน calendar
<!doctype html>
<html>
<head>
<title>Basic usage</title>
<link href="source/styles/kendo.common.css" rel="stylesheet"/>
<link href="source/styles/kendo.default.css" rel="stylesheet"/>
<script src="source/js/jquery.min.js"></script>
<script src="source/js/kendo.core.js"></script>
<script src="source/js/kendo.fx.js"></script>
<script src="source/js/kendo.calendar.js"></script>
</head>
<body>
<a href="../index.html">Back</a>
<div class="description">Basic usage</div>
<div id="example" class="k-content">
<div id="background">
<div id="calendar"></div>
</div>
<script>
$(document).ready(function() {
// create Calendar from div HTML element
$("#calendar").kendoCalendar();
});
</script>
<style scoped>
#background {
width: 254px;
height: 250px;
margin: 30px auto;
padding: 69px 0 0 11px;
background: url('../content/calendar/calendar.png') transparent no-repeat 0 0;
}
#calendar {
width: 241px;
}
</style>
</div>
</body>
</html>
เพื่อนๆสามารถศึกษาการใช้งานภายในโฟลเดอร์ examples ได้เลย ซึ่งในนั้นจะมีตัวอย่างการใช้งานต่างๆไว้ให้ครบครัน นอกจากนี้ยังมี Kendo UI สำหรับเว็บบนมือถืออีกต่างหาก
เว็บไซต์หลัก http://www.kendoui.com/
ดาวน์โหลด http://www.kendoui.com/get-kendo-ui.aspx
