Azri Muslim

Cerita Kuliah....!!! Tempat Download Softwere News,Game,Cheate, Membahas Tentang Informasi Terkini Dan update Tiap Hari.....!!!!

Jumat, 28 Maret 2014

Artikel JQuery UI Pada WEB 2.0


Jquery bukan hal asing lagi ditelinga kita, jquery datang dengan banyak efek untuk website kita dan hampir menggantikan flash yang dulu juga di gunakan agar website kita terasa hidup dengan efek yang bisa kita ciptakan
Seiring banyaknya peminat jquery banyak juga developer yang mengembangkan dan membuat framework jquery sendiri, seperti JqueryUI, JqueryTools, Kendo UI dan masih banyak lagi.
Sekarang saya bukan mau menjelaskan secara detail apa itu jquery tapi hanya salah satu framework yang saya juga suka memakainya yaitu Kendo UI.
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.
Download :
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  :
1$(function() {
2$("#time").kendoTimePicker();
3$("#date").kendoDatePicker();
4});
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();

contoh1 Pengenalan dan Tutorial Kendo UI Jquery HTML5 Framework
Untuk contoh lain,Kendo UI masih banyak menyediakan example / contoh plugin didalam file zip yang teman-teman download.
Ini adalah full script diatas :
1<html>
2 <head>
3 
4<link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet"/>
5 
6<!--Base CSS styles and primitives-->
7 <link href="styles/kendo.common.min.css" rel="stylesheet"/>
8 
9<!--Theme specific styles-->
10 <link href="styles/kendo.default.min.css" rel="stylesheet"/>
11 </head>
12 
13<script src="js/jquery.min.js"></script>
14 <script src="js/kendo.web.min.js"></script>
15 <script src="examples/content/shared/js/console.js"></script>
16 <script type="text/javascript">
17 $(function() {
18 $("#time").kendoTimePicker();
19 $("#date").kendoDatePicker();
20 });
21 </script>
22 
23<body>
24 <div id="example" class="k-content">
25 Date : <input id="date" />
26 </div>
27 </body>
28 </html>
DEMO :
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.
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Archives

Template Information