البرمجة

تحسين تجربة المستخدم: إنشاء مربع بحث تظهر عند النقر باستخدام HTML، CSS، وJavaScript

27/01/2024
14 2 دقائق

في عالم تطوير الويب الحديث، يعتبر إنشاء مربع بحث يظهر عند النقر على أيقونة بحث تقنية مثيرة ومفيدة لتحسين تجربة المستخدم. يمكن تحقيق هذا باستخدام لغات وتقنيات مثل HTML وCSS وJavaScript. دعنا نقوم بإنشاء هذا السيناريو بشكل مفصل.

للبداية، يمكننا استخدام HTML لإنشاء العناصر الأساسية في صفحة الويب:

html
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Search Box Toggletitle>
head>
<body>

    <div class="search-container">
        <input type="text" id="search-box" placeholder="ابحث هنا...">
        <button id="search-icon">🔍button>
    div>

    <script src="script.js">script>
body>
html>

ثم، يمكننا استخدام CSS لتنسيق عناصر الصفحة:

css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.search-container {
    position: relative;
}

#search-box {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: none;
}

#search-icon {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

في النهاية، يمكننا استخدام JavaScript لتحقيق تبديل ظهور واختفاء مربع البحث عند النقر على الأيقونة:

js
document.getElementById('search-icon').addEventListener('click', function() {
    var searchBox = document.getElementById('search-box');
    if (searchBox.style.display === 'none' || searchBox.style.display === '') {
        searchBox.style.display = 'block';
        searchBox.focus();
    } else {
        searchBox.style.display = 'none';
    }
});

هذا السيناريو يعتمد على تحديد عنصر البحث (#search-box) والأيقونة (#search-icon) وإضافة استماع لحدث النقر. عند النقر على الأيقونة، يتم فحص إذا كان مربع البحث مخفيًا أو ظاهرًا، ويتم تبديل حالته بناءً على ذلك.

باستخدام هذا الكود، يمكنك تحسينه وتكييفه وفقًا لاحتياجات مشروعك. يمكنك أيضًا إضافة تأثيرات أنيميشن أو تحسينات إضافية لتحسين جاذبية وظيفة مربع البحث.

المزيد من المعلومات

بالطبع، دعنا نعمق في المزيد من التفاصيل لتحسين فهمك حول إنشاء مربع البحث الذي يظهر عند النقر على أيقونة البحث.

HTML:

في العنصر

، يتم تضمين الحقل الذي سيكون مربع البحث نفسه، وزر

الوسوم
27/01/2024
14 2 دقائق
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى