למד כיצד ליצור סרגל חיפוש מתרחב באמצעות HTML רגיל, CSS ו-JavaScript.

רכיבי GUI אינטראקטיביים הופכים את היישום שלך לקל יותר לשימוש. HTML כולל מספר רכיבי טופס כברירת מחדל, אבל תרצה להשתמש ב-CSS כדי שיתאימו לעיצוב שלך. אתה יכול גם להשתמש ב-JavaScript כדי להרחיב או לשנות את ההתנהגות שלהם.

אתה יכול ליצור רכיבים כאלה באמצעות ספרייה כמו Tailwind, אבל זה שימושי לדעת גם איך ליצור אותם מאפס.

גלה כיצד ליצור סרגל חיפוש נסתר באמצעות HTML, CSS ו-JavaScript.

צור את מבנה התוכן עם HTML

הנה קוד ה-HTML של התכונה. יהיה לך אלמנט אב המכיל קלט ורכיב כפתור. אתה גם תייבא סקריפטים מדהימים של גופן עבור סמל החיפוש. במקרה זה, תשתמש בסמל החיפוש של זכוכית המגדלת.

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8" />
<מטאhttp-equiv="תואם X-UA"תוֹכֶן="IE=edge" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0" />
<תַסרִיטsrc=" https://kit.fontawesome.com/d69fb28507.js"מקור צולב="בעילום שם">תַסרִיט>
<כותרת>סרגל חיפוש מוסתרכותרת>
רֹאשׁ>


<גוּף>
<divמעמד="הוֹרֶה">
<קֶלֶטמעמד="קֶלֶט"סוּג="סוּג"מציין מיקום="לחפש..." />


<לַחְצָןמעמד="btn">
<אנימעמד="זכוכית מגדלת פא מוצקה">אני>
לַחְצָן>
div>
גוּף>
html>
instagram viewer

סגנון הממשק באמצעות CSS

בקובץ ה-CSS, אתה צריך לתת לאלמנט האב את המיקום של יחסי. מיקום יחסי מאפשר לרכיבי הקלט והלחצן לנוע סביב האב. ה מאפיין עמדת CSS שולט במספר סוגים של פריסה, ולכן חשוב להבין זאת.

תוכל גם ליישר את שני האלמנטים במרכז לראות טובה יותר. אבל באפליקציה שלך, אתה יכול לבחור להשתמש בסרגל החיפוש מתי שתרצה. כמו כן, תן לשני האלמנטים אותו רוחב כך שהם ייראו באותו גודל ולא אחד גדול מהשני.

לאחר מכן עליך לתת להורה מחלקה פעילה הן עבור רכיבי הקלט והן עבור רכיבי הכפתור. בדרך זו, הוא ישתנה כפי שצוין בכל פעם שהאלמנט זז.

* {
שולים: 0;
ריפוד: 0;
גודל קופסא: תיבת גבול;
}
גוּף {
צבע רקע: #d9d9d9;
גוֹבַה: 100vh;
לְהַצִיג: לְהַגמִישׁ;
align-items: מֶרְכָּז;
להצדיק-תוכן: מֶרְכָּז;
}


.הוֹרֶה {
עמדה: קרוב משפחה;
}


.קֶלֶט {
מתווה: אף אחד;
גבול: אף אחד;
גבול-רדיוס: 100פיקסלים;
ריפוד: 5פיקסלים 10פיקסלים;
רוֹחַב: 40פיקסלים;
מַעֲבָר: רוֹחַב 0.3 שניותקַלוּת;
}


.קֶלֶט:: מציין מקום {
צֶבַע: ירוק;
}


.הוֹרֶה.פָּעִיל.קֶלֶט {
רוֹחַב: 200פיקסלים;
}


.btn {
רוֹחַב: 40פיקסלים;
ריפוד: 5פיקסלים 10פיקסלים;
סַמָן: מַצבִּיעַ;
גבול-רדיוס: 100פיקסלים;
גבול: אף אחד;
רקע כללי: ירוק;
לְהַצִיג: בשורה;
צל קופסא: 0 0 5פיקסליםrgba(0, 0, 0, 0.2);
עמדה: מוּחלָט;
חלק עליון: 0;
שמאלה: 0;
מַעֲבָר: שינוי צורה 0.3 שניותקַלוּת;
}


.הוֹרֶה.פָּעִיל.btn {
שינוי צורה: translateX(210פיקסלים);
}
.fa-solid {
צֶבַע: #ffffff;
}

כדאי שיהיה לך כפתור חיפוש שנראה כך:

הוסף פונקציונליות JavaScript

לאחר מכן, כתוב קוד JavaScript עבור האלמנטים. ראשית, בחר את רכיבי האב, הקלט והלחצן באמצעות JavaScript querySelector() שיטה.

לאחר מכן, הוסף ללחצן מאזין אירוע קליק. אז כשלוחצים עליו, הכפתור משתנה בהתאם למחלקה שנבחרה. תוסיף את ה מוֹקֵד() שיטה להגדיר מיקוד על האלמנט שצוין. זה מתחיל להבהב בכל פעם שסרגל החיפוש מתרחב.

לתת קלט = מסמך.querySelector(".קֶלֶט");
לתת btn = מסמך.querySelector(".btn");
לתת הורה = מסמך.querySelector(".הוֹרֶה");
btn.addEventListener("נְקִישָׁה", () => {
 parent.classList.toggle("פָּעִיל");
 input.focus();
});

אם תלחץ על הכפתור, זה פותח את שורת החיפוש ולהיפך. זה מופיע כפי שמוצג בתרשים הבא:

כעת, אם תקליד מידע ולחץ על הכפתור הוא נסגר כשהמערכת מחפשת את המידע.

מגניב, לא? אתה יכול לראות את הקוד הזה ולשחק עם שורת החיפוש codepen.io. אתה יכול להתאים אישית את סרגל החיפוש עוד יותר על ידי יצירת א רשימת שורת החיפוש של פריטים. זה מקל על המשתמשים שלך לבצע חיפושים באפליקציה.

תכונות אחרות שאתה יכול ליצור

בתור מתחיל בפיתוח אתרים, ישנן תכונות רבות שאתה יכול ליצור עם HTML, CSS ו-JavaScript. אתה יכול ליצור חלון קופץ/מודאלי, מחוון תמונה, עדכון אוטומטי של כותרת תחתונה ועוד רבים נוספים.

פרויקטים יצירתיים כאלה נהדרים ללימוד מושגי תכנות. אתה יכול ליישם מיומנויות תוך כדי למידה מה שמגביר את התועלת של המיומנות. כמו כן, אתה יכול ליצור ממשקי משתמש נהדרים שאתה והמשתמשים שלך תהנו מהם. השתמש במדריך זה כדי ליצור סרגל חיפוש נסתר ותכונות אינטראקטיביות אחרות עבור האתר שלך.