Nhấp chuột hoạt động css
Bài viết này là một phần của bài viết [JavaScript] Bài 13 - Event & Listener trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên Show
Trong bài viết này, chúng tôi sẽ cùng xây dựng một thanh điều hướng phụ đơn giản thường được đặt ở bên cạnh khối hiển thị nội dung chính của trang web. Bên cạnh đó, chúng ta sẽ thử bổ sung một tính năng đơn giản giúp người dùng lọc nhanh danh sách các liên kết bằng cách nhập từ khóa vào một ô nhập liệu ở phần đầu của thanh điều hướng Xem kết quả dự kiến 1. Chuẩn bị mã HTMLVẫn như bình thường, chúng ta sẽ khởi động với một khuôn mẫu HTML cơ bản chưa có nội dung.
Trước hết chúng ta cần dàn bố cục chính của trang web để có thể xác định được vị trí mà thanh điều hướng phụ 8 của chúng ta sẽ được đặt trên trang. Ở đây để tiết kiệm thời gian tiết kiệm điện cho nội dung chính cần quan tâm là khối 8 nên chúng ta sẽ chọn một bố cục đơn giản với -
Cụ thể hơn về khối 4, chúng ta có các thành phần chính là -
Và để thiết lập khoảng cách giữa các thành phần với các khung 4 được đồng đều thì chúng ta sẽ đặt tất cả vào một chung tiện ích chung 9 4Tại đây 5 nhập từ khóa 6 của chúng ta sẽ bao gồm 2 thành phần là một ô dữ liệu 72 và một nút nhấn 73 để xóa nội dung đã nhập. Tuy nhiên, chúng tôi không sử dụng thẻ 74 mà sử dụng 75 vì không cần chuyển yêu cầu của người dùng tới máy chủ web nào cả. Tiếp theo là các danh sách liên kết 7 với mỗi danh sách sẽ bao gồm một tiêu đề của hạng mục nội dung 77 và các liên kết tới các bài viết 78. Ở đây chúng ta sử dụng thuộc tính 79 để gắn các từ khóa của bài viết với các liên kết. Và khi người dùng nhập từ khóa để tìm kiếm, nếu từ khóa vừa nhập xuất hiện trong tiêu đề của liên kết hoặc trong 50 thì chúng ta sẽ để liên kết hiển thị bình thường. Trong trường hợp còn lại thì các liên kết sẽ được ẩn đi để rút ngắn danh sách và người dùng có thể lọc được bài viết liên quanBạn có thể tạo ra nhiều danh sách liên kết để có thể dễ dàng chạy thử tính năng của bộ lọc. Dưới đây là các tập tin liên kết mà bạn có thể sao chép/dán để sử dụng 62. Viết code CSS cho. bên lềỞ đây chúng ta vẫn sẽ xuất với thao tác 51 căn bản
2. 1 Chỉnh sửa bố cục chính của trangĐể nhanh chóng điều chỉnh bố cục chính của trang web và định hình khu vực sử dụng khối điều hướng phụ 4 thì chúng ta có thể sử dụng nhóm thuộc tính 53. Từ kết quả dự kiến, chúng ta sẽ đặt màu nền tối cho thanh điều hướng 54 và khối chân trang web 55;
72. 2 Filter. sidenav-bộ lọcĐể bắt đầu viết code cho khối 4, chúng ta sẽ tạo 83 cơ bản cho 9 sử dụng chung trong các thành phần của trang web. Vùng chứa này thường được sử dụng cho tất cả các thành phần của trang web để tạo khoảng 83 cơ bản nhằm phân tách nội dung từ 2 cạnh của vùng chứa cha ở bên ngoàiTrong trường hợp khác, nếu vùng chứa có chiều rộng 86, ví dụ như phần hiển thị nội dung bài viết 57, thì vùng chứa này còn được sử dụng để giới hạn độ rộng của dòng chữ trong khoảng 88, giúp đảm bảo chắc chắn người dùng sẽ có 5First header is a filter 6. Các nhiệm vụ cần thực hiện của chúng ta về cơ bản vẫn chia làm 2 phần như trên
Phần đầu tiên của công việc thì chúng ta cần đảm bảo độ rộng của ô nhập liệu 72 và nút nhấn 73 là 82 của container cha 9. Do node nhấn 73 có nội dung rất ngắn, chúng ta sẽ chỉ định chiều rộng và chiều cao cố định. Sau đó sử dụng hàm 85 để thiết lập độ rộng tương quan cho ô nhập liệu 73Tuy nhiên, còn một vấn đề nhỏ nữa, đó là 2 thành phần này đều là các khối 87 và với kích thước phông chữ mặc định, trình duyệt web sẽ đặt 2 khối này cách nhau một khoảng nhỏ khoảng 88. Do đó chúng ta cần giảm khoảng cách này đi bằng cách sử dụng thuộc tính 89 cho 6 hoặc 01 8Sau khi đã có một khối 6 lấp đầy chiều rộng của vùng chứa bên ngoài, chúng ta cần thực hiện thiết lập phong cách hiển thị và canh chỉnh cho nội dung chữ bên trong ô nhập liệu và nhấn nút 8Ngoài ra, chúng ta còn lưu ý quan trọng khác đó là cần phải tạo thêm 1 thẻ trạng thái 07 để biểu thị cho trạng thái liên kết được ẩn đi khi không phù hợp với từ khóa người dùng nhập vào bộ lọc 03. Viết mã JavaScript cho. sidenav-bộ lọcTrước khi bắt tay vào viết mã, chúng ta cần lưu lại một vài yếu tố chính của tính năng này.
Việc viết mã xử lý nút nhấn 73 thì chắc chắn là không có gì để chúng ta phải mờ mắt quá nhiều ở thời điểm hiện tại. Tuy nhiên, hãy nói thêm một chút về đối tượng chính ở đây là ô nhập liệu 72Giả sử chúng ta đang ở thời điểm người dùng đã nhập một vài từ khóa nào đó và đã có khoảng 1/2 số liên kết không phù hợp được ẩn đi. Bây giờ khi người dùng nhấn thêm một phím nào đó để xóa hoặc thêm một ký tự, thì mã của chúng ta sẽ cần thực hiện những công việc sau -
Một cách xử lý khác là chúng ta sẽ làm việc với 2 nhóm liên kết 18 và 19 riêng biệt -
Cho dù là phương án xử lý nào đi chăng nữa thì chúng ta vẫn sẽ phải làm việc với đầy đủ danh sách liên kết ban đầu. Và thực hiện tới 2 lần lặp để kiểm tra tính phù hợp của các liên kết với đoạn từ khóa trong 72. Nguyên do là cả 2 cách xử lý vấn đề này đều xuất phát từ thao tác khách quan tác động lên trạng thái của tập hợp các liên kết 78 3Bây giờ chúng ta hãy thử nhìn vấn đề theo một cách khác. Giả sử chúng ta có thể chia khối công việc cần làm để các liên kết tự thực hiện chứ không phải tác động chỉnh sửa có thể xen vào từ đâu đó khác. Khi có một sự kiện người dùng được phát động, mỗi liên kết sẽ tự kiểm tra xem nội dung của mình có phù hợp với đoạn từ khóa hay không. Và sau đó tự điều chỉnh trạng thái 28 một cách chủ quan. Như vậy sẽ thật tuyệt. 4Nếu có thể viết mã phát triển logic chủ quan cho các liên kết như vừa nói, chúng ta sẽ không cần phải sàng lọc các kết quả tập tin nhiều lần để phân loại các liên kết. Lối suy nghĩ duy nhất này có vẻ như không yêu cầu khả năng phỏng đoán kết quả lọc các danh sách và dường như sẽ có ít khả năng để chương trình xảy ra lỗi hơn. Vì vậy chúng ta sẽ thử viết code xử lý theo hướng tư duy vừa thảo luận nhé - 293. 1 Tổng quan các hàm xử lý chínhĐầu tiên chúng ta sẽ chuẩn bị các phần khung của chương trình -
5Như vậy là chúng ta đã có phần khung chương trình với 3 hàm xử lý sự kiện chính được gắn vào các phần tử tương ứng. Ở đoạn gắn hàm xử lý sự kiện cho các liên kết, chúng ta đã tạo ra một tên sự kiện mới là 40. Và hàm xử lý sự kiện của các liên kết sẽ được kích hoạt nếu như chúng ta gửi tới các liên kết một đối tượng 41Tức là các sự kiện click chuột 42 do trình duyệt tạo ra tại nút nhấn 73, và các sự kiện nhấn và phím tắt 44 tại vị trí của ô nhập cổng 72, sẽ là mã của phiên giao dịch của chúng ta thành một kiểu duy nhất. . 3. 2 Viết mã cho các hàm xử lý sự kiệnBây giờ chúng ta sẽ viết mã chi tiết cho các hàm xử lý sự kiện. Có thể là chúng ta nên xuất phát từ phiên dịch các sự kiện chức năng sang 40 đi. 6Rồi. xong. Ở đây trong phần thân hàm, chúng ta không quan tâm đến sự kiện 49 nhận được là kiểu gì, 50 hay 51. Thay vào đó chỉ đơn giản là bất kỳ khi nào hàm xử lý này được kích hoạt ở vị trí ô nhập dữ liệu 72 hoặc nút nhấn 73 thì chúng ta hiểu rằng 54. Mặc dù nội dung đó có thể thay đổi hoặc không nhưng công việc của hàm xử lý này chỉ đơn giản là thông báo cho 55 rằng 40Kế hoạch sẽ là hàm 37 do nhiệm vụ này thực hiện rất đơn giản. Ở đây chúng ta sẽ chỉ xóa nội dung của ô nhập liệu chứ không thực hiện bất kỳ thao tác nào khác. Công việc thông báo cho các liên kết là nhiệm vụ của hàm 34. 7Cuối cùng là hàm xử lý các sự kiện quan trọng nhất 31 - Mỗi liên kết sẽ tự động truy cập vào 72 để xem chuỗi từ khóa trong ô nhập liệu và kiểm tra xem mình có phù hợp không; 8Ở cấp độ của hàm 61, chúng ta vẫn thường xử lý việc phân tích sự kiện và ra quyết định về công việc cần thực hiện tiếp theo. Sau đó công việc cần thực hiện bằng cách thao tác trên các 62 nên được lý giải chi tiết ở các hàm tác vụ phụ 63 và các hàm tiện ích 64 xử lý. Và ở đây chúng ta cũng sẽ thực hiện như vậy với một khung xử lý chính và ủy thác 2 thao tác 28 cho 2 hàm 663. 3 Viết mã cho các chức năng xử lý nhiệm vụ phụTuy nhiên, tại vị trí công việc được ủy thác xuống 2 hàm 66, chúng ta không biết liên kết đó 18 hay 19; 93. 4 Viết các hàm tiện ích hỗ trợCuối cùng là viết các hàm hỗ trợ đã được gọi nhưng chưa có mã phát triển. 404. Total end code of a sidenav đơn giảnXin chúc mừng. Bạn đã hoàn thành công việc xây dựng một thanh điều hướng phụ đơn giản có hỗ trợ tính năng lọc nhanh các danh sách liên kết. Để hoàn thiện hơn nữa, bạn có thể xử lý thêm mã 70 cho 4. Công việc này đã quá quen thuộc từ khi chúng ta cùng xây dựng một thanh điều hướng 70 cách đây rất lâu, khi mà chúng ta vẫn chưa biết đến JavaScript. Mục đích của chúng ta trong bài viết này là thử phát triển logic xử lý sự kiện theo phương thức hành động chủ quan đứng từ vị trí của các phần tử HTML cần phải thay đổi để đáp ứng với sự kiện. Thay vì xử lý theo phương thức hành động khách quan tác động lên các phần tử HTML cần thay đổi từ bên ngoài |