Så här skapar du en meningsliknande flytande åtgärdsmeny
Populariteten av flytande åtgärder menyer har stigit, speciellt sedan Medium.com tog funktionen i mode. Kortfattat, menyn för flytande åtgärder dyker upp när du välj lite text på en webbsida. Menyn visas nära valet, visar olika åtgärder som låter dig snabbt formatera, markera eller dela den valda texten.
I denna handledning visar jag dig hur man visar en Åtgärdsmeny för en vald textbit på en webbsida. Vår handlingsmeny gör det möjligt för användare att tweet den valda texten till sina anhängare.
1. Skapa HTML
De start HTML är enkelt, vi behöver bara lite text användaren kan välja För demo ska jag använda “Hart och jägaren” godnattsaga som provtext.
Hart och jägaren
Hart var en gång ...
...
2. Skapa handlingsmenyns mall
Jag är lägger till HTML-koden tillhör åtgärdsmenyn inuti a Lämna inte onödigt utrymme inuti CSS för De Jag stylade också åtgärdsknapp inuti Att flytta till JavaScript måste vi lägg till händelsehanterare för Du kan också göra forskning för andra val händelser som Också lägg till en referens till I De Det är under Hämta den valda textsträngen genom att ringa Räckvidd är vald del av dokumentet. Vanligtvis kommer användarna att göra en singelval bara, inte multipel (genom att trycka på ctrl / cmd-tangenten), så få bara det första intervallobjektet (vid index 0) från valet med hjälp av När du har sortimentet, se om valet startade från ett ställe som är inuti artikeln. De Ibland (när du välj inom ett stycke), dess värde är bara en textnod, i vilket fall dess moderelementet kommer vara och föräldern till element kommer att vara Andra tider, när du väljer över flera stycken, de och dess moderkod kommer att vara När De Du kan infoga Vi vill placera åtgärdsmenyn precis ovanför & mitt i det valda området. Att göra så, få rektangelvärdena av det valda området med hjälp av Uppdatera sedan Nu när vi lagt till åtgärdsmenyn nära den valda texten är det dags att göra den markerade texten tillgänglig för menyalternativen så att vi kan utföra några åtgärder på den. Tilldela den valda texten till en egen egenskap av delningsknappen kallad De Inuti När knappen klickas, det gör vad den ska göra, ta bort sig från sidan. Det kommer också Rensa valet i dokumentet. I Codepen demo nedan kan du testa hur handlingsmenyn fungerar. Du kan också hitta fullständig källkod i vårt Github repo. element. Vad som än ligger inom tag det kommer inte att göras av webbläsare tills det läggs till i dokumentet använder JavaScript.
taggen, eftersom det kan störa handlingsmenylayouten när den sätts in i dokumentet. Om du vill, lägg till fler knappar inuti #shareBox för fler alternativ. 3. Skapa CSS
#shareBox inline-behållare går så här: #shareBox width: 30px; höjd: 30px; position: absolut;
position: absolute; regel kommer att låta oss placera menyn vart vi vill på sidan.#shareBox med bakgrundsfärg och bild och i dess ::efter pseudo-element I lagt till en triangel för en nedåtpil. #shareBox> knapp bredd: 100%; höjd: 100%; bakgrundsfärg: # 292A2B; gränsen: ingen; gränsstråle: 2px; kontur: ingen; markör: pekare; bakgrundsbild: url ('share.png'); bakgrundsrepetition: nej-repetera; bakgrundsställning: center; bakgrundsstorlek: 70%; #shareBox> knapp :: efter position: absolute; innehåll: "; gränsen-top: 10px solid # 292A2B; gränsen-vänster: 10px solid transparent, gränsen-höger: 10px solid transparent, vänster: 5px; topp: 30px; 4. Lägg till händelsehanterare med JS
mousedown och mouseup händelser till fånga början och slutet av textvalet.selectstart och använd dem istället för mushändelser (vilket skulle vara perfekt men ändå är deras webbläsare inte särskilt bra). element med hjälp av querySelector () metod. document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funktion onMouseDown () funktion onMouseUp () 5. Rensa tidigare val
mousedown händelse, vi ska utföra vissa rengöring, d.v.s. rensa vilket tidigare val som helst och den tillhörande handlingsmenyn. funktion onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); om (shareBox! == null) shareBox.remove (); getSelection () Metoden returnerar a Urval objekt representerar textintervall för närvarande valda av användaren och removeAllRange () metodtar bort alla intervall från samma Urval objekt, sålunda rensa eventuella tidigare val.6. Visa handlingsmenyn
mouseup händelse när vi kommer Bekräfta om ett textval gjordes och vidta ytterligare åtgärder. funktion onMouseUp () var sel = document.getSelection (), txt = sel.toString (); om (txt! == "") var range = sel.getRangeAt (0); om (range.startContainer.parentElement.parentElement.localName === "artikel" || range.startContainer.parentElement.localName === "artikel") // någon text i artikeln valdes
att stränga() metod för Urval objekt. Om den markerade texten inte är tom, fortsätt och få det första sortimentet från Urval objekt.getRangeAt (0).startContainer egenskapen hos intervallet returnerar DOM-noden varifrån valet började.startContainer kommer vara om villkor i ovanstående kod. om skick passerar, det är dags att hämta handlingsmenyn från mallen och lägg till den i dokumentet. Placera koden nedan inuti den andra om påstående. document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () metod returnerar noder från externa dokument (i vårt fall, noder från ). När det kallas med den andra parametern (Sann), kommer det importerade elementet / noden att kom med sina barnelement. #shareBox var som helst i dokumentkroppen, Jag har lagt till det före mallelementet.7. Placera handlingsmenyn
getBoundingClientRect () metod som returnerar storleken och läget för ett element.topp och vänster värden av #shareBox baserat på rektangelvärdena. I beräkningarna av den nya topp och vänster värden som jag använde ES6 mall bokstäver. var rekt = 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. Lägg till funktionalitet
'ShareTxt' och lägg till en mousedown händelse lyssnare på knappen. var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ("mousedown", onShareClick, true); Sann parameter för addeventlistener () förhindrar mousedown händelse från bubblor.onShareClick () händelsehanterare, vi sätt in den valda texten i en tweet genom att komma åt shareTxt egenskapen hos knappen. funktion onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Källkod & demo
