front end - bootstrap

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

بعرف، وقبل شوي ضفته، بس أنا مش عايز كدا، أنا عايز زي اللي بالصورة

بتاريخ 14 دقائق مضت قال Mohammed Abu Yousef:

بعرف، وقبل شوي ضفته، بس أنا مش عايز كدا، أنا عايز زي اللي بالصورة

يمكنك استخدام css لتخصيص شكل dropdown باستخدام الكلاسات الخاصة بالمكون dropdown , فمثلا يمكنك تغيير شكل العنصر الذي لديه الكلاس dropdown-toggle كالتالي

        .dropdown-toggle {
            background-color: #333;
            border-color: #ccc;
            border-style: solid;
            width: 250px;
            height: 40px;
        }

يمكنك وضع التنسيقات التي تريد باستخدام هذه الطريقة, وأيضا السهم الصغير الذي يأتي بشكل تلقائ مع المكون dropdown يمكنك ازاته باستخدم التنسيقا الآتي

#dropdownMenuButton::after{
    display: none;
}

ثم يمكنك وضع شكل السهم الذي تريد, يمكنك تغيير أي شيء ويمكنك الاستعانة بحزمة المطورين التي تستطيع الوصول اليها بالشغط بالزر اليمين من الماوس في أي مكان من الصفحة ثم اختيار فحص العنصر او inspect elements فهي تساعدك جيدا في تحديد العناصر جيدا

كيف أستطيع وضع الكلمة التي يتم اختيارها فوق ( مثل الصورة كما كلمة " أسئلة البرمجة " )

بتاريخ 11 دقائق مضت قال Mohammed Abu Yousef:

كيف أستطيع وضع الكلمة التي يتم اختيارها فوق ( مثل الصورة كما كلمة " أسئلة البرمجة " )

هل تقصد عندما أفتح الموقع أجد كلمة أسئلة البرمجة هي المختارة بشكل تلقائي؟

بتاريخ 3 دقائق مضت قال محمد أبو عواد:

هل تقصد عندما أفتح الموقع أجد كلمة أسئلة البرمجة هي المختارة بشكل تلقائي؟

لا، أقصد عند فتح الصفحة تظهر ( الرجاء اختيار كذا )، عند اختيار ( أسئلة البرمجة ) مثلا، يتم استبدال النص ( الرجاء اختيار كذا ) ب ( أسئلة البرمجة )

بتاريخ 3 دقائق مضت قال Mohammed Abu Yousef:

لا، أقصد عند فتح الصفحة تظهر ( الرجاء اختيار كذا )، عند اختيار ( أسئلة البرمجة ) مثلا، يتم استبدال النص ( الرجاء اختيار كذا ) ب ( أسئلة البرمجة )

لفعل ذلك أنت تحتاج الى استخدام العنصر select وأيضا من حسن الحظ بوتستراب توفره أيضا, يمكنك الذهاب اليه من هنا, واذا كنت تريد ايضا تغيير شكله يمكنك فعل ذلك باستخدام الكلاسات الخاصة به ويمكنك تحديد التنسيقات لكل عنصر باستخدام css

شكرا جدا، هذا ما كنت أريده، عندي سؤال آخر، كيف أستطيع أخذ ال value الخاصة بال option الذي اختاره المستخدم، ليتم إرساله إلى السيرفر

بتاريخ الآن قال Mohammed Abu Yousef:

شكرا جدا، هذا ما كنت أريده، عندي سؤال آخر، كيف أستطيع أخذ ال value الخاصة بال option الذي اختاره المستخدم، ليتم إرساله إلى السيرفر

لنشرح ذلك بمثال بسيط

    <select name="test">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </select>

كما تلاحظ لقد قمت بتحديد الخاصية name للعنصر select, وسوف تكون القيمة هي الخاصية value من العنصر الذي تم اختياره, فمثلا لو تم اختيار العنصر A والتي قيمته 1 سوف يتم ارسال القيمة الى السيرفر بهذا الشكل

test=>1

شكرا جدا جدا والله

الآن، استطعت إحضار ال id كيف أستطيع جلب ال calerioes لخاصة بكل id

بتاريخ الآن قال Mohammed Abu Yousef:

شكرا جدا جدا والله

الآن، استطعت إحضار ال id كيف أستطيع جلب ال calerioes لخاصة بكل id

بتاريخ 2 دقائق مضت قال Mohammed Abu Yousef:

شكرا جدا جدا والله

الآن، استطعت إحضار ال id كيف أستطيع جلب ال calerioes لخاصة بكل id

لم استطع ان أفهم السؤال جيدا, هل يمكنك توضيج ذلك في سؤال جديد في قسم الأسئلة وتوضيح المطلوب بشكل جيد وفي اي لغة؟

تمام

بتاريخ 14 ساعات قال محمد أبو عواد:

لنشرح ذلك بمثال بسيط

    <select name="test">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </select>

كما تلاحظ لقد قمت بتحديد الخاصية name للعنصر select, وسوف تكون القيمة هي الخاصية value من العنصر الذي تم اختياره, فمثلا لو تم اختيار العنصر A والتي قيمته 1 سوف يتم ارسال القيمة الى السيرفر بهذا الشكل

test=>1

 

باشا، بنفس هذه الطريقة، أردت إضافة option ال search ف صارت شوي مشاكل، خاصة بموضوع اني ارسل القيمة للسيرفر، ف ممكن طريقة لاضافة موضوع ال search بدون ما يصير مشاكل، ونضلنا على نفس الكود.

ملاحظة / اللي انا عايزه زي هادي الفكرة بالزبط: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

بتاريخ 6 ساعات قال Mohammed Abu Yousef:

باشا، بنفس هذه الطريقة، أردت إضافة option ال search ف صارت شوي مشاكل، خاصة بموضوع اني ارسل القيمة للسيرفر، ف ممكن طريقة لاضافة موضوع ال search بدون ما يصير مشاكل، ونضلنا على نفس الكود.

ملاحظة / اللي انا عايزه زي هادي الفكرة بالزبط: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

في plugin موجودة تسهل عليك موضوع البحث في dropdown list اسمها select2 اضغط هنا للوصول لرابط الاضافة

بتاريخ 44 دقائق مضت قال عمار عبدالعظيم:

في plugin موجودة تسهل عليك موضوع البحث في dropdown list اسمها select2 اضغط هنا للوصول لرابط الاضافة

للأسف، يبدو أن هناك مشكلة في استدعاء المكتبة ( استخدمت ال CDN ولم تعمل )

اشتغلت تمام، شكرا جدا على الاقتراح الجميل ( select2 )

بتاريخ 4 ساعات قال Mohammed Abu Yousef:

اشتغلت تمام، شكرا جدا على الاقتراح الجميل ( select2 )

العفو يا غالي