This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 21 September 2018

Hướng dẫn tạo nút bật tắt đèn sử dụng localStorage


Vào một trang mà cứ mãi một giao diện lâu rồi cũng thấy chán, ta nên tạo thêm một điểm nhấn nào đó cho người dùng có nhiều lựa chọn tương tác hơn. Trong bài viết này tôi sẽ cùng các bạn đi tạo nút bật tắt đèn sử dụng localStorage

Bài toán đặt ra: khi tôi vào trang của bạn, nó đang là giao diện trên nền trắng → sau đó tôi muốn nó chuyển sang chế độ nền đen, ok tôi gạt nút sang nền đen → tiếp theo tôi chuyển sang 1 bài viết khác trên trang của bạn → nó lại trở lại nền trắng vì đã chuyển sang phiên làm việc khác.

Vì vậy để cho chuyên nghiệp hơn ta sẽ sử dụng localStorage để "nhớ" tùy chọn của người dùng, nó cũng hoạt động tựa như cookies. Tùy chọn của bạn sẽ luôn được ghi nhớ kể cả khi bạn tắt trình duyệt, nó chỉ mất khi bạn clear localStorage, như vậy chắc đã đủ độ chuyên nghiệp và quý tộc rồi !

Trong bài viết này tôi sẽ thiết kế nút chuyển dạng checkbox switch ẩn hiện khi hover chuột vào


Code HTML trước thẻ mở <body...>

<a class='_hs' href='javascript:void(0)'>
    <span class='_hs-content'>
        <input class='_sis' id='_ts' name='set-name' type='checkbox'/>
        <label class='_sls' for='_ts'/>
    </span>
</a>

CSS
._hs,
._hs-content {
    border-radius: 3px 0 0 3px
}

._hs {
    background-color: #7d026d;
    box-shadow: rgba(0, 0, 0, .2) 0 4px 10px;
    position: fixed;
    z-index: 444;
    padding: 0;
    opacity: 1;
    top: 60px;
    right: -45px;
    transition: all .4s
}

._hs:hover {
    right: 0
}

._hs-content {
    display: block;
    width: 45px;
    height: 40px;
    background: #fff;
    margin-left: 4px;
    margin-right: 0;
    position: relative
}

._sis {
    display: none
}

._sls {
    position: absolute;
    cursor: pointer;
    font-weight: 700;
    text-align: left;
    top: 20px;
    left: 4px
}

._sls:after,
._sls:before {
    content: "";
    position: absolute;
    margin: 0;
    outline: 0;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

._sls:before {
    left: 1px;
    width: 34px;
    height: 14px;
    background-color: #9E9E9E;
    border-radius: 8px
}

._sls:after {
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084)
}

._sis:checked+._sls:before {
    background-color: rgba(161, 111, 199, .8)
}

._sis:checked+._sls:after {
    background-color: #7d026d;
    -ms-transform: translate(80%, -50%);
    -webkit-transform: translate(80%, -50%);
    transform: translate(80%, -50%)
}

JS đặt ngay bên dưới đoạn code HTML bên trên

<script>//<![CDATA[
$(function() {
    // bắt sự kiện checkbox để add/remove class
    $("#_ts").on("change", function() {
        if ($(this).is(":checked")) {
            localStorage.setItem("dark", "true"); // lưu lại tùy chọn
            $("body").addClass("dark");
        } else {
            localStorage.setItem("dark", "false");
            $("body").removeClass("dark");
        }
    });

    // xử lý trường hợp chuyển trang
    var r = localStorage.getItem("dark"); // get value
    if (null != r) {
        if ("true" == r) {
            $("#_ts").prop("checked", true); // checked
            $("body").addClass("dark");
        } else {
            $("#_ts").prop("checked", false); // unchecked
            $("body").removeClass("dark");
        }
    }
});
//]]></script>

Đến đây bạn mới chỉ xong 1 nửa chặng đường thôi, nhiệm vụ bây giờ của bạn là tự viết css cho trường hợp tắt đèn (với theme light) hoặc bật đèn (với theme dark)

Theo code js như trên, code css sẽ luôn bắt đầu bằng body.dark #selector{} ví dụ

body.dark .header {
    background: #000;
    color: #fff;
    ...
}

body.dark .footer {
    border: 1px solid #333;
    ...
}

Lần lượt viết thêm css cho đến khi nào màu sắc hòa hợp thì thôi, cái này tự bạn phải làm thôi không ai làm sẵn cho được 😀

Như vậy tôi đã trình bày xong cho bạn cách tạo nút bật tắt đèn sử dụng localStorage, giúp cho website thêm "động"

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Lê Nguyễn Đình Diện 9/23/2018 10:38:00 PM
    ths a :~|
    NIỆM STYLE Channel 9/29/2018 09:27:00 AM
    Bấm vô cái mục Labels nhìn phát khiếp ||8
    Please wait while i am loading Facebook SDK js