Cara Menggunakan Fungsi blind dan drop Pada jQuery UI

Halo teman – teman semuanya, selamat datang di website tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips bagaimana Cara Menggunakan Fungsi blind dan drop Pada jQuery UI dimana fungsi ini juga dimiliki jQuery UI dan fungsi blind, drop ini biasa kita pakai di dalam css untuk menghailkan efek. Kali ini kita akan tuangkan ini di dalam jQuery UI,

blind – Menunjukkan atau menyembunyikan elemen: dengan memindahkan tepi bawah atau ke atas, tepi kanan ke kiri, tergantung pada ditentukan direction dan mode nya. Dimana hasilnya akan slide keatas dan kebawah ketika di klik pada area nya.
Menunjukkan atau menyembunyikan elemen dengan membuatnya tampak drop ke kiri dan kekanan, atau drop off dari, halaman sebelah kiri.

Baik,langsung saja kita implementasikan Cara Menggunakan Fungsi blind dan drop Pada jQuery UI. Teman – teman copy script htmlnya di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><strong>Cara Menggunakan Fungsi blind dan drop Pada jQuery UI</strong></title>
</head>
<body>
   <p>Klik Pada Kotak</p>
   <div id="toggle"></div> 
</body>
</html>

Dan pastekan pada text editornya, kemudian save dengan index.html. Setelah itu masukkan script css nya

<style>
 #toggle {
 width: 100px;
 height: 100px;
 background: orange;
 }
 </style>

Jika sudah save, dan jalankan pada browsernya. Maka hasilnya seperti gambar di bawah ini

Langkah berikutnya kita panggil id dan berikan fungsi jQuery UI nya

<script>
$( document ).click(function() {
 $( "#toggle" ).toggle( "blind" );
});
</script>

Berikan library jQuery UI dan jQuery nya

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jika sudah save dan refresh pada browsernya, lalu klik kotak warna orange maka kotak akan slide ke atas dan kebawah karena kita berikan fungsi blind. Nah yang selanjutnya kita ganti blind dengan drop

Maka hasilnya akan slide ke kiri dan ke kanan, untuk script lengkapnya seperti di bawah ini

Mudah sekali ya teman – teman, baik sekian pada artikel kali ini tentang Cara Menggunakan Fungsi blind dan drop Pada jQuery UI kita jumpa lagi di tips dan trik yang akan datang. Semoga bermanfaat untuk kalian yang khususnya baru belajat jQuery Mobile. Terimakasih dan Sampai Jumpa.

Cara Menggunakan Fungsi blind dan drop Pada jQuery UI

Kategori