Membuat Menu Select Menggunakan Plugin Jquery Ui Hide

Hallo pada kesempatan ini saya akan memberikan sebuah tips dan trik atau tutorial sebuah menu select menggunakan Plugin Jquery Ui Hide. di sini saya tidak akan menjelaskan lagi apa itu jquery dan apa itu jquery UI, untuk penjelasan keduanya itu silahkan teman – teman semua cari pada artikel saya sebelumnya, yaitu pada perbedaan jquery dan jquery UIÂ .Oke langsung saja saya akan mempraktekkan nya silahkan teman – teman ikuti langkah – langkah berikut ini;

silahkan buat text seperti dibawah ini;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Effects - Hide Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Hide</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
 
 
</body>
</html>

Oke kalau sudah tambahkan style berikut ini,Â untuk mengatur class toggler pada website yang kita buat.

<style>
  .toggler { width: 500px; height: 200px; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
  #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>

Oke kalau sudah tambah script file jquery berikut ini pada tag head, untuk menjalankan fungsi Plugin Jquery Ui Hide

 <script>
  $( function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
 
      // Most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 50 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // Run the effect
      $( "#effect" ).hide( selectedEffect, options, 1000, callback );
    };
 
    // Callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };
 
    // Set effect from select menu value
    $( "#button" ).on( "click", function() {
      runEffect();
    });
  } );
  </script>

Oke kalau sudah silahkan teman – teman save dan jalankan pada browsernya maka hasilnya akan seperti dibawah ini

teman – teman juga bisa melihat hasil demonya di bawah ini,

demo

semoga bermanfaat.

Membuat Menu Select Menggunakan Plugin Jquery Ui Hide

Kategori