Share Hướng dẫn sử dụng một vài thành phần hay của thư viện W3.JS

[filiallion]

Language

Tiếng Việt

Tôi đã giới thiệu với các bạn thư viện JavaScript W3.JS tại bài viết "Hướng dẫn sử dụng thư viện W3.JS để thiết kế giao diện website" phục vụ thiết kế các chức năng trên giao diện website. Bài viết này tôi sẽ tiếp tục với thư viện W3.JS, hướng dẫn các bạn sử dụng một vài thành phần cụ thể của nó, các thành phần đó là toggle, filter và include.

Đầu tiên, thành phần toggle trong W3.JS có 3 phương thức đó là hide, show và toggleShow. Trong đó, toggleShow thường được sử dụng hơn, các bạn tham khảo ví dụ sau để biết cách sử dụng toggleShow:

<div id="toggle">Welcome to Gextend</div>
<button type="button" onclick="w3.toggleShow('#toggle')">Toggle</button>

Tiếp theo là thành phần filter khá hay trong những trường hợp các bạn muốn lọc nội dung, ví dụ sau:

<input type="text" oninput="w3.filterHTML('#filter', 'li', this.value)">
<ul id="filter">
    <li>Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
</ul>

Và cuối cùng là include, include trong W3.JS giống với include trong PHP, dùng để chèn nội dung của một trang HTML khác vào trang HTML hiện tại, ví dụ:

<div w3-include-html="path/to/content.html"></div>

Các bạn có thể tìm hiểu thêm các thành phần khác của thư viện W3.JS tại địa chỉ https://www.w3schools.com/w3js/default.asp.