23.1.24 |
8
nhận xét
|
lượt xem
Từ bài viết của tác giả hung1001 tại bài viết này và mình chỉ update thêm tính năng lưu trạng thái sắp xếp vào localStorage
.
Mình sẽ hướng dẫn lại từ đầu nhé!
Thêm bộ sắp xếp vào vị trí mong muốn
<div class='sort-comment'> <span class='sort-title'>Sort by</span> <div class='sort-sel'> <select class='sort-option'> <option selected='selected' value='newest'>Newest</option> <option value='oldest'>Oldest</option> </select> </div> </div>
Giao diện
.sort-comment{text-align:right} .sort-comment .sort-title{font-size:14px;display:inline-block;margin-right:3px} .sort-comment .sort-sel{display:inline-block;position:relative} .sort-comment .sort-sel::after,.sort-comment .sort-sel::before{position:absolute;content:"";right:7px;border-style:solid;border-width:4px;width:0;height:0} .sort-comment .sort-sel::after{top:2px;border-color:transparent transparent #333} .sort-comment .sort-sel::before{bottom:2px;border-color:#333 transparent transparent} .sort-comment .sort-sel .sort-option{cursor:pointer;background:#fff;border:1px solid #aaa;padding:2px 20px 2px 7px;color:#656565;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-appearance:window;-webkit-appearance:none;outline:0}
JS để tiện ích hoạt động
Đoạn JS bên dưới mình đã update để có thêm tính năng lưu trạng thái$.fn.reverseChildren = function() { return this.each(function() { var $this = $(this); $this.children().each(function() { $this.prepend(this); }); }); }; function reverseCommentsOrder() { $(".comments-content ol").reverseChildren(); } $(document).ready(function() { if (localStorage.getItem("commentsOrder") === "reversed") { reverseCommentsOrder(); } }); $(".sort-option").on("change", function() { reverseCommentsOrder(); localStorage.setItem("commentsOrder", "reversed"); });Lưu ý: Template của bạn phải có thư viện jQuery mới hoạt động
Chúc anh em một ngày vui! 😁
hồi xưa mình đọc mấy bài của ông Hưng chả biết gì hết, nay hiểu ra thấy toàn nhiều cái hay ho ghê á! 😊
REPLY DELETEBác đấy nhiều cái đỉnh, tiếc là giờ chắc bận công việc nên không chơi nữa 😥
REPLY DELETEcái theme của ông mà phát triển làm thương mại cũng ngon lắm
REPLY DELETETheme này nhìn nhàm chán, nội dung lại nhạt mà bác. Mình chú trọng vào tốc độ load trang thôi 😁
DELETELàm thương mại như mọi người theme phải màu mè, nội dung đa dạng
ý nói cái theme ông Hưng ý 😁
DELETETheme của bác ấy cũng bình thường nhưng nội dung thì đỉnh 😁
DELETENhận xét phân 4 cấp nhìn khá xấu trên màn hình kích thước nhỏ (320x568, 375x667)
DELETECảm ơn bác YMG đã góp ý! Nhờ vậy em đã chỉnh sửa cho hiển thị phần nhận xét ở màn hình kích thước nhỏ cho hợp lý hơn 😁
DELETE