Ana Sayfa Web programlama Php CSS3 ve jQuery kullanarak iOS Stil Düğmesi yapalim

CSS3 ve jQuery kullanarak iOS Stil Düğmesi yapalim

Yazar

9 Şubat 2015

711

CSS3 ve jQuery kullanarak iOS Stil Düğmesi yapalim

IOS da kullanilan ac kapa buton dugmesini Css3 ve jquery ile harmanlayip islevsel bir uygulama hazirlamaya karar verdim. Daha dogrusu burdaki konuyu gorunce, neden bizde de olmasin dedim. Ilerleyen zamanlarda illaki benimde isime yarayacak bir uygulama, hazirlanmasi ve duzenlenmesi kolay. Ben uygulamalariniza ekleyebileceginiz sekilde hazirladim,

Download (indir) Demo

Ben ilk olarak hazirladigim uygulamanin kodlarini paylasacagim, Gerekli aciklamalari sonlara dogru yapacagim. Yinede uygulamanin kodlarini yazarken gerekli aciklamalari yapmaya calistim.

<?php 

// kucuk buton icin default deger
$kucuk_buton_default_durumu = "on";

// buyuk buton icin default deger
$buyuk_buton_default_durumu = "";

// post islemine gore durum kontrolleri
$kucuk_buton_durum = (isset($_POST["checkbox_kucuk"]) && $_POST["checkbox_kucuk"] == "on" ? true : (empty($_POST) && $kucuk_buton_default_durumu == "on" ? true : false));

$buyuk_buton_durum = (isset($_POST["checkbox_buyuk"]) && $_POST["checkbox_buyuk"] == "on" ? true : (empty($_POST) && $buyuk_buton_default_durumu == "on" ? true : false));
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="kuaza">
 
    <title>Kuaza - CSS3 ve jQuery kullanarak iOS Stil Düğmesi</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>	
	<script>
	$(document).ready(function(){
	
	// kucuk buton icin js islemleri
	$('.s_buton_kucuk').click(function(){
		var kucuk_icerik = $('#checkbox_kucuk').val();
		
		if(kucuk_icerik && kucuk_icerik == "on"){
			
			$('#checkbox_kucuk').val('');
			
		}else{
			
			$('#checkbox_kucuk').val('on');
			
		}
			$(this).toggleClass("s_buton_kucuk_ac");
	});
	
	// buyuk buton icin js islemleri
	$('.s_buton_buyuk').click(function(){
		var buyuk_icerik = $('#checkbox_buyuk').val();
		
		if(buyuk_icerik && buyuk_icerik == "on"){
			$('#checkbox_buyuk').val('');
			
		}else{
			$('#checkbox_buyuk').val('on');
			
		}
		
			$(this).toggleClass("s_buton_buyuk_ac");
	});
	
	});
	</script>
	
	<style>
	.s_buton_kucuk {
	width: 62px;
	height: 32px;
	background: #e5e5e5;
	z-index: 0;
	margin: 0;
	padding: 0;
	appearance: none;
	border: none;
	cursor: pointer;
	position: relative;
	border-radius:16px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	}

	.s_buton_kucuk:before {
	content: ' ';
	position: absolute;
	left: 1px;
	top: 1px;
	width: 60px;
	height: 30px;
	background: #fff;
	z-index: 1;
	border-radius:16px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	}

	.s_buton_kucuk:after {
	content: ' ';
	height: 29px;
	width: 29px;
	border-radius: 28px;
	background: #fff;
	position: absolute;
	z-index: 2;
	top: 1px;
	left: 1px;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
	-webkit-box-shadow: 0 2px 5px #999999;
	box-shadow: 0 2px 5px #999999;
	}
	.s_buton_kucuk_ac,.s_buton_kucuk_ac:before
	{
	background: #4cd964 !important;
	}

	.s_buton_kucuk_ac:after
	{
	left: 32px !important;
	}

	.s_buton_buyuk {
	width: 200px;
	height: 105px;
	background: #e5e5e5;
	z-index: 0;
	margin: 0;
	padding: 0;
	appearance: none;
	border: none;
	cursor: pointer;
	position: relative;
	border-radius:53px;
	-moz-border-radius:53px;
	-webkit-border-radius:53px;
	}

	.s_buton_buyuk:before {
	content: ' ';
	position: absolute;
	left: 2px;
	top: 2px;
	width: 196px;
	height: 101px;
	background: #fff;
	z-index: 1;
	border-radius:52px;
	-moz-border-radius:52px;
	-webkit-border-radius:52px;
	}

	.s_buton_buyuk:after {
	content: ' ';
	height: 100px;
	width: 100px;
	border-radius: 52px;
	background: #fff;
	position: absolute;
	z-index: 2;
	top: 2px;
	left: 2px;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
	-webkit-box-shadow: 0 2px 5px #999999;
	box-shadow: 0 2px 5px #999999;
	}

	.s_buton_buyuk_ac, .s_buton_buyuk_ac:before
	{
	background: #4cd964 !important;
	}

	.s_buton_buyuk_ac:after
	{
	left: 98px !important;
	}
	</style>	
	
  </head>

  <body>

    <div class="clearfix">

		<form style="text-align:center;" action="" method="post">
		<div class="clearfix">
			<label>
			<input type="hidden" id="checkbox_kucuk" name="checkbox_kucuk" class="checkbox" value="<?php if($kucuk_buton_durum) { ?>on<?php } ?>" /> 
			<div class="s_buton_kucuk <?php if($kucuk_buton_durum) { ?>s_buton_kucuk_ac<?php } ?>"></div>
			</label>
		</div>
		<div class="clearfix">
			<label>
			<input type="hidden" id="checkbox_buyuk" name="checkbox_buyuk" class="checkbox" value="<?php if($buyuk_buton_durum) { ?>on<?php } ?>" />
			<div class="s_buton_buyuk <?php if($buyuk_buton_durum) { ?>s_buton_buyuk_ac<?php } ?>"></div>
			</label>
		</div><hr>
		<button type="submit" class="">gonder</button>
		</form>
		
      </div>
 
  </body>
</html>

Default buton degerlerini ayarlamak icin asagidaki alani kendinize gore duzenleyebilirsiniz. Buton acik olacaksa “on”, kapali olacaksa bos birakmaniz gerekli:

// kucuk buton icin default deger
$kucuk_buton_default_durumu = "on";

// buyuk buton icin default deger
$buyuk_buton_default_durumu = "";

Yaziyi yazarken keske “on” kismini “acik” seklinde degistirseydim diye dusundum, ancak gec oldu, bu sekilde idare edelim, kucuk bir aliskanlikdan kaynaklaniyor :)

Uygulamada iki tane buton stili bulunuyor, birisi kucuk, digeri buyuk. Farkli bir boyutda olusturmak isterseniz css kisminda duzenleme yapmaniz yeterli olacaktir.