Kako ustvariti srednje-podoben plavajoči meni aktivnosti
Priljubljenost menija plavajočega dejanja je bilo v porastu, še posebej, ker je Medium.com predstavil funkcijo v modi. Na kratko, meni plavajočega dejanja pops up ko ste izberite nekaj besedila na spletni strani. Meni se prikaže blizu izbire, različna dejanja ki vam omogočajo hitro oblikovanje, označevanje ali skupno rabo izbranega besedila.
V tem vodiču vam bom pokazal, kako prikazati meni akcije za izbrani del besedila na spletni strani. V meniju za akcije bodo uporabniki lahko dostopali Cvrkutati izbrano besedilo svojim privržencem.
1. Ustvarite HTML
The starter HTML je preprost, potrebujemo samo nekaj besedila uporabnik lahko izbere. Za demo, bom uporabil “Hart in Hunter” Zgodba za spanje kot vzorčno besedilo.
Hart in Hunter
Hart je bil nekoč ...
…
2. Ustvarite predlogo menija dejanj
Sem dodajanje kode HTML pripadajo meniju dejanj znotraj element. Karkoli je v notranjosti tag ne bo prikazano brskalnikov, dokler se ne doda dokumentu z uporabo JavaScripta.
Ne puščajte nepotrebnega prostora znotraj oznaka, saj to lahko moti postavitev menija dejanj, ko je vstavljena v dokument. Če želiš, dodajte več gumbov znotraj #shareBox za več možnosti.
3. Ustvarite CSS
CSS za #shareBox inline container je takole:
#shareBox width: 30px; višina: 30px; položaj: absolutno;
The položaj: absolutno; pravilo nam bo dovolilo postavite meni kjerkoli želimo na strani.
Prav tako sem oblikoval gumb za ukrepanje znotraj #shareBox z barvo ozadja in sliko ter v svoji :: po psevdoelement I dodal trikotnik za puščico navzdol.
#shareBox> gumb width: 100%; višina: 100%; barva ozadja: # 292A2B; meja: nič; obrobni polmer: 2px; oris: nič; kazalec: kazalec; ozadje-slika: url ('share.png'); ponovitev v ozadju: brez ponovitve; položaj ozadja: središče; velikost ozadja: 70%; #shareBox> button :: after position: absolute; vsebina: "; border-top: 10px solid # 292A2B; obroba levo: 10px trdna transparentna; obroba desno: 10px trdna transparentna; leva: 5px; vrh: 30px; 4. Dodajte obdelovalce dogodkov z JS
Če se premaknemo na JavaScript, moramo to storiti dodajte obdelovalce dogodkov za mousedown in miško dogodkov zajemite začetek in konec izbire besedila.
Prav tako lahko opravljate raziskave za druge izbirne dogodke kot naprimer izberite začetek in jih uporabite namesto dogodkov z miško (kar bi bilo idealno, vendar še ni podpore za brskalnik).
Tudi dodajte sklic do element z uporabo querySelector () metodo.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkcija onMouseDown () funkcija onMouseUp () 5. Počistite prejšnje izbire
V mousedown dogodka, bomo opravite nekaj čiščenja, torej izbrišite vse predhodne izbire in pripadajoči meni dejanj.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); The getSelection () metoda vrne a Izbira predmet predstavljajo obsege besedila trenutno izbere uporabnik in removeAllRange () metodoodstrani vse razpone iz istega Izbira predmet čiščenje predhodne izbire.
6. Prikažite meni dejanja
To je med miško dogodek, ko bomo potrdite, če ste izbrali besedilo in sprejmejo nadaljnje ukrepe.
funkcija onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // je bilo v članku izbrano nekaj besedila
Pridobite izbrani besedilni niz s klicem toString () metodo. \ t Izbira predmet. Če izbrano besedilo ni prazno, nadaljujte in dobil prvi razpon Iz Izbira predmet.
Območje ali je izbrani del dokumenta. Običajno bodo uporabniki naredili ena izbira samo, ne več (s pritiskom na tipko ctrl / cmd), zato dobite prvi predmet obsega (pri indeksu 0) iz izbora z uporabo getRangeAt (0).
Ko dobite obseg, preverite, ali se je izbira začela z mesta, ki je znotraj izdelka. The startContainer lastnost obsega vrne vozlišče DOM od koder se je začel izbor.
Včasih (ko ste izberite v odstavku), njegova vrednost je samo a besedilno vozlišče, v tem primeru je njegova matični element bo in matično. \ t element (v vzorčni kodi v tej objavi).
V drugih primerih, ko izberete v več odstavkih, startContainer bo in njegovo nadrejeno vozlišče bo . Zato dve primerjavi v drugem če v zgornji kodi.
Enkrat če čas je čas poiščite meni dejanj iz predloge in jo dodajte v dokument. Postavite spodnjo kodo znotraj drugega če izjavo.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () metodo vrne vozlišča iz zunanjih dokumentov (v našem primeru vozlišča od ). Ko se pokliče z drugim parametrom (prav), bo uvožen element / vozlišče prihajajo z otrokovimi elementi.
Vstavite lahko #shareBox kjerkoli v telesu dokumenta, Dodal sem ga pred elementom predloge.
7. Postavite meni dejanja
Želimo uvrstiti meni dejanj desno zgoraj & na sredini izbranega območja. Narediti tako, dobite pravokotne vrednosti izbranega območja z uporabo getBoundingClientRect () metoda, ki vrne velikost in položaj elementa.
Nato posodobite na vrh in levo vrednosti. \ t #shareBox temelji na vrednostih pravokotnika. V izračunih novega na vrh in levo uporabil Študijski literali 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. Dodajanje funkcionalnosti
Zdaj, ko smo poleg izbranega besedila dodali meni dejanj, je čas, da izberete izbrano besedilo možnosti menijev tako da bomo lahko na njem izvedli nekaj dejanj.
Izbrano besedilo dodelite a lastnost po meri gumba za skupno rabo imenuje "shareTxt" in dodajte a mousedown poslušalca dogodka na gumb.
var shareBtn = shareBox.querySelector ('gumb'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The prav parameter addEventListener () preprečuje mousedown dogodek iz mehurčkov.
V notranjosti onShareClick () organizator dogodkov izbrano besedilo vstavite v tweet z dostopom do shareTxt lastnost gumba.
funkcija onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Enkrat kliknite gumb, to počne, kar naj bi storil, nato pa se odstrani s strani. Prav tako bo počistite vse izbire v dokumentu.
Izvorna koda in predstavitev
V demonu Codepen spodaj lahko test kako deluje meni dejanj. Najdete ga lahko tudi polna izvorna koda v našem Github repo.
