Trình hướng dẫn là một công cụ thuận tiện cho trang web. Nó được sử dụng rộng rãi trong các diễn đàn và blog khác nhau, cho phép người dùng ẩn một phần tử cụ thể tại thời điểm nhấn nút. Hơn nữa, spoiler trông đẹp trên trang web và giúp ẩn những phần làm quá tải trang một cách không cần thiết.
Nó là cần thiết
Thư viện jquery
Hướng dẫn
Bước 1
Trình hướng dẫn có thể được thực hiện bằng cách sử dụng thư viện trình cắm thêm jquery phổ biến được viết bằng ngôn ngữ lập trình Java Script. Nó được sử dụng để triển khai tương tác đầy đủ của ngôn ngữ lập trình với mã đánh dấu HTML của trang. Kết nối jquery được thực hiện bằng HTML bằng thẻ . Bạn phải chỉ định vị trí đặt tập lệnh và đặt kiểu của nó: $ (document).ready (function ()
Bước 2
Đoạn văn bản được chỉ định trong một đoạn văn nhất định phải được bao bọc trong một lớp riêng biệt - một div, với sự trợ giúp của chính nó sẽ được điều khiển: Sasha đi dọc theo đường cao tốc và hút khô.
Bước 3
Tiếp theo, bạn cần tạo phía trước tất cả các div có tên spoil các nút tương ứng sẽ thu gọn và mở rộng văn bản. Đầu tiên, bản thân trình giả mạo được ẩn bằng cách sử dụng chức năng "hide ()" tiêu chuẩn: $ (“div [name = 'spoil']”). Hide (); Tiếp theo, bạn cần tạo văn bản và hình ảnh cho tất cả các phần mềm giả mạo, sẽ được sử dụng làm nền cho các nút: $ (“P [name = 'spoilbutton']”). Html (“Hiển thị văn bản”);
Bước 4
Tìm tất cả các nút trên trang và kiểm tra các tiêu đề cấp đầu tiên ở phía trước nút. Để làm điều này, hãy tạo một điều kiện sẽ tìm kiếm các thẻ h1 theo tên. Văn bản tiêu đề được chỉ định bao bọc trong chính div: $ (“p [name = 'spoilbutton']”). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (cái này).prev (cái này).html () +”Hiển thị văn bản”; $ (cái này).prev (cái này).replaceWith (“”); $ (cái này).replaceWith (NewSpoilButton);}})
Bước 5
Tiếp theo, bạn cần xử lý thao tác bấm nút của chuột với click. Nếu một lần nhấp được phát hiện, nó có thể được hiển thị: $ (“div [name = 'spoilbutton']”). Nhấp vào (function () {If ($ (this).next (this).css (“display”) = =”Khối”) {
Bước 6
Sau đó viết thừa kế. Trong một div, văn bản nằm trong đoạn p, nội dung của đoạn này được đặt trong thẻ span: $ (this).children (“p”). Children (“span”). Html (“Hiển thị văn bản”); Thu gọn mở spoiler. Nếu nó không được mở, hãy mở rộng văn bản. Bước này dựa trên quy tắc kế thừa: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Ẩn văn bản”); $ (this).next (this).slideDown (“normal”);} return false; })
Bước 7
Sau đó, một cú nhấp chuột vào nút được ghi lại, theo đó kịch bản sẽ ẩn và mở ra spoiler. $ (“P [name = 'spoilbutton']”). Nhấp vào (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Đã sẵn sàng Spoiler. Nó sẽ xuất hiện khi tìm thấy khối DIV phù hợp.
