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 và #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.

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này