Cara menggunakan JQUERY-UI pada JavaScript

Table of Contents Show

Fitur dari jQweryUI
Manfaat dari JqueryUI
Download JqueryUI
Apakah jQuery termasuk JavaScript?
Bahasa scripting apa yang digunakan jQuery?
Apa saja yang bisa dilakukan jQuery?
Apa itu file jQuery?

JqueryUI adalah dibangun di atas library JavaScript jQuery yang kuat. UI singkatan dari interface / antarmuka pengguna. Itu adalah satu set plugin untuk jQuery yang menambah fungsionalitas baru ke library inti jQuery.

Termasuk yang mengatur plug-in di JqueryUI interface interaksi, efek, animasi, widget, dan tema-tema yang dibangun di atas jQuery JavaScript Library.

Postingan Terkait : Pengertian dan manfaat JavaScript dalam membangun Website

Rilis pertama sekali pada bulan September 2007, diumumkan dalam posting blog daro John Resig pada jquery.com. Rilis terbaru, 1.10.4, memerlukan jQuery 1,6 atau versi sesudahnya.

jQuery UI adalah perangkat lunak gratis, open source, yang berlisensi di bawah lisensi

MIT

*Institut Teknologi Massachusetts (Massachusetts Institute of Technology atau MIT), adalah institusi riset swasta dan universitas yang terletak di kota Cambridge, Massachusetts tepat di seberang Sungai Charles dari distrik Back Bay di Boston, Amerika Serikat.

Fitur dari jQweryUI

JqueryUI dikategorikan ke dalam empat kelompok, Interactions, widgets, Effect, Utilities. Ini akan dibahas secara rinci dalam postingan berikutnya. Struktur library seperti ditunjukkan pada gambar di bawah ini:

Interactions - Merupakan plugin yang interaktif seperti drag, drop, mengubah ukuran dan lebih yang memberikan pengguna kemampuan untuk berinteraksi dengan DOM elemen.
Widgets - Menggunakan widget yang jQuery plugin, Anda dapat membuat elemen antarmuka pengguna seperti datepicker accordian, dll.
Effect - ini dibangun pada efek internal jQuery.
Utilities - ini adalah satu set tools modular librart JqueryUI digunakan secara internal.

*Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis.

Manfaat dari JqueryUI

APIs kohesif dan konsisten.
Dukungan komprehensif Browser
Open Source dan bebas untuk digunakan
Dokumentasi yang baik, dan mudah ditemukan.
Mekanisme tema yang powerfull.
Stabil dan mudah dalam pemeliharaan.

Download JqueryUI

Sekarang kita akan download dan set up JqueryUI dari librari. Kami juga secara singkat akan mempelajari struktur direktori dan isinya. Perpustakaan JqueryUI dapat digunakan dalam dua cara halaman web Anda:

Men-download library UI dari webiste resmi
Men-download library UI dari CDNs

Download perpustakaan UI dari webiste yang resmi

Ketika Anda membuka link http://jqueryui.com/, Anda akan melihat ada tiga opsi untuk men-download JqueryUI Perpustakaan:

Costum Download - klik tombol ini untuk men-download versi yang disesuaikan pada library.
Stable- klik tombol ini untuk mendapatkan versi librariy JqueryUI yang stabil dan terbaru.
Legacy - klik tombol ini untuk mendapatkan rilis utama sebelumnya library JqueryUI .

Postingan Terkait

Pengertian dan manfaat JavaScript dalam membangun Website
Fitur dan Kinerja PHP 7
Mengenal Bahasa Pemograman HTML

Jquery merupakan sebuah library javascript yaitu berupa kumpulan kode-kode javascript yang siap pakai. Lalu hadir lah sebuah jquery-ui atau jquery user interface dimana bertujuan untuk mengembangkan aplikasi berbasis website dari segi user interface atau bisa dibilang khusus pada bagian front-end.

Pada kesempatan kali ini kita akan membahas tentang Cara Penggunaan effect() pada Gambar menggunakan Jquery-ui. Jquery-ui menyediakan banyak sekali fitur-fitur yang dapat kita gunakan dalam mengembangkan aplikasi kita terutama pada bagian front-end dan teman-teman dapat melihat dan mempelajari fitur-fiturnya diwebsite resminya yaitu http://jqueryui.com.

Namun dipembahasan kali ini kita hanya membahas salah satu fitur yang terdapat pada jquery-ui yaitu effect(). Sebenarnya effect() juga ada pada jquery namun saya disini menggunakan jquery-ui lebih praktis dan mudah.

Sebagai contoh mari kita praktekan, buatlah folder terlebih dahulu, kemudian siapkan sebuah gambar dan letakan didalam folder tsb. Disini saya menggunakan gambar dibawah ini :

Jika sudah, langkah selanjutnya jalankan/run text-editor yang teman-teman gunakan, lalu ketiklah script seperti pada gambar dibawah ini :

Jika sudah, penjelasan pada kode diatas kita membutuhkan sebuah library jquery dan jquery-ui, lalu kita tambahkan sedikit style untuk merubah jenis cursor dan ketika kita klik maka kita berikan effect/animasi berupa explode pada element gambar tsb.

Jika sudah simpan, kemudian silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Maka hasilnya akan menjadi seperti pada gambar dibawah ini :

Dari hasil gambar diatas merupakan sebuah effect explode yang sudah disediakan oleh jquery-ui. Untuk kedepannya silahkan teman-teman baca baca diwebsite resminya jquery-ui disana sudah disediakan berbagai macam animasi.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Penggunaan effect() pada Gambar menggunakan Jquery-ui. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Apakah jQuery termasuk JavaScript?

jQuery adalah Library JavaScript yang akan mempercepat proses pembuatan website. Keistimewaan dari jQuery adalah kesederhanaannya yang bisa digunakan programmer pemula karena sintaksnya tidak terlalu rumit.

Bahasa scripting apa yang digunakan jQuery?

Salah satu yang paling sering digunakan adalah jQuery, library JavaScript yang dirancang untuk menyederhanakan scripting HTML.

Apa saja yang bisa dilakukan jQuery?

Namun jQuery bisa membantu Anda untuk lebih mudah memahami dan menggunakan JavaScript untuk proses pengembangan aplikasi web..

Manipulasi HTML/DOM..

Manipulasi CSS..

HTML Event Methods..

Efek dan Animasi..

CSS3 Compliant..

Cross-Browser..

Apa itu file jQuery?

jQuery adalah library JavaScript open-source yang di-minify dan dibuat untuk operasi JavaScript yang disederhanakan. Anda bisa menggunakan jQuery untuk coding serangkaian perintah dengan cepat, yang pada dasarnya akan memerlukan waktu lebih lama apabila menggunakan kode HTML.