ariona.net logo

ariona.net

Membuat “Slide to Unlock” dengan Jquery

—

Membuat animasi “Slide to unlock” seperi pada iPhone dengan bantuan jQuery

iPhone

Demontrasi
Pada tema sebelumnya, ariona.net menyertakan Slider untuk merubah bahasa. Yang tadinya secara default bahasa Inggris, anda tinggal menslide (menggeser) slider ke bendera Indonesia, bahasa situspun berubah menjadi bahasa Indonesia, begitu juga sebaliknya.

Ide awal pembuatan Widget (saya sebut saja widget) tersebut berawal dari Lock screen pada iPhone. jika Screen iPhone dalam keadaan terkunci, kita harus menslide untuk membukanya. sebuah konsep Lock screen yang menyenangkan untuk smartphone dengan fitur touchscreen.

Namun, kali ini saya akan menerapkannya pada widget perubah bahasa. widget ini dibuat dengan jQuery dan sedikit polesan CSS :).

HTML

pertama-tama kita buat terlebih dahulu markup HTMLnya sebagai berikut :

<div id="container">
	<div id="unlock-slider-wrapper">
		<div id="unlock-slider">
			<div id="unlock-handle" style="left: 0px; "></div>
		</div>
	</div>
</div>

markup overview

<div id="container"> akan kita gunakan untuk memberikan background terhadap widget dan menentukan ukuran Widget yang akan kita buat
<div id="unlock-slider-wrapper"> digunakan untuk wrapper slider kita akan tambahkan background bendera disini
<div id="unlock-slider"> kita akan mendefinisikan tempat untuk area slider yang akan dibuat, bisa dibilang jalannya. dan
<div id="unlock-handle"> adalah handle untuk menslidenya (tombol panah untuk menslide).

CSS

Saatnya mendandani Markup yang telah kita buat, sebelumnya anda dapat mendownload beberaa resource berikut ini. 🙂 background Background Flag handle

#container{
	background-image:url("backgroud.jpg");
	width:420px;
	height:80px;
	margin:0 auto;
}
#unlock-slider-wrapper{
	background-image:url("flag.jpg");
	padding:19px 18px;
}
#unlock-slider{
	width:390px;
	height:42px;
	position:relative;
}
#unlock-handle{
	background-image:url("handle.png");
	position: absolute; 
	z-index: 10; 
	height: 44px; 
	width: 68px; 
	top: 0px; 
	left: 0px;
}
.id{
	display:none;
}

Yep, Selesai menyiapkan UI nya, kita lanjut ke fungsional dari apa yang akan kita buat!

Jquery

Kita akan menggunakan Library JQuery, JQuery UI dan JQuery Core. ketiganya dibutuhkan untuk fungsionalitas dari slider yang akan kita buat. jadi tambahkan baris kode berikut di bagian <head> anda.

	<script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/ui.core-1.5.3.js"></script>
	<script type="text/javascript" src="http://dl.dropbox.com/u/26808427/cdn/ariona/script/ui.slider.js"></script>

Script di download langsung dari filesharing Dropbox saya :).
selanjutnya adalah penambahan kodenya.

$(document).ready(function(){
	$("#unlock-slider").slider({
		handle: "#unlock-handle",
		animate:true,
		stop: function(e,ui){
			if($("#unlock-handle").position().left == 322){
				$(".id").show();
				$(".en").hide();
			} else {
				$("#unlock-handle").animate({left: 0}, 200 );
				$(".id").hide();
				$(".en").show();
			}
		}
	});
});

huuft.. pusing? tenang saya jelaskan satu persatu :).

Kode baris ke 1

pertama-tama kita akan cek apakah dokumen html telah siap dalam arti lain telah di load semuanya. jadi kita masukka fungsi-fungsi yang akan kita buat disini 🙂

Baris ke 2-5

adalah fungsi dari slider yang akan dibuat, fungsi ini berasal dari jQuery ui.slider.
pertama, kita definisikan jalur slider (dengan jQuery selector $(‘#unlock-slider’)) dan menambahkan event slider, dengan value sebagai berikut :
handle : untuk mendefinisikan handle dari slider (yang akan kita drag).
animate : untuk menambahkan animasi, ketika kita melepas dragging.
stop : kondisi ketika handle berhenti di drag.

Baris ke 2-10

Merupakan kondisi ketika stop terjadi. kita kondisikan jika handle berhenti di 322 pixel, maka kita akan menampilkan tag dengan class id dan menyembunyikan tag dengan class .en, dan jika handle tidak mencapai posisi 322px, maka kita akan mengembalikan slider ke semula titik 0px. 🙂

Pengujian

Oke, untuk mengujinya kita perlu tagyang akan tampil dan hilang, yaitu tag dengan class id dan en. jadi tambahkan tag dengan class tersebut, contohnya.

<p class="id"">Yep, paragraf ini berbahasa Indonesia, Untuk merubahnya menjadi bahasa Inggris silahkan Slide ke bendera Inggris 🙂 </p>
<p class="en">Hello, This demo will show you how to create iPhone like slider, to change some element. try to slide it to Indonesian Flag, and see what's going on.</p>

 
Demontrasi
 

Sumber Referensi

CSS-tricks (iPhone

Category JavascriptTag , , ,

10 Komentar untuk “Membuat “Slide to Unlock” dengan Jquery”

  1. Ping-balik: Membuat CSS3 Generator | ariona

  5. Mau nanya kode ini

    $(document).ready(function(){
    $(“#unlock-slider”).slider({
    handle: “#unlock-handle”,
    animate:true,
    stop: function(e,ui){
    if($(“#unlock-handle”).position().left == 322){
    $(“.id”).show();
    $(“.en”).hide();
    } else {
    $(“#unlock-handle”).animate({left: 0}, 200 );
    $(“.id”).hide();
    $(“.en”).show();
    }
    }
    });
    });

    ditaruh dimana, udah bolak-balik utak-atik ga bisa juga :'(

    Balas

Tinggalkan Komentar Anda