غالبا ما يتطلب تطوير الويب إنشاء عناصر تفاعلية ، بما في ذلك الأزرار. ومع ذلك ، قد يكون من الضروري في بعض الأحيان جعل الزر غير نشط لمنع إجراءات المستخدم غير المرغوب فيها أو الإشارة إلى عدم توفر وظيفة معينة.
لحسن الحظ ، باستخدام كس ، يمكننا بسهولة جعل الزر غير نشط وتغيير مظهره لنقل الرسالة المناسبة للمستخدم. باتباع هذا الدليل العملي ، ستتعلم عدة طرق لتحقيق هذا الهدف.
الطريقة الأولى هي استخدام خاصية أحداث المؤشر. عند تعيين القيمة إلى بلا لهذه الخاصية ، يصبح الزر غير قابل للنقر ، ولا يستجيب أيضا لأحداث الماوس. ومع ذلك ، قد لا تعمل هذه الخاصية في بعض إصدارات المتصفح القديمة ، لذلك يجب اختبار استخدامها قبل النشر.
الطريقة الثانية هي استخدام الخاصية المعطلة. هذه الخاصية متاحة فقط لبعض عناصر النموذج ، مثل الإدخال والزر. عندما يتم ضبطه على صحيح ، يصبح الزر غير نشط ولن يتمكن المستخدم من التفاعل معه. يمكن أيضا تغيير أنماط الأزرار باستخدام كس باستخدام المحددات: معطل.
- لماذا أحتاج إلى جعل الزر غير نشط?
- كيفية جعل زر غير نشط باستخدام كس
- سؤال وجواب
- كيف يمكنني جعل زر غير نشط على صفحة ويب باستخدام المغلق?
- هل يمكنني جعل الزر غير نشط باستخدام كس دون إضافة فئة إلى الزر?
- هل يمكنني جعل الزر غير نشط باستخدام كس بناء على شروط أو حالات معينة?
- هل يمكنني جعل زر غير نشط باستخدام المغلق على الأجهزة النقالة, ولكن نشطة على أجهزة الكمبيوتر?
- هل من الممكن تغيير مظهر زر غير نشط باستخدام المغلق?
لماذا أحتاج إلى جعل الزر غير نشط?
يعد الزر عنصرا مهما في تفاعل واجهة الويب. تخيل موقفا قام فيه المستخدم بملء جميع الحقول الضرورية في النموذج ، ولكن بعض البيانات غير صالحة أو مفقودة. في هذه الحالة ، قد يؤدي زر إرسال النموذج النشط إلى حدوث ارتباك للمستخدم ، لأن النقر فوقه لن يؤدي إلى النتيجة المرجوة.
من خلال جعل الزر غير نشط ، نبلغ المستخدم أنه يجب تنفيذ إجراءات معينة لإلغاء قفل الزر. على سبيل المثال ، املأ جميع الحقول المطلوبة ، وحدد معلمات معينة ، وما إلى ذلك. على سبيل المثال ، يمكننا النظر في نموذج التسجيل على الموقع. إذا لم يقم المستخدم بإدخال اسمه أو كلمة المرور الخاصة به ، فسيظل الزر" تسجيل " غير نشط حتى يتم ملء هذه الحقول.
بالإضافة إلى ذلك ، يساعد استخدام زر غير نشط في منع الإجراءات والأخطاء غير المرغوب فيها. على سبيل المثال ، إذا اقترحنا أن يقوم المستخدم بحذف شيء مهم ، فسيشير زر الحذف غير النشط صراحة إلى أنه لا يمكن تنفيذ هذا الإجراء في الوقت الحالي.
وبالتالي ، من خلال جعل الزر غير نشط ، نقوم بتحسين تجربة المستخدم ومساعدة المستخدمين على تنفيذ الإجراءات الصحيحة والمناسبة فقط.
كيفية جعل زر غير نشط باستخدام كس
إذا كنت بحاجة إلى جعل زر غير نشط على موقعك ، يمكنك استخدام كس للتحكم في أسلوبه وسلوكه. وفيما يلي بعض الطرق لمساعدتك على تحقيق ذلك.
1. تغيير مظهر الزر:
يمكنك استخدام بعض خصائص كس لتغيير نمط الزر وجعلها تبدو وكأنها واحدة غير نشطة. على سبيل المثال ، يمكنك تعيين لون الخلفية إلى اللون الرمادي ، وتغيير لون النص إلى اللون الرمادي الفاتح ، وإضافة مسافة صغيرة بين النص وحدود الزر. مثال على الكود:
.زر: معطل {
لون الخلفية: # سك;
اللون: # 999;
الحشو: 5 بكسل 10 بكسل;
الحدود: لا شيء;
المؤشر: غير مسموح به;
}
2. حظر الضغط على الزر:
إذا كنت تريد أن يكون الزر غير نشط ولا يمكن للمستخدم النقر فوقه ، فيمكنك استخدام خاصية أحداث المؤشر. قم بتطبيقه على فئة الزر لتعطيل جميع أحداث المؤشر. مثال على الكود:
.زر: معطل {
مؤشر الأحداث: لا شيء;
}
3. باستخدام الفئة الزائفة: معطل:
فئة زائفة :يسمح لك المعطل بتطبيق الأنماط على زر عندما يكون في حالة غير نشطة. على سبيل المثال ، يمكنك تغيير مظهره عن طريق إضافة خلفية رمادية وتغيير لون النص. مثال على الكود:
.زر: معطل {
لون الخلفية: # سك;
اللون: # 999;
}
كانت هذه ثلاث طرق بسيطة لجعل الزر غير نشط باستخدام كس. اختيار واحد الذي يناسب المشروع الخاص بك وتطبيقه على مصدر برنامج الخاص بك. آمل أن يساعدك هذا الدليل في التعامل مع المهمة.
سؤال وجواب
كيف يمكنني جعل زر غير نشط على صفحة ويب باستخدام المغلق?
لجعل الزر غير نشط باستخدام كس ، يمكنك استخدام الفئة الزائفة: معطل. على سبيل المثال ، يمكنك إضافة فئة إلى زر وكتابة نمط في كس لهذه الفئة مع فئة الزائفة :معطل. نتيجة لذلك ، سيبدو الزر غير نشط ولن يتمكن المستخدمون من النقر فوقه.
هل يمكنني جعل الزر غير نشط باستخدام كس دون إضافة فئة إلى الزر?
نعم ، يمكنك جعل الزر غير نشط باستخدام كس دون إضافة فئة إلى الزر. للقيام بذلك ، يمكنك استخدام السمة [معطل] مع محدد العنصر. على سبيل المثال ، يمكنك استخدام الزر[معطل] محدد لتصميم زر غير نشط يحتوي على السمة المعطلة.
هل يمكنني جعل الزر غير نشط باستخدام كس بناء على شروط أو حالات معينة?
نعم ، يمكنك جعل الزر غير نشط باستخدام كس استنادا إلى شروط أو حالات معينة. على سبيل المثال ، إذا كان لديك زر يجب أن يكون غير نشط عندما يكون حقل الإدخال فارغا ، فيمكنك استخدام فئة زائفة :معطل بالاشتراك مع الفئة الزائفة: غير صالح لأنماط الأزرار في كس. وبالتالي ، سيكون الزر غير نشط عندما يحتوي حقل الإدخال على بيانات غير صحيحة أو يكون فارغا.
هل يمكنني جعل زر غير نشط باستخدام المغلق على الأجهزة النقالة, ولكن نشطة على أجهزة الكمبيوتر?
نعم ، يمكنك جعل الزر غير نشط باستخدام كس على الأجهزة النقالة ، ولكن نشطة على أجهزة الكمبيوتر. للقيام بذلك ، يمكنك استخدام استعلامات الوسائط في كس. على سبيل المثال ، يمكنك تطبيق نمط :تعطيل الزر فقط لنطاق معين من عرض الشاشة أو الجهاز ، باستخدام استعلامات الوسائط وقواعد كس المقابلة.
هل من الممكن تغيير مظهر زر غير نشط باستخدام المغلق?
نعم ، يمكنك تغيير مظهر زر غير نشط باستخدام كس. يمكنك تعيين أنماط مختلفة مثل لون الخلفية ولون النص والخط وخصائص أخرى لجعل الزر يبدو غير نشط. على سبيل المثال ، يمكنك تغيير لون خلفية زر أو تعيين التعتيم أو تغيير لون النص باستخدام قواعد كس.