כיצד ליצור בינונית כמו צף תפריט פעולה
הפופולריות של תפריטי פעולה צפים כבר במגמת עלייה, במיוחד מאז Medium.com הביא את התכונה לאופנה. בקצרה, תפריט הפעולה הצף מופיע כאשר אתה בחר טקסט בדף אינטרנט. התפריט מופיע ליד הבחירה, מראה פעולות שונות המאפשרות לך לפשט במהירות, להדגיש או לשתף את הטקסט שנבחר.
במדריך זה, אני אראה לך כיצד להציג תפריט פעולה עבור קטע טקסט שנבחר בדף אינטרנט. תפריט הפעולה שלנו יאפשר למשתמשים ציוץ את הטקסט שנבחר אל חסידיו.
1. צור את ה- HTML
ה HTML Starter הוא פשוט, אנחנו רק צריכים קצת טקסט המשתמש יכול לבחור. עבור ההדגמה, אני אשתמש “הארט והצייד /” סיפור לפני השינה כמו טקסט לדוגמה.
הארט והצייד /
הארט היה פעם ...
...
2. צור את תבנית תפריט הפעולה
אני הוספת קוד HTML השייכים לתפריט הפעולה בתוך א אלמנט. מה הוא בתוך תג, לא תועבר על ידי דפדפנים עד שהוא יתווסף למסמך באמצעות.
אל תשאיר מקום מיותר בתוך ה , שכן הדבר עלול להפריע לפריסת תפריט הפעולה לאחר הכנסתו למסמך. אם אתה רוצה, הוסף לחצנים נוספים בפנים #shareBox עבור אפשרויות נוספות.
3. צור את CSS
CSS עבור #shareBox מיכל בתוך הולך ככה:
#shareBox width: 30px; גובה: 30px; תפקיד מוחלט
ה תפקיד מוחלט הכלל יאפשר לנו מקם את התפריט בכל מקום שתרצה על הדף.
גם אני מעוצב כפתור פעולה בפנים #shareBox עם צבע רקע התמונה ואת שלה ::לאחר אלמנט פסאודו אני הוסיף משולש עבור חץ למטה.
#shareBox> לחצן רוחב: 100%; גובה: 100%; צבע רקע: # 292A2B; גבול: none; border-radius: 2px; outline: none; הסמן: מצביע; background-image: url ('share.png'); רקע-לחזור: לא לחזור; background-position: center; background-size: 70%; #shareBox> כפתור :: אחרי למצב: מוחלט; : 10px מוצק # 292A2B; הגבול השמאלי: 10px מוצק שקוף, הגבול הימנית: 10px מוצק שקוף, שמאל: 5px; העליון: 30px; 4. הוסף מטפלים באירוע עם JS
על מנת לעבור אל JavaScript, אנחנו צריכים הוסף מטפלים באירועים בשביל ה Mousedown ו העכבר אירועים post ללכוד את ההתחלה ואת הסוף של בחירת הטקסט.
אתה יכול גם לעשות מחקר אירועי בחירה אחרים כמו בחר ולהשתמש בהם במקום אירועי עכבר (אשר יהיה אידיאלי אבל עדיין התמיכה שלהם הדפדפן הם לא טובים מאוד).
כמו כן הוסף הפניה אל ה רכיב באמצעות querySelector () שיטה.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () פונקציה onMouseUp () .5 נקה בחירות קודמות
בתוך ה Mousedown ללא שם: האירוע, אנו לבצע ניקוי מסוימים, כלומר, הסר את כל הבחירה הקודמת ואת תפריט פעולת השייכות.
הפונקציה onMouseDown () document.getSelection (). var shareBox = document.querySelector ('# shareBox'); אם (shareBox! == null) shareBox.remove (); ה getSelection () השיטה מחזירה א בחירה אובייקט המייצג את טווחי הטקסט שנבחר כרגע על ידי המשתמש ואת RemoveAllRange () שיטהמסיר את כל הטווחים מאותו דבר בחירה לכן, ניקוי כל בחירה קודמת.
.6 הצג את תפריט הפעולה
זה במהלך העכבר ללא שם: האירוע, כאשר אנו אשר אם נבחר טקסט ולנקוט פעולה נוספת.
function onMouseUp () var sel = document.getSelection (), txt = sel.toString (); אם (txt! == "") var range = sel.getRangeAt (0); אם (range.startContainer.parentElement.parentElement.localName === "מאמר" || range.startContainer.parentElement.localName === "article") // טקסט כלשהו במאמר נבחר
קבל את מחרוזת הטקסט שנבחרה על ידי קורא את toString () השיטה של בחירה אובייקט. אם הטקסט שנבחר אינו ריק, המשך לקבל את הטווח הראשון מ ה בחירה אובייקט.
טווח האם ה החלק הנבחר של המסמך. בדרך כלל, המשתמשים יעשו בחירה יחידה בלבד, לא על ידי לחיצה על מקש ctrl / cmd), אז פשוט לקבל את האובייקט טווח הראשון (באינדקס 0) מתוך הבחירה באמצעות getRangeAt (0).
לאחר שתשיג את הטווח, בדוק אם הבחירה החלה ממקום מסוים בתוך המאמר. ה startContainer המאפיין של הטווח מחזיר את הצומת DOM מהמקום שבו החלה הבחירה.
לפעמים (כאשר אתה בחר בתוך פסקה), הערך שלה הוא רק צומת טקסט, ובמקרה זה שלה - אלמנט הורה יהיה ואת ההורה של האלמנט יהיה (בקוד לדוגמה בפוסט הזה).
פעמים אחרות, כאשר תבחר על פני מספר פסקאות, ה startContainer יהיה ואת הצומת האב יהיה . מכאן שני השוואות בשנייה אם תנאי בקוד לעיל.
פעם ה אם מצב עובר, הגיע הזמן אחזר את תפריט הפעולה מהתבנית והוסף אותו למסמך. מקם את הקוד להלן בתוך השני אם הצהרה.
()
ה importNode () שיטה מחזיר צמתים ממסמכים חיצוניים (במקרה שלנו, צמתים מ ). כאשר הוא נקרא עם הפרמטר השני (נכון), האלמנט המיובא / הצומת יהיה לבוא עם אלמנטים הילד שלה.
ניתן להוסיף #shareBox בכל מקום בגוף המסמך, הוספתי אותו לפני אלמנט התבנית.
.7 הצב את תפריט הפעולה
אנחנו רוצים לשים את תפריט הפעולה ממש מעל & במרכז האזור שנבחר. לשם כך, קבל את ערכי המלבן של האזור שנבחר באמצעות getBoundingClientRect () שיטה המחזירה את הגודל ואת המיקום של אלמנט.
לאחר מכן, עדכן את חלק עליון ו שמאלה ערכים של #shareBox בהתבסס על ערכי המלבן. בחישובים של החדש חלק עליון ו שמאלה ערכים, השתמשתי 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. הוספת פונקציונליות
עכשיו שהוספנו את תפריט הפעולה ליד הטקסט שנבחר, הגיע הזמן לעשות את הטקסט שנבחר זמין עבור אפשרויות התפריט כדי שנוכל לבצע פעולה כלשהי.
הקצה את הטקסט שנבחר ל- a מאפיין מותאם אישית של לחצן השיתוף שקוראים לו 'shareTxt' והוסף א Mousedown האירוע listener כפתור.
var shareBtn = shareBox.querySelector ('לחצן'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); ה נכון פרמטר של addEventListener () מונע את Mousedown אירוע מבעבע.
בתוך ה onShareClick () מטפל באירועים, אנחנו הכנס את הטקסט שנבחר לציוץ על ידי גישה אל shareTxt רכוש של הכפתור.
פונקציה onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); () הסר את allAllRanges () פעם ה לחיצה על לחצן, הוא עושה מה שהוא אמור לעשות, ואז להסיר את עצמו מן הדף. זה יהיה גם לנקות את כל הבחירה במסמך.
קוד מקור & הדגמה
בהדגמה Codepen להלן, אתה יכול מבחן כיצד פועל תפריט הפעולה. אתה יכול גם למצוא את קוד מקור מלא ב ריפו Github שלנו.
