Menggunakan Fungsi clip Pada Jquery UI (user interface)

Halo teman-teman, apa kabar semua,,?? Pastinya sehat selalu ya dan makin baik setiap harinya. Berjumpa lagi dengan saya, pada artikel ini saya akan menjelaskan tentang Menggunakan Fungsi clip Pada Jquery UI (user interface), clip berfungsi untuk membuat slide dari tengah ke sisi atas dan sisi bawah dengan di bantu fungsi toggle. Oke pada latihan kali ini kita akan membuat slide clip dengan menggunakan gambar. Teman-teman siapkan code editornya dan gambar yang nanti kita akan gunakan, kemudian copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clip demo</title>
  <style>
  #toggle {
    width: 400px;
    height: 250px;
    background: #ccc;
  }
  </style>
</head>
<body>
 
<img id="toggle" src="clip.jpg">

ody>
</html>

Lalu paste kan di dalam code editornya, setelah itu save dengan nama index.html dan open to browse atau run pada browsernya. Maka akan menghasilkan output seperti gambar di bawah ini

Langkah selanjutnya, kita berikan fungsi clip pada gambar, teman-teman jangan lupa sertakan library Jquery dan Jquery UI nya di dalam tag <head>. 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, tambahkan script di bawah ini untuk menjalankan fungsi clip nya.

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

Setelah itu di save dan refreas pada browsernya, maka gambar akan di slade clip. Baik mungkin sekian dulu di artikel kali ini tentang Menggunakan Fungsi clip Pada Jquery UI mudah-mudahan bermanfaat dan menjadi tambahan ilmu untuk teman-teman. Sampai jumpa di artikel berikutnya dan Terimakasih

Indahnya berbagi 🙂

Baca juga artikel tentang Fungsi Bounce Pada Jquery UI (user interface)

Menggunakan Fungsi clip Pada Jquery UI

Kategori