Kuidas luua keskmist laadi ujuva tegevuse menüü
Populaarsus ujuva tegevuse menüüd on olnud tõusuteel, eriti kuna Medium.com tõi funktsiooni moes. Lühidalt, ujuva tegevuse menüü ilmub üles kui sa valige mõni tekst veebisaidil. Menüü ilmub valiku lähedale, erinevate tegevuste näitamine mis võimaldab teil valitud teksti kiiresti vormindada, esile tõsta või jagada.
Selles juhendis näitan teile, kuidas kuvada valitud tekstilõigu toimingumenüü veebisaidil. Meie tegevusmenüü võimaldab kasutajatel piiksuma valitud teksti oma järgijatele.
1. Loo HTML
The starter HTML on lihtne, me vajame ainult teksti kasutaja saab valida. Demo jaoks ma kasutan “Hart ja jahimees” unejuttu proovi tekstina.
Hart ja jahimees
Hart oli üks kord…
…
2. Loo toimingumenüü mall
Ma olen HTML-koodi lisamine kuuluvad toimingute menüüsse sees element. Mis iganes on sees silt, see ei tehta brauseritega, kuni see dokumendile lisatakse JavaScript.
Ärge jätke tarbetut ruumi sees silt, kuna see võib häirida toimingute menüü paigutust, kui see on dokumenti lisatud. Kui sa tahad, lisa nuppe sees #shareBox rohkem võimalusi.
3. Loo CSS
CSS jaoks #shareBox inline konteiner läheb niimoodi:
#shareBox laius: 30 px; kõrgus: 30 px; positsioon: absoluutne;
The positsioon: absoluutne; reegel laseb meil asetage menüü kuhu iganes me tahame lehel.
Ma kujundasin ka sees olev nupp #shareBox taustavärvi ja -kujutise ning selle :: pärast pseudoelement I lisatud noolele kolmnurk.
#shareBox> nupp laius: 100%; kõrgus: 100%; taustavärv: # 292A2B; piir: mitte; raadius: 2px; ülevaade: mitte; kursor: pointer; taustapilt: url ('share.png'); taustaproov: korduv; taustapositsioon: keskus; tausta suurus: 70%; #shareBox> nupp :: pärast positsioon: absoluutne; sisu: "; border-top: 10px tahke # 292A2B; vasakpoolne: 10px tahke läbipaistev; piirjoon: 10px tahke läbipaistev; vasak: 5px; ülemine: 30px; 4. Lisage sündmuskäsitlejad JS-iga
Liigudes JavaScripti, peame seda tegema lisage sündmuste käitlejaid Selle eest mousedown ja mouseup sündmused lüüa algus ja lõpp teksti valimisest.
Samuti saate teha uuringuid muud valikuüritused nagu näiteks valige käivitus ja kasutage neid hiire sündmuste asemel (mis oleks ideaalne, kuid nende brauseri tugi pole veel väga hea).
Samuti lisada viide Euroopa elementi kasutades querySelector () meetod.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funktsioon onMouseDown () funktsioon onMouseUp () 5. Tühjendage eelmised valikud
In mousedown sündmus, me tehke mõned puhastused, see tähendab, et kustutatakse kõik eelmised valikud ja kuuluvate tegevuste menüü.
funktsioon onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); kui (shareBox! == null) shareBox.remove (); The getSelection () meetod tagastab a Valik objekti tekstivahemikke kasutaja poolt praegu valitud removeAllRange () meetodeemaldab kõik vahemikud samast Valik seega objekti eelmise valiku tühjendamine.
6. Kuva toimingumenüü
See on ajal mouseup sündmus, kui me seda teeme kinnitage, kas tekst valiti ja võtta täiendavaid meetmeid.
funktsioon onMouseUp () var sel = document.getSelection (), txt = sel.toString (); kui (txt! == "") var range = sel.getRangeAt (0); kui (vahemik.startContainer.parentElement.parentElement.localName === "artikkel" || range.startContainer.parentElement.localName === "artikkel") // on valitud artikkel tekstist
Hangi valitud tekstistring helistades toString () meetod Valik objekti. Kui valitud tekst ei ole tühi, siis mine edasi saada esimene vahemik alates Valik objekti.
Vahemik on valitud osa dokumendi kohta. Tavaliselt teevad kasutajad a üks valik ainult, mitte mitmekordne (vajutades klahvi ctrl / cmd), siis lihtsalt vali esimesest vahemikobjektist (indeksil 0) getRangeAt (0).
Kui sul on vahemik, vaadake, kas valik algas sellisest kohast artikli sees. The startContainer vahemiku omadus tagastab DOM sõlme kust algas valik.
Mõnikord (kui sa valige lõigus), selle väärtus on vaid a tekstisõlm, sellisel juhul selle vanemelement saab ja vanem element on (selle postituse näidiskoodis).
Muudel aegadel, kui valite üle mitme lõigu, the startContainer saab ja selle põhisõlm on . Seega kaks võrdlust teises kui ülaltoodud koodis.
Kui kui seisund möödub, on aeg tõmmake tegevusmenüü mallist ja lisage see dokumendile. Asetage allolev kood teise sees kui avaldus.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () meetod tagastab sõlmede välistest dokumentidest (meie puhul sõlmed alates ). Kui seda nimetatakse teise parameetriga (tõsi), imporditud element / sõlme tulevad koos oma lapse elementidega.
Saate sisestada #shareBox kõikjal dokumendi kehas, Olen lisanud selle enne malli elementi.
7. Asetage toimingumenüü
Soovime paigutada tegevusmenüü ülalpool & valitud ala keskel. Selleks, saada ristküliku väärtused valitud ala abil getBoundingClientRect () meetod, mis tagastab elemendi suuruse ja asukoha.
Seejärel värskendage top ja vasakule väärtused #shareBox ristküliku väärtuste alusel. Uute arvutuste puhul top ja vasakule väärtusi, kasutasin seda ES6 malle.
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. Lisage funktsionaalsus
Nüüd, kui lisasime valitud teksti lähedale tegevusmenüü, on aeg teha valitud tekst menüüvalikute jaoks et saaksime sellega toime tulla.
Määrake valitud tekst a jagamise nupu kohandatud omadus kutsus 'shareTxt' ja lisa a mousedown sündmuse kuulaja nupule.
var shareBtn = shareBox.querySelector ('nupp'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The tõsi parameeter addEventListener () takistab mousedown sündmus mullist.
Sisse onShareClick () sündmuste käitleja, me sisestage valitud tekst piiksuma juurdepääsuga shareTxt nupu omadus.
funktsioon onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Kui nupule klõpsatakse, see teeb seda, mida peaks tegema, seejärel eemaldage see lehelt. See on ka kustutage kõik valikud dokumendis.
Lähtekood ja demo
Allpool olevas Codepeni demos saate test kuidas toimingumenüü toimib. Võite leida ka täielik lähtekood meie Github repos.
