Cara Menggunakan Fungsi Explode Jquery UI (user interface)

Haii… teman-teman, apa kabar..? Pastinya baik ya, jumpa lagi dengan saya. Pada artikel sebelumnya kita sudah membahas tentang beberapa fungsi dari Jquery UI (user interface), di artikel kali ini saya juga akan membahas tentang Cara Menggunakan Fungsi Explode Jquery UI (user inteface). Metode explode berfungsi untuk memberikan efek terbelah dan menyatu ketika di klik, dan dibantu oleh fungsi toggle. Keduanya adalah gabungan dari Jquery dan Jquery UI, baik langsung saja kita praktekkan. Teman-teman siapkan code editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Explode</title>
  <style>
    *{padding: 0; margin: 0}
    body{background: gray}
    #toggle {
    width: 500px;
    height: 500px;
    }
  </style>
</head>
<body>
 <center>
 <img id="toggle" src="dumetschool.png">
 </center>
</body>
</html>

Kemudian pastekan di code editornya, save dengan index.html dan open to browse atau run pada browsernya. Nah hasil nya seperti gambar di bawah ini

Nah pada latihan kali ini saya juga menggunakan gambar untuk diberikan fungsi explode. Teman-teman boleh menggunakan gambar apa saja, langkah berikutnya kita berikan fungsi explode nya. Jangan lupa berikan library nya terlebih dahulu, atau bisa juga copy script di bawah ini

<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 kita tambahkan fungsi explode nya

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

Kemudian save dan refreas pada browsernya, maka gambar berhasil di berikan fungsi explode jika di klik gambar akan menghasilkan efek terbelah dan menyatu. Oke sangat mudah bukan..?? Mungkin sekian dulu di artikel ini tentang Cara Menggunakan Fungsi Explode Jquery UI mudah-mudahan bermanfaat dan bisa menjadi inspirasi untuk teman-teman yang saat ini sedang mengembangkan skill khususnya di dalam Jquery. Sampai jumpa di artikel berikutnya dan Terimakasih.

Baca juga artikel tentang Membuat Logo Google Chrome dengan CSS.

Cara Menggunakan Fungsi Explode Jquery UI

Kategori