- Katılım
- 29 Ağustos 2014
- Mesajlar
- 2.961
Daha fazla
- Cinsiyet
- Erkek
Checkbox'a göre çok daha işlevsel bir eleman. Tıkladığınız anda gizli olan checkbox'ı işaretliyor. İstediğiniz gibi kullanabilirsiniz.
Bu Youtube'daki buton.
Bu da benim yaptığım buton.
Bu Youtube'daki buton.
Bu da benim yaptığım buton.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Youtube Button</title>
<style type="text/css">
.background{
width: 36px;
height: 14px;
background: #999999;
border-radius: 36px;
margin-bottom: 10px
}
button{
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: #FAFAFA;
position: relative;
top: -3px;
outline: none;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
}
</style>
<script type="text/javascript">
$(function(){
var tiklama=0;
$("div.background").click(function(){
if (tiklama==0) {
$("div.background button").animate({"marginLeft": "17px"}, 50);
$("div.background").css({"background": "#93C9F3"});
$("div.background button").css({"background": "#2693E6"});
$('.myCheckbox').prop('checked', true);
tiklama=1;
}
else{
$("div.background button").animate({"marginLeft": "0px"}, 50);
$("div.background").css({"background": "#999999"});
$("div.background button").css({"background": "#fafafa"});
$('.myCheckbox').prop('checked', false);
tiklama=0;
}
});
});
</script>
</head>
<body>
<div class="background">
<button></button>
<input type="checkbox" name="" class="myCheckbox" style="display: none">
</div>
</body>
</html>
Son düzenleme: