Jak vytvořit střední-jako plovoucí akční menu
Popularita plovoucí akční nabídky byl na vzestupu, obzvláště protože Medium.com přinesl tuto funkci do módy. Stručně řečeno, plovoucí akční menu se objeví Když vás vyberte nějaký text na webové stránce. V blízkosti výběru se zobrazí nabídka, zobrazující různé akce který umožňuje rychle formátovat, zvýraznit nebo sdílet vybraný text.
V tomto tutoriálu vám ukážu, jak zobrazit nabídky akcí pro vybraný úryvek textu na webové stránce. Naše akční menu umožní uživatelům pípnutí vybraného textu jejich následovníkům.
1. Vytvořte HTML
Starter HTML je jednoduchý, potřebujeme jen nějaký text uživatel si může vybrat. Pro demo budu používat “Hart a lovec” pohádka na dobrou noc jako ukázkový text.
Hart a lovec
Hart byl kdysi…
…
2. Vytvořte šablonu nabídky akcí
Já jsem přidání HTML kódu patří do akčního menu uvnitř živel. Cokoliv je uvnitř tag nebudou vykresleny prohlížeče, dokud není přidán do dokumentu pomocí JavaScriptu.
Nenechávejte zbytečné místo uvnitř tag, protože by to mohlo narušit rozvržení akčního menu, jakmile je vloženo do dokumentu. Jestli chceš, přidat další tlačítka uvnitř #shareBox pro více možností.
3. Vytvořte CSS
CSS pro #shareBox inline kontejner jde takto:
#shareBox width: 30px; výška: 30px; pozice: absolutní;
pozice: absolutní; pravidlo nám dovolí umístěte menu kamkoliv chceme na stránce.
Také jsem stylizoval akční tlačítko uvnitř #shareBox s barvou pozadí a obrazem a v jeho ::po pseudoprvek I přidal trojúhelník pro šipku dolů.
#shareBox> button width: 100%; výška: 100%; barva pozadí: # 292A2B; hranice: žádné; hraniční rádius: 2px; obrys: žádný; kurzor: ukazatel; background-image: url ('share.png'); background-repeat: no-repeat; Pozice pozadí: střed; velikost pozadí: 70%; #shareBox> button :: after position: absolute; obsah: "; border-top: 10px pevná látka # 292A2B; hraniční doleva: 10px pevná transparentní; okrajová: 10px pevná průhledná; vlevo: 5px; horní: 30px; 4. Přidejte obslužné rutiny událostí s JS
Přejdeme k JavaScriptu, musíme přidat obslužné rutiny událostí pro mousedown a myši události zachytit začátek a konec výběru textu.
Můžete také udělat výzkum další výběrové akce jako vybertestart a používat je namísto událostí myši (což by bylo ideální, ale podpora prohlížeče není příliš dobrá).
Taky přidat odkaz na prvek pomocí querySelector () metoda.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkce onMouseDown () funkce onMouseUp () 5. Vymažte předchozí výběr
V mousedown událost, budeme provést nějaké vyčištění, tj. zrušte všechny předchozí volby a příslušnou nabídku akcí.
funkce onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); getSelection () metoda vrátí a Výběr objekt reprezentující rozsahy textu aktuálně vybrané uživatelem a removeAllRange () metodaodstraní všechny rozsahy od stejného Výběr objekt vymazání předchozího výběru.
6. Zobrazte nabídku akcí
Je to během myši událost, kdy budeme Potvrďte, zda byl proveden výběr textu a podniknout další kroky.
funkce onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "článek" || range.startContainer.parentElement.localName === "článek") // nějaký text v článku byl vybrán
Získat vybraný textový řetězec voláním toString () metoda Výběr objekt. Pokud vybraný text není prázdný, pokračujte a dostat první dosah od Výběr objekt.
Rozsah je vybraná část dokumentu. Obvykle se uživatelé a jeden výběr pouze, ne vícenásobně (stisknutím klávesy ctrl / cmd), takže stačí vybrat první objekt rozsahu (při indexu 0) z výběru pomocí getRangeAt (0).
Až budete mít dosah, zjistěte, zda výběr začal z místa, které je uvnitř výrobku. startContainer vlastnost rozsahu vrátí uzel DOM odkud začal výběr.
Někdy (když vy vyberte v rámci odstavce), jeho hodnota je jen a textový uzel, v tom případě jeho rodičovský prvek bude a rodiče prvek bude (v ukázkovém kódu v tomto příspěvku).
Jindy, když vyberete přes více odstavců, startContainer bude a jeho nadřazený uzel bude . Proto dvě srovnání ve druhém -li podmínku ve výše uvedeném kódu.
Jednou -li podmínka prochází, je čas vyvolejte akční nabídku ze šablony a přidejte ji do dokumentu. Umístěte níže uvedený kód uvnitř druhé -li prohlášení.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
importNode () metoda vrátí uzly z externích dokumentů (v našem případě uzly z ). Když se volá s druhým parametrem (skutečný) bude importovaný prvek / uzel s dětskými prvky.
Můžete vložit #shareBox kdekoli v těle dokumentu, Přidal jsem to před prvek šablony.
7. Umístěte akční nabídku
Chceme umístit akční nabídku přímo nad & uprostřed vybrané oblasti. Udělat to tak, získat hodnoty obdélníku pomocí vybrané oblasti getBoundingClientRect () metoda, která vrací velikost a polohu prvku.
Poté aktualizujte horní a vlevo, odjet hodnoty #shareBox na základě hodnot obdélníku. Ve výpočtech nového horní a vlevo, odjet hodnoty jsem použil ES6 šablony literály.
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. Přidejte funkčnost
Nyní, když jsme přidali akční nabídku poblíž vybraného textu, je čas provést vybraný text dostupné pro možnosti menu abychom mohli na něm provést nějakou akci.
Přiřaďte vybraný text znaku a Vlastnost tlačítka sdílení volal 'shareTxt' a přidejte mousedown posluchače události.
var shareBtn = shareBox.querySelector ('tlačítko'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); skutečný parametr addEventListener () zabraňuje mousedown události od probublávání.
Uvnitř onShareClick () obsluha události, my vložte vybraný text do tweetu přístupem k shareTxt vlastnost tlačítka.
funkce onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Jednou klepnutí na tlačítko, dělá to, co má dělat, pak se ze stránky odstraňte. Bude to také zrušte výběr v dokumentu.
Zdrojový kód a demo
V demoverzi Codepen níže můžete test jak funguje menu akcí. Můžete také najít úplný zdrojový kód v našem repo Github.
