Skip to main content

Posts

Showing posts with the label Belajar jQuery

jQuery : Accordion

Accordion Salah satu fungsi dari jQuery adalah membuat Accordion menu dimana Accordion menu ini dapat meringkas tampilan dan juga dapat memperindah tampilan web anda. Pada artikel ini saya akan membuat Accordion sederhana yang kita ciptakan disini membutuhkan sedikit fungsi jQuery tanpa plugin. Oke langsung saja yang pertama kita akan membuat daftar list untuk menu yang akan kita buat. Ketikkan atau copy listing program berikut : <html> <head> <title></title> </head> <body> <ul class="accordion"> <li>Web Master</li> <ul> <li><a href="#">HTML CSS</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">PHP MYSQL</a></li> </ul> <li>Web Desaign</li> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">Javascript</a>...
Post a Comment
Baca Lebih »

j-Query : Datepicker

Datepicker Bagi para developer web mesti tidak merasa asing lagi dengan jQuery DatePicker. Ini biasa digunakan dalam pengembangan web yang memerlukan input penanggalan berdasarkan kalender yang dilekatkan pada bidang form input. Cara kerja yang sederhana, DatePicker ini berfokus pada input (klik, atau menggunakan tombol tab) untuk membuka sebuah kalender interaktif dengan sedikit overlay. Pilih tanggal, klik di tempat lain pada halaman (blur input), atau tekan tombol Esc untuk menutup. Jika tanggal yang dipilih, umpan balik ditampilkan sebagai nilai input. JQuery UI Datepicker adalah plugin sangat dapat dikonfigurasi yang menambahkan fungsi datepicker ke halaman Anda. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi rentang tanggal yang dipilih dan menambahkan tombol dan pilihan navigasi lainnya dengan mudah. Secara default, kalender datepicker terbuka dengan sedikit overlay ketika bidang teks terkait mencapai fokus. Untuk kalender inline, cukup melampirkan date...
Post a Comment
Baca Lebih »

j-Query : Berkreasi Dengan Plugin Jquery UI

Berkreasi Dengan Plugin Jquery UI logo j-Query jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer jQuery. Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat oleh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen library pelengkap jQuery, diantaranya : Accordion Datepicker Tabs Dialog Progressbar Slider Effect/animasi Drag and Drop Dan lain-lain Selanjutnya, bagian berikut akan membahas cara penggunaan beberapa komponen library dari jQuery UI. Instalasi jQuery UI 1.Download jQuery UI di http://jqueryui.com/download/ maka akan tampil halaman downloadnya, Scrol ke bawah sampai ketemu button download, klik download maka file jQuery UI (jquery-ui- 1.11.4.custom.rar) akan tersimpan di komputer anda. 2. Filenya masih berbentuk kompresi (jquery-ui-1.11.4.custom.rar) , oleh karena itu gunakan program winzip/winrar un...
Post a Comment
Baca Lebih »

jQuery : Effect

Effect Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut. A. Efek Fade() Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahanlahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln,fadeOut,danfadeTo. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut : <html> <head> <script type="text/javascript" src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $(".fadeout").click(function(){ $("#kotak").fadeOut("slow"); }); $(".fadein").click(function(){ $("#kotak").fadeIn("slow"); }); $(".fadeto3").click(function(){ $("#kotak").fadeTo("slow",0.3); }); ...
6 comments
Baca Lebih »

jQuery : Events

Events Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.  A. Event Click() Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini : <html> <head> <script type="text/javascript" src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('a').click(function(){ alert("Selamat datang di website Fajar Yusuf") }); }); </script> </head> <body> <a href="www.fajarmyusuf.blogspot.co.id">Klik disini untuk menuju halaman ...
Post a Comment
Baca Lebih »

jQuery : Memahami Selector & Instal, latihan jQuery

Memahami Selector Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut : 1. Nama Tag 2. Id 3. Class Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan disajikan beberapa contoh sederhana pada bagian berikutnya. Selector Tag Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya. Selector Id Cara menggunakan Selector id adalah dengan menyertakan tanda pagar(#) sebelum nama elemennya. Selector Class Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum nama elemennya. Latihan-latihan berikut untuk menjelaskan teori diatas. Sekarang untuk penginstalan JQuery silakan kalian copykan code berikut yang ada didalam link kotak listing lalu beri nama jquery-1.12.4.min.js : http...
Post a Comment
Baca Lebih »

Mengenal Lebih jQuery

Mengenal Lebih jQuery Apa itu jQuery? jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”. Mengapa memilih jQuery? Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain: Kompatibel dengan hampir seluruh browser jQuery telah digunakan oleh website-website raksasa Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com Didukung oleh banyak komunitas Disupport oleh plugin yang lengkap Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb Open source atau Free jQuery lebih diminati oleh para developer web saat ini Apa kemampuan yang dimiliki jQuery? Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak k...
Post a Comment
Baca Lebih »