Kumpulan Effect Cantik Toggle yang ada di Jquery UI -

Toggle ada fungsi dimana kita mempunyai sebuah biasanya button, pokoknya yang mengganti value awal ke value yang lain, di Jquery UI ini terdapat fungsi toggle yang cukup menarik dimana effectnya itu mempunyai ciri khas masing-masing, dan d jquery UI ini di mudah kan menggunakannya, oke lalu ada apa saja kumpulan effect cantik toggle yang ada di Jquery UI, simak terus ya teman-teman.

Oke mungkin teman-teman bertanya ya maksud dari effect ini apa ? Maksud dari effect ini adalah ketika teman-teman menekan atau mengganti sebuah button, effectnya adalah konten yang tampil dan hilang saya proses event berjalan, jadi effect tampil dan hilang ini akan lebih cantik ketika kita menggunakan effect ini, sudah sedikit paham ya, jika sudah inilah kumpulan effect cantik toggle yang ada di Jquery UI :

blind
bounce
clip
drop
explode
fade
fold
highlight
puff
pulsate
scale
shake
size
slide

nanti effect itu akan saya masukan kedalam value option dan saya akan menggunakan event change supaya ketika beganti dengan valu lainya konten target kita menampilkan effectnya, oke langsung saja, disini kita masukan linknya terlebih dahalu:

ini Link CDN CSS
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

ini link scriptnya
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jika sudah saya menggunakan Template seperti ini:

<div class="container mt-3">
<div class="row">
	<div class="offset-md-4 col-md-4">
		<h2 class="text-center">Effect Cantik Toggle yang ada di Jquery UI</h2>
		<hr>
		<div class="toggler">
			<div class="list-group">
			  <button type="button" class="list-group-item list-group-item-action ">
			    Cras justo odio
			  </button>
			  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
			  <button type="button" class="list-group-item list-group-item-action active" id="effect">Morbi leo risus</button>
			  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
			  <button type="button" class="list-group-item list-group-item-action" >Vestibulum at eros</button>
			</div>
		</div>
		<hr>
		<select name="effects" id="effectTypes" class="form-control mt-4">
		  <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>
	</div>	
</div>
</div>

disini saya mengguakan bootstrap ya, jangan lupa class toggler dan id effect adalah targetnya, oke sekarang ini adalah scriptnya:

$( function() {
	function runEffect() {
	  var selectedEffect = $( "#effectTypes" ).val();
	  var options = {};
	  if ( selectedEffect === "scale" ) {
	    options = { percent: 50 };
	  } else if ( selectedEffect === "size" ) {
	    options = { to: { width: 200, height: 60 } };
	  }

	  // Run the effect
	  $( "#effect" ).toggle( selectedEffect, options, 500 );
	};

	// Set effect from select menu value
	$( "#effectTypes" ).on( "change", function() {
	  runEffect();
	});
} );

Dsini menggunakan function runEffect() dimana function ini berjalan ketika saya memindahkan value optionya, seperti itu, oke bagaimana cukup menarik bukan jika teman-teman ingin melihat hasilnya silahkan lihat disini dan disini adalah gambarannya:

Sebenarnya untuk penggunakan toggle itu lebih cocoknya kita menggunakan button ya, karena toggle itu kan sifatnya menampilkan dan menghilangkan di pada event tetapi disini saya iseng saja menggunakan change, nanti teman-teman pakai button saja ya, oke saya rasa cukup sampai disini tentang kumpulan effect cantik toggle yang ada di Jquery UI, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Kumpulan Effect Cantik Toggle yang ada di Jquery UI

Kategori