Tekhnik Dasar Penggunaan Jquery Ui

11 views

Apa itu Jquery?

Jquery ialah libary javascript. Maksdud dari libary disini bukan perpustakaan kayak di sekolah yah. Tapi libary disini ialah aba-aba siap pakai yang eksklusif sanggup kita terapkan. Sehingga kita tidak perlu membuat aba-aba dari nol lagi.

Apa itu Jquery UI?

Jquery UI ialah plugin dari jquery yang berkhasiat untuk membuat efek-efek interaktif pada halaman web. Karena Jquery UI ialah bab komplemen dari Jquery, maka kita tidak sanggup memakai Jquery UI sendiri. Hubungannya ibarat gula dan semut dah. Ibaratnya ada Jquery UI, harus ada Jquery pula.

Jadi jikalau begitu kita harus pelajari Jquery-nya dulu?

Tidak perlu juga sob. Karena pada pembahasan kali ini kita eksklusif pembelajaran praktisnya saja. Saya akan tunjukan betapa mudahnya penggunaan Jquery UI dengan begitu Anda sudah mempunyai pengetahuan dasarnya. Nanti jikalau Anda berhasil kemudian masih penasaran, makin bertambah motivasi buat mencar ilmu lebih dalam kan.

Oke deh, kita praktik saja. Pertama-tama buat folder latihan dengan nama ui pada folder htdocs. Lalu copy tiga file dari file sertaan yaitu jquery.js, jquery-ui.min.js dan jquery-ui.min.css kedalam folder ui. Selanjutnya didalam folder ui tersebut buat file gres dengan nama index.html. Buat aba-aba ibarat berikut

 

<html><head></head <body></body></html>

 

Selanjutnya kita akan melaksanakan instalasi komponen jquery di file index.html dengan menambahkan aba-aba berikut sempurna sebelum tag </head>

<link rel="stylesheet" href="jquery-ui.min.css"><script src="jquery.js"></script><script src="jquery-ui.min.js"></script>

 

Setelah menyertakan file yang diperlukan, Anda sanggup menambahkan aba-aba widget Jquery. Dalam teladan ini, kita akan membuat salah satu widget yaitu datepicker. terlebih kita akan buat elemen input teks ibarat ini:

<input type=”text” name=”date” id=”date”>

 Kode diatas ditulis sehabis tag pembuka <body>. Perhatikan aba-aba yang aku cetak tebal, itu nanti akan dipakai pada aba-aba Jquerynya.

Lalu pada bab tag <head> tulis aba-aba berikut

<script>$(function() { $( "#date" ).datepicker(); }); </script>

Lihat goresan pena yang aku cetak tebal, nah alasannya ialah pada seblumnya aku menuliskan atribut id. Maka pada aba-aba javascriptnya aku menuliskan #.

 

 

Oke hasil dari aba-aba diatas akan ibarat ini

.

Bagaimana? Cukup gampang bukan? Hanya mengetikan beberapa baris aba-aba sudah sanggup menciptkan imbas atraktif ibarat itu. Bagi yang pernah mencicipi mencar ilmu CSS dan Javascript manual, niscaya penuh usaha membuat imbas ibarat itu.

Oke itulah dasar penerapan Jquery UI dengan widget Datepicker. Selain Date picker masih banyak loh widget yang tersedia. Berikut daftar widget yang tersedia

Ingat yah,beda widget beda penerapan kodingnya juga. Contoh lagi nih aku akan memakai widget Accordion. Seperti ini teladan kodingannya

<html>  <head> <link rel="stylesheet" href="jquery-ui.min.css"> <script src="jquery.js"></script> <script src="jquery-ui.min.js"></script> <script>  $(function() {$( "#accordion" ).accordion();  });  </script></head><body><div id="accordion">  <h3>Section 1</h3>  <div>Test 1  </div>  <h3>Section 2</h3>  <div><p>Bagaimana? Cukup gampang bukan? Hanya mengetikan beberapa <br>baris aba-aba sudah sanggup menciptkan imbas atraktif ibarat itu. <br>Bagi yang pernah mencicipi mencar ilmu CSS dan Javascript manual<br>pasti penuh usaha membuat imbas ibarat itu.<br></p>  </div>  <h3>Section 3</h3>  <div>Test 3<ul>  <li>List item one</li>  <li>List item two</li>  <li>List item three</li></ul>  </div></div></body></html>

                                  

Untuk widget accordion ini, penerapannya memakai elemen div dengan id accordion. Hasilnya akan nampak ibarat gambar berikut

 

Terlihat biasa aja? Yah jikalau Anda sudah praktikan niscaya akan takjub juga dengan hasilnya. Maka dari itu eksklusif praktikan, (ketahuan masih baca doang, hehe).

Nah itulah penerapan dasar dari Jquery UI. Sederhana? Terlalu biasa? Nanti pada artikel selanjutnya (entah kapan) aku  berikan teladan penerapannya pada sistem website yang sudah jadi. Terima kasih atas kehadirannya disini, agar sanggup bermanfaat.

Author: 
    author
    No related post!