Bagaimana Membuat Menu Tindakan Terapung Sedang
Populariti menu tindakan terapung telah semakin meningkat, terutamanya sejak Medium.com membawa ciri ini menjadi tren. Secara ringkas, menu tindakan terapung timbul bila awak pilih beberapa teks di laman web. Menu muncul berhampiran pemilihan, menunjukkan tindakan yang berbeza yang membenarkan anda memformat, menyerlahkan, atau berkongsi dengan cepat teks yang dipilih dengan pantas.
Dalam tutorial ini, saya akan menunjukkan kepada anda cara memaparkannya menu tindakan untuk coretan teks yang dipilih di laman web. Menu tindakan kami akan membolehkan pengguna untuk tweet teks yang dipilih kepada pengikut mereka.
1. Buat HTML
The pemula HTML adalah mudah, kita hanya perlukan beberapa teks pengguna boleh memilih. Untuk demo, saya akan gunakan “The Hart dan the Hunter” cerita sebelum tidur sebagai contoh teks.
The Hart dan the Hunter
The Hart pernah ...
...
2. Buat template menu tindakan
Saya menambah kod HTML milik menu tindakan di dalam a elemen. Apa sahaja yang ada di dalamnya tag itu tidak akan diberikan oleh pelayar sehingga ia ditambahkan pada dokumen menggunakan JavaScript.
Jangan tinggalkan ruang yang tidak perlu di dalam tag, kerana itu mungkin mengganggu susun atur menu tindakan sebaik sahaja ia dimasukkan ke dalam dokumen. Jika anda mahu, tambah lebih banyak butang dalam #shareBox untuk lebih banyak pilihan.
3. Buat CSS
CSS untuk #shareBox bekas kontena pergi seperti ini:
#shareBox width: 30px; ketinggian: 30px; kedudukan: mutlak;
The kedudukan: mutlak; peraturan akan membenarkan kami letakkan menu di mana sahaja kita mahu pada halaman.
Saya juga menggayakannya butang tindakan di dalam #shareBox dengan warna latar belakang dan imej dan dalamnya :: selepas pseudo-element I menambah segi tiga untuk anak panah ke bawah.
butang #shareBox> lebar: 100%; ketinggian: 100%; warna latar belakang: # 292A2B; sempadan: tiada; jejari sempadan: 2px; garis besar: tiada; kursor: penunjuk; imej latar belakang: url ('share.png'); ulangi latar belakang: tidak ulangi; kedudukan latar belakang: pusat; saiz latar belakang: 70%; #shareBox> button :: after position: absolute; kandungan: "; perbatasan-atas: 10px pepejal # 292A2B; tepi kiri: 10px pepejal telus; sempadan kanan: 10px pepejal telus; kiri: 5px; atas: 30px; 4. Tambah pengendali acara dengan JS
Bergerak ke JavaScript, kita perlu tambah pengendali acara untuk mousedown dan tetikus peristiwa ke menangkap permulaan dan akhir pemilihan teks.
Anda juga boleh melakukan penyelidikan acara pemilihan lain seperti pilih dan gunakannya bukannya peristiwa tetikus (yang akan menjadi ideal tetapi sehingga sokongan peramban mereka tidak begitu baik).
Juga tambah rujukan kepada elemen menggunakan querySelector () kaedah.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); fungsi onMouseDown () function onMouseUp () 5. Kosongkan pilihan sebelum ini
Di dalam mousedown acara, kami akan melakukan beberapa pembersihan, iaitu mengetepikan sebarang pilihan sebelumnya dan menu tindakan yang dimiliki.
fungsi onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); jika (shareBox! == null) shareBox.remove (); The getSelection () kaedah mengembalikan a Pemilihan objek mewakili julat teks yang kini dipilih oleh pengguna dan pengguna removeAllRange () kaedahmembuang semua julat dari yang sama Pemilihan objek, dengan itu membersihkan mana-mana pilihan sebelum ini.
6. Paparkan menu tindakan
Ia adalah semasa tetikus peristiwa, apabila kita akan mengesahkan jika pemilihan teks dibuat dan mengambil tindakan selanjutnya.
fungsi onMouseUp () var sel = document.getSelection (), txt = sel.toString (); jika (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // some text in the article was selected
Dapatkan rentetan teks yang dipilih dengan memanggil menjalin() kaedah Pemilihan objek. Sekiranya teks yang dipilih tidak kosong, teruskan dan dapatkan julat pertama daripada Pemilihan objek.
Julat adalah bahagian terpilih dokumen itu. Biasanya, pengguna akan membuat pilihan tunggal hanya, tidak banyak (dengan menekan kekunci ctrl / cmd), jadi hanya dapatkan objek rentang pertama (di indeks 0) dari pemilihan menggunakan getRangeAt (0).
Sebaik sahaja anda mendapat julat, lihat jika pemilihan bermula dari tempat itu di dalam artikel itu. The startContainer harta rangkaian mengembalikan nod DOM dari mana pemilihan bermula.
Kadang-kadang (apabila anda pilih dalam perenggan), nilainya hanya a nod teks, dalam kes itu elemen induk akan jadi dan ibu bapa unsur akan menjadi (dalam kod sampel dalam catatan ini).
Masa yang lain, apabila anda memilih merentasi pelbagai perenggan, yang startContainer akan jadi dan nod induknya akan menjadi . Oleh itu, dua perbandingan pada yang kedua jika syarat dalam kod di atas.
Sebaik sahaja jika syarat berlalu, sudah tiba masanya ambil menu tindakan dari template dan tambahkan pada dokumen. Letakkan kod di bawah di dalam yang kedua jika pernyataan.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () kaedah mengembalikan nod dari dokumen luaran (dalam kes kita, nod dari ). Apabila ia dipanggil dengan parameter kedua (benar), elemen / nod yang diimport akan datang dengan unsur anaknya.
Anda boleh memasukkan #shareBox di mana sahaja di dalam badan dokumen, Saya telah menambahnya sebelum elemen templat.
7. Letakkan menu tindakan
Kami mahu meletakkan menu tindakan betul di atas & di tengah-tengah kawasan yang dipilih. Untuk berbuat demikian, dapatkan nilai segiempat tepat kawasan yang dipilih menggunakan getBoundingClientRect () kaedah yang mengembalikan saiz dan kedudukan elemen.
Kemudian, kemas kini atas dan ditinggalkan nilai-nilai #shareBox berdasarkan nilai segiempat tepat. Dalam pengiraan yang baru atas dan ditinggalkan nilai-nilai, saya menggunakan Literatur template ES6.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Tambah kefungsian
Sekarang kita menambah menu tindakan berhampiran teks yang dipilih, sudah tiba masanya untuk membuat teks yang dipilih tersedia untuk pilihan menu supaya kita boleh melakukan beberapa tindakan ke atasnya.
Berikan teks yang dipilih kepada a harta peribadi butang kongsi dipanggil 'shareTxt' dan tambah a mousedown pendengar acara ke butang.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The benar parameter addEventListener () menghalang mousedown acara dari menggelegak.
Di dalam onShareClick () pengendali acara, kami masukkan teks yang dipilih ke dalam tweet dengan mengakses shareTxt harta butang.
fungsi onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Sebaik sahaja butang diklik, ia melakukan apa yang sepatutnya dilakukan, kemudian mengeluarkannya dari halaman tersebut. Ia juga akan jelas apa-apa pilihan dalam dokumen itu.
Kod sumber & demo
Dalam demo Codepen di bawah, anda boleh ujian bagaimana menu tindakan berfungsi. Anda juga boleh mencari kod sumber penuh di repo Github kami.
