Како да креирате средњи као Флоатинг Ацтион Мену
Популарност изборници с плутајућом акцијом је у порасту, поготово зато што је Медиум.цом ову значајку увео у моду. Укратко, мени плутајуће акције искочи када ти изаберите неки текст на веб страници. Мени се појављује поред избора, показују различите акције који вам омогућују брзо форматирање, означавање или дијељење одабраног текста.
У овом водичу показат ћу вам како се приказује изборник акција за одабрани исјечак текста на веб страници. Наш акцијски мени ће корисницима омогућити твитајте изабрани текст својим следбеницима.
1. Креирајте ХТМЛ
Тхе стартер ХТМЛ је једноставан, само нам је потребно неки текст корисник може да изабере. За демо, ја ћу користити “Харт и Хунтер” бедтиме стори као узорак текста.
Харт и Хунтер
Харт је некада био ...
…
2. Креирајте предложак менија акције
Ја сам додавање ХТМЛ кода који припадају менију акција унутра а елемент. Шта год да је унутра таг, ит неће бити приказано прегледницима док се не дода у документ усинг ЈаваСцрипт.
Не остављајте непотребан простор унутар као што би то могло пореметити распоред изборника акција када се уметне у документ. Ако желиш, додајте још дугмади у #схареБок за више опција.
3. Креирајте ЦСС
ЦСС за #схареБок инлине цонтаинер иде овако:
#схареБок видтх: 30пк; хеигхт: 30пк; позиција: апсолутна;
Тхе позиција: апсолутна; правило ће нас пустити ставите мени где год желимо на страници.
Такође сам и обликовао дугме акције #схареБок са бојом позадине и сликом иу њеној ::после псеудо-елемент И додао је троугао за стрелицу надоле.
#схареБок> буттон видтх: 100%; висина: 100%; бацкгроунд-цолор: # 292А2Б; граница: ниједна; бордер-радиус: 2пк; Оутлине: ноне; курсор: показивач; бацкгроунд-имаге: урл ('схаре.пнг'); позадина-понављање: нема понављања; позиција у позадини: центар; величина позадине: 70%; #схареБок> буттон :: афтер поситион: абсолуте; цонтент: "; бордер-топ: 10пк солид # 292А2Б; бордер-лефт: 10пк солид транспарент; бордер-ригхт: 10пк солид транспарент; лефт: 5пк; топ: 30пк; 4. Додајте руковатеље догађајима са ЈС
Прелазимо на ЈаваСцрипт, морамо додајте руковатеље догађајима за моуседовн и моусеуп евентс то ухватите почетак и крај избора текста.
Такође можете да урадите истраживање за друге селекције као такав селецтстарт и користити их уместо миша (што би било идеално али за сада подршка за прегледач није баш добра).
Такође додај референцу до елемент помоћу куериСелецтор () метода.
доцумент.аддЕвентЛистенер ('моуседовн', онМоусеДовн); доцумент.аддЕвентЛистенер ('моусеуп', онМоусеУп); вар темп = доцумент.куериСелецтор ('# схареБокТемплате'); фунцтион онМоусеДовн () функција онМоусеУп () 5. Обришите претходне селекције
Ин тхе моуседовн догађај, ми ћемо обавите мало чишћење, очистити било који претходни избор и припадајући мени акције.
фунцтион онМоусеДовн () доцумент.гетСелецтион (); ремовеАллРангес (); вар схареБок = доцумент.куериСелецтор ('# схареБок'); иф (схареБок! == нулл) схареБок.ремове (); Тхе гетСелецтион () метода враћа а Селецтион објекат представља опсег текста тренутно изабран од стране корисника и ремовеАллРанге () методауклања све опсеге из истог Селецтион предмет, тако брисање претходне селекције.
6. Прикажите изборник акција
То је током моусеуп догађај, када ћемо потврдите да ли је направљен одабир текста и предузети даље акције.
фунцтион онМоусеУп () вар сел = доцумент.гетСелецтион (), ткт = сел.тоСтринг (); иф (ткт! == "") вар ранге = сел.гетРангеАт (0); иф (ранге.стартЦонтаинер.парентЕлемент.парентЕлемент.лоцалНаме === "артицле" || ранге.стартЦонтаинер.парентЕлемент.лоцалНаме === "артицле") // неки текст у чланку је изабран
Набавите изабрани текстуални низ позивом тоСтринг () метода Селецтион објекат. Ако одабрани текст није празан, идите напријед и добити први распон од Селецтион објекат.
Домет је одабрани део документа. Типично, корисници ће направити а сингле селецтион само, не вишеструко (притискањем тастера цтрл / цмд), зато само изаберите објекат првог опсега (на индексу 0) из селекције гетРангеАт (0).
Када добијете опсег, погледајте да ли је селекција почела са места које је унутар чланка. Тхе стартЦонтаинер својство распона враћа ДОМ чвор одакле почиње селекција.
Понекад (када изаберите унутар пасуса), његова вредност је само а тект ноде, у ком случају је његов парент елемент ће бити и родитељ елемент ће бити (у огледном коду у овом посту).
Друга времена, када одаберете на више параграфа, тхе стартЦонтаинер ће бити и његов родитељски чвор ће бити . Отуда два поређења и секунди ако услов у горњем коду.
Када се ако време пролази, време је дохватите изборник акција из предлошка и додајте га у документ. Поставите код испод унутар другог ако изјава.
доцумент.боди.инсертБефоре (доцумент.импортНоде (темп.цонтент, труе), темп);));
Тхе импортНоде () метода враћа чворове из спољних докумената (у нашем случају, чворови од ). Када се позове са другим параметром (истина), увезени елемент / чвор ће долазе са својим дечјим елементима.
Можете уметнути #схареБок било гдје у тијелу документа, Додао сам га пре елемента шаблона.
7. Поставите мени акције
Желимо да поставимо мени акције тачно изнад & на средини одабраног подручја. Урадити тако, добијте вредности правоугаоника одабраног подручја помоћу гетБоундингЦлиентРецт () метода која враћа величину и позицију елемента.
Затим, ажурирајте топ и лево вриједности #схареБок на основу вредности правоугаоника. У калкулацијама новог топ и лево користио сам ЕС6 темплате литералс.
вар рецт = ранге.гетБоундингЦлиентРецт (); вар схареБок = доцумент.куериСелецтор ('# схареБок'); схареБок.стиле.топ = 'цалц ($ рецт.топ пк - 38пк)'; схареБок.стиле.лефт = 'цалц ($ рецт.лефт пк + цалц ($ рецт.видтх пк / 2) - 30пк)'; 8. Додајте функционалност
Сада када смо додали акциони мени близу изабраног текста, време је да направите изабрани текст доступне за опције менија тако да можемо да извршимо неку акцију на њој.
Доделите изабрани текст а прилагођено својство дугмета за дељење зове 'схареТкт' и додајте а моуседовн слушалац догађаја на дугме.
вар схареБтн = схареБок.куериСелецтор ('дугме'); схареБтн ['схареТкт'] = ткт; схареБтн.аддЕвентЛистенер ('моуседовн', онСхареЦлицк, труе); Тхе истина параметер оф аддЕвентЛистенер () спречава моуседовн догађај из бубрења.
Унутар онСхареЦлицк () догађај, ми уметните изабрани текст у цвркут приступањем схареТкт својство дугмета.
фунцтион онСхареЦлицк () виндов.опен ('хттпс://твиттер.цом/интент/твеет?тект=$ тхис.схареТкт'); тхис.ремове (); доцумент.гетСелецтион (). ремовеАллРангес () Када се кликните на дугме, ради оно што треба да уради, а затим се уклони са странице. Исто тако обришите било који избор у документу.
Изворни код и демо
У коду Цодепен испод, можете тест како функционише изборник акција. Такође можете да пронађете пун изворни код у нашем Гитхуб репо.
