CheckBox On-Off Yapımı (Bootstrap-Toggle) - Bootstrap ile Toggle Yapımı
Bootstrap
,
CSS
,
Javascript
,
Toggle
Checkbox Hepsini Seçme Yöntemi
Checkbox inputlarının hepsini seçmek için aşağıdaki yöntemi kullabilirsiniz.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
// End -->
</script>
<input type=button value="Hepsini Seç" onClick="this.value=check(this.form.silbox)">
Basit Responsive Menu Yapımı
HTML Kodları :
<div class="menu">
<div class="menuAc">Menüyü Aç</div>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
.menu {
overflow:hidden;
background-color:#111;
}
.menu ul li {
float:left
}
.menu ul li a {
display:block;
padding:10px 20px;
color:#fff;
border-right:1px solid #555;
}
.menu ul li a:hover {
background-color:#555;
}
.menuAc {
background-color:#fa6585;
padding:10px;
color:#fff;
font-weight:bold;
cursor:pointer;
display:none;
}
.content {
border:1px solid #ddd;
padding:10px;
margin:10px;
}
@media (max-width:700px) {
.menuAc {
display:block;
}
.menu ul {
display:none
}
.menu ul li{
float:none;
}
.menu ul li a{
border-right:none;
border-bottom:1px solid #555;
}
}
@media (min-width:700px){
.menu ul {display:block!important}
}JS KODLARI :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var a=0;
$('.menuAc').click(function(){
if (a==0){
$(this).text('Menüyü Gizle');
a++;
} else {
$(this).text('Menüyü Aç');
a=0;
}
$(this).next('ul').slideToggle(500);
});
});
</script>
Kaydol:
Kayıtlar
(
Atom
)