Membuat Tampilan List View Dan Grid View

Membuat Tampilan List View Dan Grid View

Membuat Tampilan List View Dan Grid View
Membuat Tampilan List View Dan Grid View

Hallo sahabat RuangCoder, artikel kali ini tentang Cara Membuat Tampilan / Desain List View Dan Grid View, nah sobat sering lihat untuk mode list dan grid ini pada android studio, akan tetapi sekarang sedang tranding banget nih untuk desain seperti ini di website dan blogspot terutama, nah admin ingin memberikan tutorial kali ini sesuai judulnya, nah pembuatannya ini terutama untuk sebuah website kalian agar tampil lebih rapih tentunya. Pada dasarnya, list berisi tampilan tipe pola persegi dan menempatkan semua item dalam pola yang sama. Dan tampilan daftar sederhana menunjukkan item sebagai daftar, List View  adalah alternatif untuk tampilan daftar standar  .

Hari ini kalian akan belajar membuat program List/Grid View Manage . Pada dasarnya, ada beberapa produk eCommerces dengan gambar, judul, dan deskripsi serta Add to Cart, button yang terlihat saat mengarahkan kursor. Di bagian atas, ada dua ikon untuk grid and list manajemen, dengan mengklik kalian dapat beralih tampilan penempatan produk. Tampilan list hanya berisi gambar persegi, judul dan detail harga, tetapi view placed menempatkan daftar produk dengan gambar, judul, harga, dan juga dengan deskripsi.

Jadi, Hari ini admin akan membagikan CSS List dan Grid View Switch With jQuery. Program ini terutama didasarkan pada CSS, tetapi penanganan jQuery di sini adalah fitur dari program switching ini. Semua gambar produk yang admin unggah di situs web ini dan ditautkan dalam kode, dan juga ikon list dan daftar adalah gambar PNG kalian juga dapat menggunakan ikon pihak ketiga.

Nah jika kalian penasaran dengan programnya kalian bisa melihat preview nya dibawah ini tentu dengan source code yang admin sediakan.


Cara Membuat Tampilan / Desain List View Dan Grid View


mari kita bahasa tentang program ini. Pertama admin telah membuat tag div utama dan menempatkan daftar di dalamnya, dalam satu item daftar admin telah menempatkan image, judul, deskripsi, dan tombol tambahkan ke keranjang menggunakan HTML. Juga, admin telah menempatkan dua hyperlink untuk meletakkan ikon list dan grid. Di sana admin tidak menggunakan library ikon apa pun, semua gambar PNG.

Sekarang menggunakan CSS untuk menempatkan semua elemen di tempat yang tepat, seperti yang kalian lihat di pratinjau. admin meletakkan semua hal dasar CSS di dalam file seperti ukuran, margin, padding, warna, tampilan, dll. Di tag div utama admin memberikan nilai lebar, untuk mengubah tampilan admin meningkatkan lebar.

Di sini penanganan jQuery hanya untuk fitur toggle saja, ketika kalian  mengklik ikon tampilan akan berubah. admin  menggunakan jQuery di sini karena membuat pekerjaan mudah dan menghemat waktu, hanya ada 3-4 baris kode JS (get). 

Kalian akan mengerti setelah mendapatkan kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini kalian harus membuat 3 file, pertama untuk HTML, kedua untuk CSS, dan yang ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!--Code By RuangCoder ( https://www.ruangcoder.com)-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Grid and List View | RuangCoder.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="wrapper">
    <div class="view">
        <p>View as:</p>    
        <a href="#" class="icon-grid"></a>
        <a href="#" class="icon-list"></a>
        
    </div>
    
    <div class="products category">
        <ul class="">
            <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/macbook.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    <a href="#">Macbook Air</a>
 <span>$ 1200.00</span>

                    <p class="des">Detailed item information</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </li>
            
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/msi.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    
                    <a href="#">MSI</a>
 <span>$ 800.00</span>

                    <p class="des">Detailed item information</p>
                    <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
                    
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/pavilion.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    
                    <a href="#">HP Pavilion</a>
 <span>$ 1000.00</span>

                    <p class="des">Detailed item information</p>
                    <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
   
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/predator.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    
                    <a href="#">Asus Predator</a>
 <span>$ 2500.00</span>

                    <p class="des">Detailed item information</p>
                    <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
  <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/surface.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    <a href="#">MS Surface Pro</a>
 <span>$ 1350.00</span>

                    <p class="des">Detailed item information</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </li>
             
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/vivobook.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">    
                    <a href="#">Vivobook</a>
 <span>$ 500.00</span>

                    <p class="des">Detailed item information</p>
                    <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>                
        </ul>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

Buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com) */
* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/18px'OpenSans-Bold', sans-serif;    
}
ul {
    list-style: none;
}
.wrapper {
    width: 700px;
    margin: 20px auto;
}
.products {
    margin: 40px 0;
    overflow: hidden;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}
.products ul li p {
    display: none;
}
.products ul.list li p {
    display: block;
}
.products .list li {
    float: none;
    display: block;
    width: 691px;
    height: 245px;
}
.products .list li .itemTitle {
    float: left;
    position: relative;
    padding: 45px 0 20px 0;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
}
.products .list li:hover .itemTitle {
    border: 0;
}
.products .list li .itemTitle a {
    padding: 0 0 5px 0;
}
.products .list li .itemTitle .des {
    color: #333;
    text-transform: none !important;
    padding: 10px 0 0 0;
}
.products .list li .itemTitle p {
    color: #333;
    text-transform: none !important;
    width: 440px;
}
.products .list li .itemIMG {
    height: 243px;
    float: left;
    border-right: 1px solid #d9d9d9;
    margin: 0 13px 0 0;
    width: 230px;
    position: relative;
}
.products .list li .itemIMG img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.products .list li .addCART {
    height: 243px;
    border-bottom: 1px solid rgba(51, 51, 51, 1);
}
.products .list li .addCART a {
    margin: 45% auto auto 40px;
}
.products.catalog {
    margin: 80px auto 40px auto;
}
.products.category {
    margin: 10px 0;
    width: 693px;
    float: left;
}
.products ul li {
    float: left;
    margin: 0;
    padding: 0;
    width: 230px;
    height: 244px;
    position: relative;
    border-top: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
}
.products ul li img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.products ul li:hover .addCART, .products ul li:hover .addCART a {
    opacity: 1;
}
.products ul li:hover .itemTitle {
    border: 1px solid rgba(51, 51, 51, 1);
    border-top: 0;
}
.products ul li:hover .itemTitle a {
    color: #010101;
}
.addCART {
    position: absolute;
    top: 0;
    left: 0;
    width: 228px;
    height: 186px;
    border: 1px solid rgba(51, 51, 51, 1);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-transition: opacity 0s;
    -moz-transition: opacity 0s;
    -o-transition: opacity 0s;
}
.addCART a {
    text-decoration: none;
    display: inline-block;
    width: 157px;
    height: 40px;
    margin: 100px auto auto 40px;
    background-color: #333;
    text-align: center;
    font: 14px/40px'OpenSans-Italic', sans-serif;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.itemTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 208px;
    height: 36px;
    border: 1px solid rgba(51, 51, 51, 0);
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    border-top: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.itemTitle p, .itemTitle span, .itemTitle a {
    text-transform: uppercase;
}
.itemTitle a {
    color: #003f75;
    text-decoration: none;
    display: block;
}
.itemTitle span {
    color: #a20000;
}
.view p  { top: 5px; margin: 0 10px 0 0; } 
.view p,
.view a { 
    float: left; 
    display: inline-block;
    text-decoration: none;
    position: relative;
}
.icon-grid {
    background: url("https://webdevtrick.com/wp-content/uploads/grid-view.png") no-repeat 0 0;
    height: 16px;
    width: 16px;
    top: 7px;
}
.icon-list {
    background: url("https://webdevtrick.com/wp-content/uploads/list-view.png") no-repeat 0 0;
    height: 32px;
    width: 32px;
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com)
$(".view a").on('click', function(){
    $('.products ul').toggleClass('list');
    return false;
});


Nah sampai disini kalian telah berhasil Membuat Tampilan List View Dan Grid View, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini