قائمة منسدلة

05/04/2024
1

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

لتحقيق هذا، يمكن استخدام حدث النقر (click event) للكشف عن العنصر الذي تم النقر عليه في مربع البحث. بعد ذلك، يمكن إزالة تحديد هذا العنصر عن طريق تغيير النمط أو اللون للعنصر ليظهر كغير محدد.

في الأسفل، سأوضح نموذجًا بسيطًا باستخدام HTML وJavaScript لتحقيق هذا السلوك:
```
html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu with Unselectable Itemstitle>
<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .selected {
    background-color: lightgreen;
  }
style>
head>
<body>

<div class="dropdown">
  <input type="text" id="myInput" oninput="filterFunction()" placeholder="Search for items..">
  <div class="dropdown-content" id="myDropdown">
    <a href="#" onclick="toggleSelection(event, 'item1')">Item 1a>
    <a href="#" onclick="toggleSelection(event, 'item2')">Item 2a>
    <a href="#" onclick="toggleSelection(event, 'item3')">Item 3a>
  div>
div>

<script>
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function toggleSelection(event, itemName) {
  event.preventDefault(); // Prevent link from being followed
  var item = document.getElementById(itemName);
  if (item.classList.contains("selected")) {
    item.classList.remove("selected");
  } else {
    item.classList.add("selected");
  }
}
script>

body>
html>
```
هذا النموذج يحتوي على مربع نصي للبحث وعناصر منسدلة. عند كتابة نص في مربع البحث، يتم تصفية العناصر بناءً على النص المدخل. وعند النقر على العنصر في مربع البحث، يتم تحديد العنصر بتغيير لون خلفيته إلى الأخضر. في حال النقر مرة أخرى، يتم إلغاء تحديد العنصر.

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

توسيع المقال:

التفصيل الفني:

في الكود السابق، قمنا بتحقيق السلوك المطلوب باستخدام HTML وJavaScript. دعنا نقوم بشرح بعض النقاط الفنية:
1. HTML Structure: نستخدم عنصر input لمربع البحث وعنصر div لعناصر القائمة المنسدلة.
2. CSS Styling: نستخدم CSS لتنسيق العناصر بحيث يظهر مربع البحث بجانب القائمة المنسدلة، ونخفي القائمة حتى يتم النقر على مربع البحث.
3. JavaScript Functions:
  
  filterFunction(): تقوم بتصفية العناصر بناءً على النص المدخل في مربع البحث.
  
  toggleSelection(): تقوم بتحديد أو إلغاء تحديد العنصر المنقر عليه.
تعزيز الأداء:

يمكن تعزيز الأداء وتحسين تجربة المستخدم من خلال بعض الإضافات:
1. تحسين التصميم البصري: يمكن تحسين تصميم وتجربة المستخدم بإضافة مزيد من الأنماط والتأثيرات البصرية مثل التحولات والانتقالات.
2. التنقل بواسطة لوحة المفاتيح: يمكن إضافة دعم للتنقل بواسطة لوحة المفاتيح بحيث يمكن للمستخدم استخدام مفاتيح الأسهم أو مفتاح Enter لتحديد العناصر.
3. تحسين الأداء: في حالة وجود عدد كبير من العناصر، يمكن تحسين أداء التصفية عبر البحث من خلال استخدام تقنيات مثل التعددية أو استخدام مكتبات متقدمة لإدارة القوائم.
الاستخدامات المتعددة:

هذا النموذج يمكن توسيعه لتناسب مجموعة متنوعة من السيناريوهات، مثل:
- اختيار العناصر في نماذج الويب: يمكن استخدام هذا النموذج لاختيار العناصر في نماذج الويب مثل نماذج الطلبات أو تحرير الملفات.
- البحث في قوائم العناصر: يمكن استخدام مربع البحث للبحث في قوائم العناصر الكبيرة وتصفيتها بناءً على المدخلات.
- إدارة البيانات الشخصية: يمكن استخدام هذا النموذج لإدارة البيانات الشخصية مثل قوائم الاتصال أو المهام.
الختام:

باستخدام الأدوات المناسبة والتقنيات المناسبة، يمكن تحقيق السلوك المطلوب وتوفير تجربة مستخدم سلسة وفعالة. استمر في التطوير وتحسين الحلول الخاصة بك لضمان تلبية احتياجات المستخدمين وتحقيق الأهداف المحددة لمشروعك.
04/04/2024
3

إنشاء قائمة منسدلة بـ HTML و CSS

في الكود الذي قدمته، تقع مشكلة في ترتيب العناصر داخل القائمة وفي هيكل العناصر نفسها. لتحقيق الهدف المطلوب وهو عرض القائمة المنسدلة عند تحويم المؤشر فوق زر “About”، يجب إصلاح هذه الأخطاء. هناك أيضًا بعض الأخطاء النحوية في الكود، سأقوم بتصحيحها أيضًا لضمان عمل الكود بشكل صحيح.

أولاً، يجب عليك وضع العناصر ذات الصلة بالقائمة المنسدلة داخل عنصر

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

أعدت كتابة الكود بشكل صحيح بناءً على التوجيهات التي ذكرتها، وإليك الكود المصحح:

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dropdown Menutitle>
<style>

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.goCenter {
    text-align: center;
    color: white;
}

body {
    background-color: #1A1617;
}

ul {
    text-align: center;
    list-style-type: none; /* تصحيح الخطأ هنا */
    margin: 0;
    padding: 20px;
    background-color: black;
    overflow: hidden;
}

li {
    display: inline;
}

li a {
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
    font-size: 10px; /* تصحيح الخطأ هنا */
}

.dropdown:hover .dropdown-content {
    display: block;
}

style>
head>
<body>

<ul>
    <li><a href="home.html">Homea>li>
    <li><a href="news.html">Newsa>li>
    <li class="dropdown"> 
        <a href="about.html" class="dropbtn">Abouta> 
        <div class="dropdown-content">
            <p>Checkp> 
        div>
    li>
ul>

<p class="goCenter"><strong>strong>p>

body>
html>

أعتقد أن هذا الكود المعدل سيحقق النتيجة المطلوبة، حيث سيعرض القائمة المنسدلة بشكل صحيح عند تحويم المؤشر فوق زر “About”. تأكد من حفظ الملف واختبار الكود على متصفح الويب الخاص بك.

بناء قائمة منسدلة بسيطة باستخدام HTML و CSS

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

الخطوة 1: كتابة الكود HTML

أولاً، نبدأ بكتابة هيكل الصفحة باستخدام لغة HTML. يمكننا استخدام عنصر

لكل عنصر في القائمة، مع وضع الرابط المناسب داخل كل عنصر.
```
html
<ul>
    <li><a href="home.html">Homea>li>
    <li><a href="news.html">Newsa>li>
    <li class="dropdown">
        <a href="about.html" class="dropbtn">Abouta>
        <div class="dropdown-content">
            <p>Checkp>
        div>
    li>
ul>
```
في هذا الكود، قمنا بإنشاء قائمة رئيسية تحتوي على ثلاثة عناصر: “Home”، و”News”، و”About”. عند النقر على “About”، ستظهر قائمة منسدلة تحته.

الخطوة 2: تنسيق القائمة باستخدام CSS

الآن، سنستخدم CSS لتنسيق القائمة وجعلها تظهر بالشكل المطلوب. سنستخدم المحددات الواردة في الكود التالي لتحقيق ذلك:
```
css
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
    display: block;
}
```
هنا، قمنا بتحديد العناصر .dropdown و .dropdown-content وتعيين خصائصها بشكل مناسب. عند تحويم المؤشر فوق “About”، سيتم عرض القائمة المنسدلة .dropdown-content.

الخطوة 3: إضافة التنسيقات الإضافية

يمكنك أيضًا إضافة أي تنسيقات إضافية ترغب فيها لتخصيص المظهر الخاص بك. يمكنك تغيير الألوان والخطوط والأبعاد حسب الحاجة.

الاستنتاج

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

هذا هو المقال الكامل الذي يشرح كيفية إنشاء قائمة منسدلة بسيطة باستخدام HTML و CSS. آمل أن يكون هذا المقال مفيدًا لك في فهم كيفية بناء وتنسيق القوائم المنسدلة في مشاريعك القادمة.

25/03/2024

تحويل Django BooleanField إلى قائمة منسدلة

بالتأكيد، يمكنك تحويل حقل BooleanField في Django إلى قائمة منسدلة بخيارين “نعم” و “لا”. للقيام بذلك، يمكنك استخدام حقل ChoiceField بدلاً من BooleanField، وتعريف الخيارين “نعم” و “لا” كقيم ممكنة لهذا الحقل.

إليك كيفية تعديل تعريف النموذج لديك ليتم استخدام ChoiceField بدلاً من BooleanField:

python
from django import forms

class YourForm(forms.Form):
    # تعريف الخيارات الممكنة
    BOOLEAN_CHOICES = (
        (True, 'نعم'),
        (False, 'لا'),
    )
    
    # استخدام ChoiceField بدلاً من BooleanField
    attending = forms.ChoiceField(choices=BOOLEAN_CHOICES, required=True)

بهذا التعديل، سيتم عرض حقل “attending” كقائمة منسدلة في النموذج بدلاً من أزرار الاختيار النقطية (الراديو)، وسيكون لديك الخيارات “نعم” و “لا” للاختيار بينهما.

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

تحسين تسمية مربع البحث وفقًا للقائمة المنسدلة

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

لكي نفهم السياق بشكل أفضل، لنلق نظرة على الصورة التي قدمتها. يظهر في الصورة مربع بحث مع تسمية “Search” وقائمة منسدلة تحتوي على خيارات مختلفة مثل “Company Admin”، “User”, “Admin”، وغيرها. الفكرة هي أن تغير تسمية مربع البحث استنادًا إلى الخيار المحدد في القائمة المنسدلة.

لتحقيق ذلك، يمكننا استخدام البرمجة النصية (Scripting) وتقنيات الويب لربط تغييرات في القائمة المنسدلة بتغييرات في تسمية مربع البحث. بمجرد اختيار الخيار من القائمة المنسدلة، يجب تحديث تسمية مربع البحث وتغييرها بناءً على الخيار المحدد.

على سبيل المثال، يمكن استخدام الجافا سكريبت لتحقيق ذلك، حيث يتم استهداف العنصر الذي يتم اختياره في القائمة المنسدلة وتحديث تسمية مربع البحث بناءً على القيمة المختارة. هذا يتطلب بناء دالة جافا سكريبت لربط تغييرات في القائمة بتغييرات في الواجهة الرسومية.

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

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