The Hart og Hunter
The Hart var en gang ...
...
no.hideout-lastation.com
Paradis For Designere Og Utviklere
Slik lager du en middels flytende handlingsmeny
Populariteten til flytende handling-menyer har vært på vei oppover, spesielt siden Medium.com brakte inn funksjonen til vogue. Kort sagt, den flytende handling-menyen dukker opp når du velger litt tekst på en nettside. Menyen vises i nærheten av valget, og viser forskjellige handlinger som lar deg raskt formatere, markere eller dele den valgte teksten.
I denne veiledningen viser jeg deg hvordan du viser en handlingsmeny for en valgt tekstbit på en nettside. Vår handlingsmeny vil gjøre det mulig for brukerne å tweet den valgte teksten til sine følgere.
1. Lag HTML Startpakken HTML er enkel, vi trenger bare litt tekst brukeren kan velge. For demoen bruker jeg "The Hart and the Hunter" sengetidshistorien som prøvetekst .
2. Lag handlingsmenemalens mal
Jeg legger til HTML-koden som tilhører handlingsmenyen inne i en element . Hva som helst inni tag, vil det ikke bli gjengitt av nettlesere før det legges til dokumentet ved hjelp av JavaScript .
Ikke la noe unødvendig plass inne i tag, da det kan forstyrre handlingsmenyoppsettet når det er satt inn i dokumentet. Hvis du vil, legg til flere knapper i #shareBox for flere alternativer.
3. Opprett CSS
CSS for #shareBox inline-beholderen går slik:
#shareBox {bredde: 30px; høyde: 30px; posisjon: absolutt; } position:absolute; regelen vil la oss plassere menyen hvor som helst vi vil ha på siden.
Jeg stylte også handlingsknappen i #shareBox med en bakgrunnsfarge og et bilde og i sin ::after pseudo-elementet la jeg en trekant for en nedpil .
#shareBox> knapp {bredde: 100%; høyde: 100%; bakgrunnsfarge: # 292A2B; grense: ingen; border-radius: 2px; oversikt: ingen; markør: pointer; bakgrunnsbilde: url ('share.png'); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 70%; } #shareBox> knapp :: etter {posisjon: absolutt; innhold: ''; border-top: 10px solid # 292A2B; border-left: 10px solid gjennomsiktig; border-right: 10px solid gjennomsiktig; igjen: 5px; topp: 30px; } 4. Legg til hendelsesbehandlere med JS
Når vi går videre til JavaScript, må vi legge til hendelsesbehandlere for mousedown og mouseup hendelser for å fange begynnelsen og slutten av mouseup .
Du kan også gjøre forskning for andre selectstart for eksempel selectstart og bruk dem i stedet for selectstart (som ville være ideelle, men likevel er nettleserstøtten deres ikke veldig bra).
Legg også til en referanse til element ved hjelp av querySelector() -metoden.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funksjon onMouseDown () {} funksjon onMouseUp () {} 5. Fjern tidligere valg
I mousedown hendelsen skal vi utføre noen opprydding, dvs. slette et tidligere valg og tilhørende handlingsmeny.
funksjon onMouseDown () {document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); hvis (shareBox! == null) shareBox.remove (); } getSelection() returnerer et getSelection() representerer tekstområdene som for øyeblikket er valgt av brukeren, og metoden removeAllRange() fjerner alle områder fra samme removeAllRange(), og fjerner dermed et tidligere valg .
6. Vis handlingsmenyen
Det er under mouseup hendelsen, når vi vil bekrefte om et mouseup ble gjort og ta ytterligere tiltak.
funksjon onMouseUp () {var sel = document.getSelection (), txt = sel.toString (); hvis (txt! == "") {var range = sel.getRangeAt (0); hvis (range.startContainer.parentElement.parentElement.localName === "artikkel" || range.startContainer.parentElement.localName === "artikkel") {// noen tekst i artikkelen ble valgt}}} Få den valgte tekststrengen ved å ringe toString() -metoden til Selection . Hvis den valgte teksten ikke er tom, fortsett og hent det første området fra Selection .
Område er den valgte delen av dokumentet. Vanligvis bruker brukerne bare et enkelt utvalg, ikke flere (ved å trykke på ctrl / cmd-tasten), så bare få det første getRangeAt(0) ved indeks 0) fra valget ved hjelp av getRangeAt(0) .
Når du har rekkevidden, se om valget startet fra et sted som er inne i artikkelen . startContainer egenskapen til serien returnerer DOM-noden der valget startet .
Noen ganger (når du velger i et avsnitt ), er verdien bare en tekstnode, i så fall vil dens overordnede element være
og forelderen til
elementet vil være
Andre ganger, når du velger på tvers av flere avsnitt, vil startContainer være
og dens overordnede node vil være if tilstanden i den ovennevnte koden.
Når if tilstanden går, er det på tide å hente handlingsmenyen fra malen og legge den til i dokumentet. Legg koden under i det andre if erklærer.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode() returnerer noder fra eksterne dokumenter (i vårt tilfelle, noder fra ). Når det kalles med den andre parameteren ( true ), kommer det importerte elementet / noden med sine barnelementer .
Du kan sette #shareBox hvor som helst i dokumentkroppen, jeg har lagt den til i #shareBox .
7. Plasser handlingsmenyen
Vi ønsker å plassere handlingsmenyen rett over og i midten av det valgte området . For å gjøre det, få rektangulverdiene for det valgte området ved hjelp av getBoundingClientRect() som returnerer størrelsen og plasseringen til et element.
Oppdater deretter top og left til #shareBox basert på rektangelverdiene . I beregningene av de nye top og left benyttet jeg ES6-mall-bokstaver .
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. Legg til funksjonalitet
Nå da vi la til handlingsmenyen i nærheten av den valgte teksten, er det på tide å gjøre den valgte teksten tilgjengelig for menyalternativene, slik at vi kan utføre noen handlinger på den.
Tilordne den valgte teksten til en egendefinert egenskap på delingsknappen kalt 'shareTxt' og legg til en mousedown event-lytter til knappen.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Den true parameteren til addEventListener() forhindrer at mousedown hendelsen blir boblet .
Inne i onShareClick(), setter vi inn den valgte teksten i en tweet ved å få tilgang til shareTxt egenskapen til knappen.
funksjon onShareClick () {window.open (`https://twitter.com/intent/tweet?text=$ {this.shareTxt }`); this.remove (); document.getSelection (). removeAllRanges ()} Når knappen er klikket, gjør den hva den skal gjøre, og fjerner seg fra siden. Det vil også fjerne et hvilket som helst valg i dokumentet.
Kildekode og demo
I Codepen-demoen nedenfor kan du teste hvordan handlingsmenyen fungerer. Du kan også finne full kildekode i Github repo.
19 Home Automation Gadgets du bør vite
Leter du etter en gaveide for dine tekniske kunnskapsrike venner og familiemedlemmer? Hva med smarte IoT-baserte hjemmautomatiseringsgrensesnitt? Slike futuristiske gadgets lette folks liv, muliggjøre alltid underholdning og hjelp til å automatisere hjemmearbeid .Det er ikke alt, disse gadgets vil ikke engang være en byrde på lommen . Fi
10 må ha Chrome-sikkerhetsutvidelser
Fra å administrere faner for å øke produktiviteten, har Chrome en hel masse praktiske utvidelser for å gi brukeren bedre mulighet . For meg er Chrome nettleseren som gjør det mulig å administrere mine økonomiske kontoer og sensitive data. Men for å sikre at all denne informasjonen er trygt, bruker jeg flere sikkerhetsutvidelser i Chrome som viser seg å være helt nyttige.Deler med
![Hvordan krom vant krigen på nettleserne [Infographic]](http://hideout-lastation.com/img/tech-design-tips/400/how-chrome-won-war-browsers.jpg)
