Kaip sukurti vidutinio dydžio plaukiojančių veiksmų meniu
Populiarumas plaukiojančių veiksmų meniu augo, ypač dėl to, kad „Medium.com“ atnešė funkciją į madą. Trumpai tariant, plaukiojančio veiksmo meniu iššoka kada tu pasirinkite tekstą tinklalapyje. Meniu pasirodo šalia pasirinkimo, rodomi skirtingi veiksmai kad galėtumėte greitai formatuoti, paryškinti arba bendrinti pasirinktą tekstą.
Šioje instrukcijoje parodysiu, kaip rodyti pasirinkto teksto fragmento veiksmų meniu tinklalapyje. Mūsų veiksmų meniu leis vartotojams parodyti pasirinktą tekstą jų pasekėjams.
1. Sukurkite HTML
The starteris HTML yra paprastas, mums reikia tik šiek tiek teksto vartotojas gali pasirinkti. Demo naudosiu “Hartas ir medžiotojas” pasaka prieš miegą kaip pavyzdinis tekstas.
Hartas ir medžiotojas
Hartas kažkada buvo…
…
2. Sukurkite veiksmų meniu šabloną
aš pridėti HTML kodą priklauso veiksmų meniu viduje elementas. Kas yra viduje žyma, ji nebus teikiama naršyklės, kol ji bus pridėta prie dokumento naudojant „JavaScript“.
Nepalikite nereikalingos vietos viduje žyma, nes tai gali sutrikdyti veiksmo meniu išdėstymą, kai jis įterpiamas į dokumentą. Jeigu nori, pridėti daugiau mygtukų viduje #shareBox daugiau galimybių.
3. Sukurkite CSS
CSS #shareBox Inline konteineris eina taip:
#shareBox plotis: 30px; aukštis: 30px; pozicija: absoliutus;
The pozicija: absoliutus; taisyklė leis mums meniu, kur tik norite puslapyje.
Aš taip pat sukūriau veiksmo mygtukas #shareBox su fono spalva ir atvaizdu bei jo :: po pseudo elementas I pridėjo žemyn rodomą trikampį.
#shareBox> mygtukas plotis: 100%; aukštis: 100%; fono spalva: # 292A2B; siena: nėra; pasienio spindulys: 2px; kontūras: nėra; žymeklis: žymeklis; fono paveikslėlis: url ('share.png'); fono kartojimas: ne kartoti; fono padėtis: centras; fono dydis: 70%; #shareBox> mygtukas :: po pozicija: absoliutus; turinys: "; border-top: 10px kietas # 292A2B; sienos kairėje: 10px kietas skaidrus, dešinė dešinėje: 10px kietas skaidrus, kairėje: 5px; viršuje: 30px; 4. Pridėkite įvykių tvarkytojus su JS
Turime pereiti prie „JavaScript“ pridėti įvykių tvarkytojų už mousedown ir pele renginiai užfiksuoti pradžią ir pabaigą teksto pasirinkimo.
Taip pat galite atlikti tyrimus kitus atrankos įvykius toks kaip pasirinkite pradžią ir juos naudoti vietoj pelės įvykių (tai būtų idealus, bet nuo to laiko jų naršyklės palaikymas nėra labai geras).
Taip pat pridėti nuorodą į elementą naudojant querySelector () metodas.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkcija onMouseDown () funkcija onMouseUp () 5. Išvalykite ankstesnius pasirinkimus
Viduje konors mousedown įvykis atlikti tam tikrą valymą, t. y. išvalykite bet kurį ankstesnį pasirinkimą ir priklausomą veiksmo meniu.
funkcija onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); jei (shareBox! == null) shareBox.remove (); The getSelection () metodas grąžina a Pasirinkimas objektą reiškia teksto intervalus dabar pasirinko vartotojas ir removeAllRange () metodaspašalina visus diapazonus iš to paties Pasirinkimas tokiu būdu bet kurio ankstesnio pasirinkimo išvalymas.
6. Rodyti veiksmų meniu
Tai per pele įvykis, kai mes patvirtinkite, ar buvo pasirinktas teksto pasirinkimas ir imtis tolesnių veiksmų.
funkcija onMouseUp () var sel = document.getSelection (), txt = sel.toString (); jei (txt! == "") var range = sel.getRangeAt (0); jei (range.startContainer.parentElement.parentElement.localName === "straipsnis" || range.startContainer.parentElement.localName === "straipsnis") // buvo pasirinktas tam tikras straipsnis tekstas
Gaukite pasirinktą teksto eilutę skambindami įString () metodas Pasirinkimas objektą. Jei pasirinktas tekstas nėra tuščias, eikite į priekį ir gauti pirmąjį diapazoną nuo Pasirinkimas objektą.
diapazonas yra pasirinkta dalis dokumento. Paprastai vartotojai padarys a vieną pasirinkimą tik, ne kelis (paspaudus klavišą ctrl / cmd), todėl tiesiog pasirinkite pirmojo diapazono objektą (0 indeksu) iš pasirinkimo naudojant getRangeAt (0).
Kai turėsite diapazoną, pažiūrėkite, ar pasirinkimas prasidėjo nuo tos vietos, kur viduje. The startContainer diapazono ypatybė grąžina DOM mazgas iš kur prasideda atranka.
Kartais (kai jūs pasirinkite per vieną pastraipą), jo vertė yra tik a teksto mazgas, tokiu atveju jos pagrindinis elementas bus ir. \ t elementas bus (mėginio kode šiame pranešime).
Kitais atvejais, kai pasirinksite per kelias dalis, startContainer bus ir jo pagrindinis mazgas bus . Taigi du palyginimai antroje jei sąlyga pirmiau pateiktame kode.
Kartą jei būklė praeina, atėjo laikas parsisiųsti veiksmo meniu iš šablono ir pridėkite jį prie dokumento. Įdėkite kodą žemiau viduje jei pareiškimas.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () metodas grąžina mazgus iš išorinių dokumentų (mūsų atveju mazgai nuo ). Kai jis vadinamas antruoju parametru (tiesa), importuotas elementas / mazgas bus ateiti su savo vaikų elementais.
Galite įterpti #shareBox bet kuriame dokumento korpuse, Pridėjau jį prieš šablono elementą.
7. Įdėkite veiksmų meniu
Norime įdėti veiksmų meniu pirmiau & pasirinktos srities viduryje. Norėdami tai padaryti, gauti stačiakampio reikšmes pasirinktos srities naudojant getBoundingClientRect () metodas, kuris grąžina elemento dydį ir padėtį.
Tada atnaujinkite viršuje ir kairėje reikšmės #shareBox pagal stačiakampio vertes. Skaičiuojant naują viršuje ir kairėje naudoju ES6 šablonai.
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. Pridėkite funkcionalumą
Dabar, kai pridėjome veiksmų meniu šalia pasirinkto teksto, atėjo laikas padaryti pasirinktą tekstą prieinama meniu parinktims kad galėtume atlikti tam tikrus veiksmus.
Priskirkite pasirinktą tekstą a pasirinktinio bendrinimo mygtuko ypatybė vadinamas „shareTxt“ ir pridėkite a mousedown įvykio klausytojas.
var shareBtn = shareBox.querySelector ('mygtukas'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, tiesa); The tiesa parametras addEventListener () neleidžia mousedown įvykis nuo burbuliavimo.
Viduje onShareClick () įvykių tvarkytojas, mes įterpti pasirinktą tekstą į „tweet“ prisijungdami prie shareTxt mygtuko nuosavybė.
funkcija onShareClick () window.open („https://twitter.com/intent/tweet?text=$ this.shareTxt“); this.remove (); document.getSelection (). removeAllRanges ()
Kartą mygtukas paspaudžiamas, ji daro tai, ką turėtų daryti, tada pašalinkite save iš puslapio. Taip pat išvalykite bet kokį pasirinkimą dokumente.
Šaltinis ir demo
Žemiau esančioje „Codepen“ demonstracijoje galite bandymas kaip veikia veiksmų meniu. Taip pat galite rasti visas pirminis kodas mūsų „Github“ repo.
