IT Learning, Consulting and Developing

Berkenalan dengan Kendo UI – Jquery HTML5 Framework

gambar

Jquery dan HTML 5 sudah sering kita dengar dalam setiap pengembangan website. Fitur-fitur yang semakin canggih bisa didapat dengan memadukan keduanya.

Kendo UI adalah framework html5 & jquery yang cukup lengkap plugin-pluginnya untuk dipasang diwebsite kita.Contoh :

  1. AutoComplete.
  2. Grid (Data Table).
  3. Editor WYSIWYG
  4. ListView
  5. Dan masih banyak lagi.

Kendo UI menyediakan produk yang gratis(free) dan berbayar(komersil), untuk kendo UI yang gratis hanya disediakan untuk website dan untuk yang berbayar disediakan untuk Mobile UI, DataViz, Dan Server Wrapper.

Untuk contoh dan melihat secara lengkap fitur/plugin dari Kendo UI, teman-teman bisa langsung melihat ke website Kendo UI dialamat http://www.kendoui.com/download.aspx.

Pilih download yang open source dan gratis.

Sekarang saya akan jelaskan memakai kendoUI pada website kita.
Pertama teman-teman extract dahulu file Kendo UI yang sudah teman-teman download di folder website teman-teman. Lalu masukan kode ini untuk melakukan import komponen dari Kendo UI.

Dimana CSS Kendo UI sama seperti Bootstrap, MetroUI dll, yaitu memiliki style untuk button dan form.
Oke setelah kita melakukan import komponen Kendo UI. Saatnya kita beralih ke plugin Kendo UI.
Kali ini saya akan memberi contoh plugin yaitu plugin DateTimePicker.

Masukan kode Ini Sebelum  :

[js] $(function() {
$("#time").kendoTimePicker();
$("#date").kendoDatePicker();
});[/js]

Lalu untuk tampilan pluginnya masukan kode ini :

Date :

Kode diatas akan menampilkan form yang siap dipakai untuk memilih tanggal.
Date adalah ID untuk memanggil fungsi data date picker Kendo UI yang dideklarasikan diatasnya : $(“#date”).kendoDatePicker();

Untuk contoh lain,Kendo UI masih banyak menyediakan example / contoh plugin didalam file zip yang teman-teman download.
Ini adalah full script diatas :

<html>
<head>
<link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet"/>
<link href="styles/kendo.common.min.css" rel="stylesheet"/>
<link href="styles/kendo.default.min.css" rel="stylesheet"/>
</head>
<script src="js/jquery.min.js">script>
<script src="js/kendo.web.min.js">script>
<script src="examples/content/shared/js/console.js">script>
<script type="text/javascript">
$(function() {
$("#time").kendoTimePicker();
$("#date").kendoDatePicker();
});
</script>
<body>
<div id="example" class="k-content">
Date : <input id="date" />
</div>
</body>
<html>

Script path diatas seperti : js/jquery.js sudah saya defaultkan penempatannya dengan path atau penempatan Kendo UI. Script diatas juga sedikit diedit dari demo untuk mempermudah pemahaman. 

Sama seperti Saya cukupkan artikel kali ini,semoga bermanfaat untuk teman-teman semua.

Terima kasih atas perhatiannya.Salam.

sumber: http://www.tutorial-webdesign.com/pengenalan-tutorial-kendo-ui-jquery-html5-framework/