Teknik Menampilkan Data Secara List atau Grid dengan Jquery

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya akan membahas tentang tampilan. Bagaimana cara menampilkan data dari database atau dari soruce lain bisa dalam 2 bentuk Grid atau List tergantung selera user yg mengunjungi website kita.

Q:Maksudnya gimana sih kang ? Yang sperti apa maksudnya?

Yah saya ambil contoh website terkenal Bukalapak.com aja. di gambar berikut

tampilan List

tampilan_list

Contoh Tampiilan Grid

tampilan_grid

Jadi seperti dambar diatas. Bisa list bisa grid. dan ternyata eh ternyata bisa dengan mudah fungsinya ternyata sudah ada di Javascript.

Ok, Monggo dibuka Editornya

dan ketikkan kode berikut

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>

<head>
<title>Gird Atau List</title>

</head>
<!---untuk source jqyery nya jangan sampe lupa, harus wajib dan musti ada.-->
<script src="jquery-2.1.4.min.js"></script>

<style>
#container ul { list-style: none; }

#container .buttons { margin-bottom: 20px; }

#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }

#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

</style>

<script>
$(document).ready(function() {

$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});

});
</script>

<body>

<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>

<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div><!--Endof contrainer-->

</body>

</html>

Nah kalau sudah bisa anda coba deh. sendiri ya.

Kalau masih belum bisa anda bisa download source nya di sini DOWNLOAD

Oke Sekian bila ada kekurangan mohon dimaafkan.

Semoga bermanfaat

Wassalamualaikum Wr.WB

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *