CHỦ NHẬT, 16/03/2025
Sắp trưa rồi!Chúc các bạn có một ngày thành công và hạnh phúc!

Note Đóng lại {Cảm ơn mọi người đã ghé thăm trang}
Giải pháp bán hàng online Số 1 Việt Nam

Modify Form Comment : Bài 10 - Tạo màu nền riêng biệt cho các comment

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)
[FD's BlOg] - Thủ thuật này Tài có nhờ mình lâu rồi, trước kia mình có thử qua các cách đơn giản với vài đoạn code nhỏ từ javascript đều không thành công. Hôm nay mình thử nó với jQuery thì lại thành công. Thủ thuật sẽ tạo ra các màu nền riêng cho các bài comment, và sẽ lặp lại 1 cách tuần tự.


Đây là hình ảnh mà mình đã thực hiện ở blog test của mình:

- Như trong hình minh họa, mình sẽ hướng dẫn code theo cách hiển thị 2 màu tuần tự, ví dụ 2 màu #eee #ccc.

☼ Các bước thực hiện:
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn Code CSS bên dưới vào trước dòng code ]]></b:skin>

.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}

4. Chèn tiếp đoạn code Javascript bên dưới vào trước thẻ đóng </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(2n+0)").addClass("style1");
$(".comment-body:nth-child(2n+1)").addClass("style2");
});
</script>

5. Save template.

☼ Hướng dẫn cách thêm các màu nền cho việc hiển thị tuần tự:
- Như các bạn đã thấy, ở trên mình hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ mình sẽ hướng dẫn thêm vào thành 3, 4 màu tuần tự, tùy theo ý thích của bạn.

Đây là hình ảnh lặp với nhiều màu nền

- Trước hết về code CSS, muốn có bao nhiêu màu sẽ được lặp tuần tự thì bạn sẽ phải có bấy nhiêu class, ví dụ mình sẽ cho lặp 4 màu nền thì code sẽ như bên dưới:


.comment-body.style1 {
background:#eee;
}
.comment-body.style2 {
background:#ccc;
}
.comment-body.style3 {
background:#bbb;
}
.comment-body.style4 {
background:#aaa;
}

- Tiếp theo là tới phần code javascript.
- Các bạn để ý đoạn code màu đỏ ở trên (2n+0, 2n+1) , đây là code xác định các comment để hiển thị màu nền. Nếu bạn muốn lặp nó với 4 màu thì ta sẽ có dãy sau : 4n+0, 4n+1, 4n+2, 4n+3 và 4 đoạn code javascript tương ứng như bên dưới :

$(".comment-body:nth-child(4n+0)").addClass("style1");
$(".comment-body:nth-child(4n+1)").addClass("style2");
$(".comment-body:nth-child(4n+2)").addClass("style3");
$(".comment-body:nth-child(4n+3)").addClass("style4");

Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class, để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề...

Chúc các bạn thành công.

Bạn đã xem chưa

0 nhận xét | Viết lời bình



Copyright © 2014 Blog Thông Tin Tổng Hợp




  • tpm1512

    Tư vấn - Thái AiTi

    Call: 0962.444.744

    tpm1512@gmail.com

    skype tpm1512