"Bootstrap Tab ile Sipariş Listesi Yapmak"
Bootstrap 3.3.0 Snippet by webtasarimuzmani

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>sdfsdfsdf</title>
<div class="container">
<div class="row">
<section class="content">
<h1>Bootstrap Tab ile Sipariş Listesi Yapmak</h1>
<h2 class="text-center">Bootstrap Tab Nasıl Kullanılır?</h2>
<p class="text-center">Çok hızlı ve pratik bir şekilde kod yazmamızı sağlayan Bootstrap altyapısında "Tab" mantığını kullanarak siparişlerinizi kolayca listeleyebilirsiniz. Online Alışveriş siteleriniz, e-ticaret sitelerinde kullanabilirsiniz.
Ayrıca Tab Butonlarını renklendirebilir,
kişisel zevklerinize göre revizeler yapabilirsiniz. Boostrap 3 versiyonu ile uyumludur.
</p>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<div class="btn-group">
<button type="button" class="btn btn-default btn-filter" data-target="aktifsiparisler">Aktif Siparişlerim</button>
<button type="button" class="btn btn-default btn-filter" data-target="hazirlananlar">Hazırlananlar</button>
<button type="button" class="btn btn-default btn-filter" data-target="tedarik">Tedarik Edilemeyenler</button>
<button type="button" class="btn btn-default btn-filter" data-target="all">Tüm Siparişler</button>
</div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="aktifsiparisler">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
</div>
</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* --------------------------------------------------
:: General
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,500i,700,700i,900,900i&subset=latin-ext');
body {
font-family: 'roboto', sans-serif;
color: #353535;
}
.content h1 {
text-align: center;
}
.content .content-footer p {
color: #6d6d6d;
font-size: 12px;
text-align: center;
}
.content .content-footer p a {
color: inherit;
font-weight: bold;
}
/* --------------------------------------------------
:: Table Filter
-------------------------------------------------- */
.panel {
border: 1px solid #ddd;
background-color: #fcfcfc;
}
.panel .btn-group {
margin: 15px 0 30px;
}
.panel .btn-group .btn {
transition: background-color .3s ease;
}
.table-filter {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit Pro

Questions / Comments: