Cách tạo Menu hành động nổi giống như trung bình
Sự phổ biến của menu hành động nổi đã gia tăng, đặc biệt là kể từ khi Medium.com đưa tính năng này vào thịnh hành. Tóm lại, menu hành động nổi bật lên khi bạn chọn một số văn bản trên một trang web. Menu xuất hiện gần vùng chọn, thể hiện những hành động khác nhau cho phép bạn nhanh chóng định dạng, tô sáng hoặc chia sẻ văn bản đã chọn.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách hiển thị menu hành động cho một đoạn văn bản đã chọn trên một trang web. Menu hành động của chúng tôi sẽ cho phép người dùng tweet văn bản đã chọn để theo dõi họ.
1. Tạo HTML
Các HTML khởi đầu rất đơn giản, chúng ta chỉ cần một số tiếp theo người dùng có thể chọn. Đối với bản demo, tôi sẽ sử dụng “Thợ săn và thợ săn” chuyện đi ngủ làm văn bản mẫu.
Thợ săn và thợ săn
The Hart đã từng là đỉnh cao
Giáo dục
2. Tạo mẫu menu hành động
Tôi là thêm mã HTML thuộc về menu hành động bên trong thành phần. Bất cứ điều gì bên trong Gắn thẻ nó sẽ không được kết xuất bởi các trình duyệt cho đến khi nó được thêm vào tài liệu sử dụng JavaScript.
Đừng để bất kỳ không gian không cần thiết bên trong vì điều đó có thể làm xáo trộn bố cục menu hành động khi nó được chèn vào tài liệu. Nếu bạn muốn, thêm nhiều nút phía trong #shareBox để có thêm lựa chọn.
3. Tạo CSS
CSS cho #shareBox container nội tuyến đi như thế này:
#shareBox chiều rộng: 30px; chiều cao: 30px; vị trí: tuyệt đối;
Các vị trí: tuyệt đối; quy tắc sẽ cho chúng ta đặt thực đơn bất cứ nơi nào chúng ta muốn trên trang.
Tôi cũng tạo kiểu nút hành động bên trong #shareBox với màu nền và hình ảnh và trong đó ::sau yếu tố giả I thêm một hình tam giác cho một mũi tên xuống.
Nút #shareBox> chiều rộng: 100%; chiều cao: 100%; màu nền: # 292A2B; biên giới: không có; bán kính đường viền: 2px; phác thảo: không có; con trỏ: con trỏ; hình nền: url ('share.png'); lặp lại nền: không lặp lại; vị trí nền: trung tâm; kích thước nền: 70%; #shareBox> nút :: sau vị trí: tuyệt đối; nội dung: "; Border-top: 10px solid # 292A2B; Border-left: 10px solid trong suốt; Border-right: 10px solid trong suốt; left: 5px; top: 30px; 4. Thêm trình xử lý sự kiện với JS
Chuyển sang JavaScript, chúng ta cần phải thêm xử lý sự kiện cho Di chuột xuống và chuột sự kiện để nắm bắt sự bắt đầu và kết thúc của việc lựa chọn văn bản.
Bạn cũng có thể làm nghiên cứu cho sự kiện lựa chọn khác nhu la chọn bắt đầu và sử dụng chúng thay vì sự kiện chuột (sẽ là lý tưởng nhưng vì hỗ trợ trình duyệt của họ không được tốt lắm).
Cũng thế thêm một tài liệu tham khảo để yếu tố sử dụng querySelector () phương pháp.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); Hàm onMouseDown () Hàm onMouseUp () 5. Xóa các lựa chọn trước đó
bên trong Di chuột xuống sự kiện, chúng tôi sẽ thực hiện một số dọn dẹp, tức là xóa mọi lựa chọn trước đó và menu hành động thuộc.
hàm onMouseDown () document.getSelection (). remove ALLRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); Các getSelection () phương thức trả về một Lựa chọn vật đại diện cho phạm vi của văn bản hiện đang được lựa chọn bởi người dùng và remove ALLRange () phương phápxóa tất cả các phạm vi từ cùng Lựa chọn đối tượng, do đó xóa bất kỳ lựa chọn nào trước đó.
6. Hiển thị menu hành động
Đó là trong chuột sự kiện, khi chúng ta xác nhận nếu một lựa chọn văn bản đã được thực hiện và hành động hơn nữa.
hàm onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var phạm vi = sel.getRangeAt (0); if (Range.startContainer.parentEuity.parentEuity.localName === "article" || Range.startContainer.parentEuity.localName === "article") // một số văn bản trong bài viết đã được chọn
Lấy chuỗi văn bản đã chọn bằng cách gọi toString () phương pháp của Lựa chọn vật. Nếu văn bản đã chọn không trống, hãy tiếp tục và có được phạm vi đầu tiên từ Lựa chọn vật.
Phạm vi là phần được chọn của tài liệu. Thông thường, người dùng sẽ thực hiện lựa chọn duy nhất chỉ, không phải nhiều (bằng cách nhấn phím ctrl / cmd), vì vậy chỉ cần lấy đối tượng phạm vi đầu tiên (tại chỉ mục 0) từ lựa chọn bằng cách sử dụng getRangeAt (0).
Khi bạn đã có phạm vi, hãy xem liệu lựa chọn bắt đầu từ một địa điểm bên trong bài viết. Các startContainer thuộc tính của phạm vi trả về nút DOM từ nơi lựa chọn bắt đầu.
Đôi khi (khi bạn chọn trong một đoạn), giá trị của nó chỉ là một nút văn bản, trong trường hợp đó yếu tố cha mẹ sẽ là và cha mẹ của yếu tố sẽ là (trong mã mẫu trong bài này).
Những lần khác, khi bạn chọn trên nhiều đoạn, các startContainer sẽ là và nút cha của nó sẽ là . Vì thế hai so sánh trong lần thứ hai nếu điều kiện trong đoạn mã trên.
Một khi nếu tình trạng đã qua, đã đến lúc tìm nạp menu hành động từ mẫu và thêm nó vào tài liệu. Đặt mã dưới đây bên trong thứ hai nếu tuyên bố.
document.body.insertB Before (document.importNode (temp.content, true), temp);));
Các importNode () phương pháp trả về các nút từ các tài liệu bên ngoài (trong trường hợp của chúng tôi, các nút từ ). Khi nó được gọi với tham số thứ hai (thật), phần tử / nút đã nhập sẽ đi kèm với các yếu tố con của nó.
Bạn có thể chèn #shareBox bất cứ nơi nào trong cơ thể tài liệu, Tôi đã thêm nó trước phần tử mẫu.
7. Đặt menu hành động
Chúng tôi muốn đặt menu hành động phải ở trên & ở giữa khu vực được chọn. Làm như vậy, lấy các giá trị hình chữ nhật của khu vực được chọn bằng cách sử dụng getBoundingClientRect () phương thức trả về kích thước và vị trí của một phần tử.
Sau đó, cập nhật hàng đầu và trái giá trị của #shareBox dựa trên các giá trị hình chữ nhật. Trong tính toán của cái mới hàng đầu và trái giá trị, tôi đã sử dụng Mẫu ES6 bằng chữ.
var orth = Range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ orth.top px - 38px)'; shareBox.style.left = 'calc ($ orth.left px + calc ($ orth. thong px / 2) - 30px)'; 8. Thêm chức năng
Bây giờ chúng tôi đã thêm menu hành động gần văn bản đã chọn, đã đến lúc tạo văn bản đã chọn có sẵn cho các tùy chọn menu để chúng ta có thể thực hiện một số hành động trên nó.
Gán văn bản đã chọn cho một thuộc tính tùy chỉnh của nút chia sẻ gọi là 'chia sẻ' và thêm một Di chuột xuống sự kiện lắng nghe nút.
var shareBtn = shareBox.querySelector ('nút'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, đúng); Các thật tham số của addEventListener () ngăn chặn Di chuột xuống sự kiện từ bong bóng.
Bên trong trênShareClick () xử lý sự kiện, chúng tôi chèn văn bản đã chọn vào một tweet bằng cách truy cập chia sẻ tài sản của nút.
hàm onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this .remove (); document.getSelection (). remove ALLRanges () Một khi nút được bấm, nó làm những gì nó phải làm, sau đó xóa chính nó khỏi trang. Nó cũng sẽ xóa bất kỳ lựa chọn trong tài liệu.
Mã nguồn và bản demo
Trong bản demo Codepen dưới đây, bạn có thể kiểm tra cách thức hoạt động của menu hành động. Bạn cũng có thể tìm thấy mã nguồn đầy đủ trong repo Github của chúng tôi.
