حدد Insert > Spry > Spry Validation Radio Group.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Validation Radio Group
عنصر واجهة مستخدم Validation Radio Group عبارة عن مجموعة من أزرار الخيارات مع دعم تحقق للتحديد. يفرض عنصر واجهة المستخدم تحديد زر خيار واحد من المجموعة.
يبين المثال التالي عنصر واجهة مستخدم Validation Radio Group في حالات متنوعة.
A. رسائل خطأ عنصر واجهة مستخدم Validation Radio Group B. مجموعة عناصر واجهة مستخدم Validation Radio Group
يشتمل عنصر واجهة مستخدم Validation Radio Group على ثلاث حالات غير الحالات الأولية: صالحة، وغير صالحة، وقيمة مطلوبة. يمكنك تبديل خصائص هذه الحالات عن طريق تحرير ملف CSS المقابل (SpryValidationRadio.css)، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Radio Group إجراء التحقق في مراحل متنوعة: عندما ينقر المستخدم خارج عنصر واجهة المستخدم، أو عندما يقوم المستخدم بإجراء تحديدات، أو عندما يحاول تقديم النموذج.
الحالة Initial
عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.
الحالة Valid
عندما يجري المستخدم تحديدًا، ويمكن تقديم النموذج.
الحالة Required
عند عدم إجراء المستخدم للتحديد المطلوب.
الحالة Invalid
عندما يقوم المستخدم بتحديد زر اختيار قيمته غير مقبولة.
في أي وقت يقوم عنصر واجهة مستخدم Validation Radio Group بإدخال إحدى هذه الحالات من خلال تفاعل المستخدم، يتم تطبيق منطق إطار عمل Spry لفئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يجري أي تحديدات، يطبق Spry فئة على عنصر واجهة المستخدم والتي تتسبب في عرض رسالة الخطأ، "Please make a selection". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationRadio.css.
تتألف التعليمة البرمجية لـ HTML الافتراضية لعنصر واجهة مستخدم Validation Radio Group، الموجود عادةً داخل نموذج، من علامة span التي تحيط بالعلامة input type="radio" الخاصة بمجموعة أزرار الخيارات. تتضمن التعليمة البرمجية لـ HTML لعنصر واجهة مستخدم Validation Radio Group أيضًا علامات برنامج نصي أعلى المستند وبعد التعليمة البرمجية لـ HTML لعنصر واجهة المستخدم.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Radio Group، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Radio Group، راجع www.adobe.com/go/learn_dw_spryradio_ae.
إدراج عنصر واجهة مستخدم Validation Radio Group وتحريره
إدراج عنصر واجهة مستخدم Validation Radio Group
-
-
في مربع النص Name، أدخل اسمًا لمجموعة أزرار الخيارات.
-
أضف أزرار خيارات أو احذفها من المجموعة عن طريق النقر فوق أزرار علامة الجمع (+) أو الطرح (-).
-
في العمود Label، انقر فوق اسم كل زر من أزرار الخيار لجعل الحقل قابلاً للتعديل، وقم بتعيين أسماء فريدة لكل زر خيار.
-
في العمود Value، انقر فوق كل قيمة لجعل الحقل قابلاً للتعديل، وقم بتعيين قيمة فريدة لكل زر خيار.
-
(اختياري) انقر فوق زر خيار أو قيمته لتحديد صف معين، ثم انقر فوق السهمين لأعلى ولأسفل لتحريك الصف لأعلى أو لأسفل.
-
حدد نوع تخطيط لمجموعة أزرار الخيارات.
Line breaks
وضع كل زر من أزرار الخيار على سطر منفصل باستخدام فواصل الأسطر (علامات br).
Table
وضع كل زر من أزرار الخيار على سطر منفصل باستخدام صفوف الجداول الفردية (علاماتtr).
-
انقر فوق OK.
ملاحظة:
يمكنك أيضًا إدراج عنصر واجهة مستخدم Radio Group باستخدام الفئة Spry في اللوحة Insert.
تحديد عن حدوث التحقق
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر المستخدم خارج عنصر واجهة المستخدم، بينما يجري المستخدم التحديدات، أو عندما يحاول تقديم النموذج.
-
حدد عنصر واجهة مستخدم Validation Radio Group في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.
Blur
التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج مجموعة أزرار الخيار.
Change
التحقق طالما يقوم المستخدم بعمل تحديدات.
Submit
التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.
عرض حالات عنصر واجهة المستخدم في طريقة العرض Design
-
حدد عنصر واجهة مستخدم Validation Radio Group في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، حدد Initial لرؤية عنصر واجهة المستخدم في حالته الأولية.
تغيير الحالة المطلوبة لأزرار الخيارات
افتراضيًا، تتطلب عناصر واجهة مستخدم Validation Radio Group من المستخدم إجراء تحديد قبل تقديم النموذج. ومع ذلك، يمكنك جعل التحديدات اختيارية للمستخدم.
-
حدد عنصر واجهة مستخدم Validation Radio Group في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، قم بإلغاء تحديد الخيار Required.
تحديد قيمة فارغة أو غير صالحة
يمكنك تحديد قيمة يتم تسجيلها كفارغة أو غير صالحة، إذا حدد المستخدم زر خيار مرتبطًا بإحدى هذه القيم. إذا حدد المستخدم زر خيار بقيمة فارغة، يعيد المستخدم رسالة الخطأ "Please make a selection." إذا حدد المستخدم زر خيار بقيمة غير صالحة، يعيد المستخدم رسالة الخطأ "Please select a valid value."
-
حدد زر خيار في عنصر واجهة مستخدم Radio Group الخاص بك الذي تريد استخدامه لزر الخيار الفارغ أو غير الصالح. عند تحديد قيم فارغة أو غير صالحة لعنصر واجهة المستخدم، يجب توفر أزرار خيارات مقابلة لهذه القيم المخصصة بالفعل.
-
في عارض خصائص زر الخيار (Window > Properties)، قم بتخصيص قيمة مدققة لزر الخيار. لإنشاء زر خيار بقيمة فارغة، اكتب none في المربع النصي Checked Value. لإنشاء زر خيار بقيمة غير صالحة، اكتب invalid في المربع النصي Checked Value.
-
حدد عنصر واجهة مستخدم Validation Radio Group بالكامل بالنقر فوق علامة التبويب الزرقاء لعنصر واجهة المستخدم.
-
في عارض الخصائص، حدد القيم الفارغة أو غير الصالحة. لإنشاء عنصر واجهة مستخدم يعرض رسالة الخطأ القيمة الفارغة "Please make a selection"، اكتب none في المربع النصي Empty Value. لإنشاء عنصر واجهة مستخدم يعرض رسالة الخطأ "Please select a valid value" التي تفيد بوجود قيمة غير صالحة، اكتب invalid في المربع النصي Invalid Value.
تذكر أنه يجب أن يشتمل زر الخيار نفسه وعنصر واجهة مستخدم Radio Group على القيم غير الصالحة أو القيمة "لا شيء" المخصصة لرسائل الخطأ لعرضها بشكل صحيح.
تخصيص عنصر واجهة مستخدم Radio Group
على الرغم من أن عارض الخصائص يتيح لك إجراء تحريرات بسيطة لعنصر واجهة مستخدم Validation Radio Group، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تبديل CSS لعنصر واجهة مستخدم Validation Radio Group بحيث يمكنك إنشاء عنصر واجهة مستخدم مصمم حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا، راجع www.adobe.com/go/learn_dw_spryradio_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationRadio.css. يقوم Dreamweaver بحفظ الملف SpryValidationRadio.css في المجلد SpryAssets لموقعك في أي وقت تقوم فيه بإنشاء عنصر واجهة مستخدم Spry Validation Radio Group. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Radio Group بسهولة مباشرةً في ملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS عنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم عنصر واجهة مستخدم Validation Radio Group (إرشادات عامة)
-
افتح الملف SpryValidationRadio.css.
-
حدد موقع قاعدة CSS لجزء عنصر واجهة المستخدم المطلوب تغييره. على سبيل المثال، لتغيير لون خلفية حالة عنصر واجهة مستخدم Radio Group المطلوبة، قم بتحرير القاعدة radioRequiredState في الملف SpryValidationRadio.css.
-
قم بإجراء التغييرات التي تريدها على قاعدة CSS، ثم احفظ الملف.
يتضمن الملف SpryValidationRadio.css تعليقات ممتدة، تشرح التعليمة البرمجية والغرض من قواعد معينة. لمزيد من المعلومات، راجع التعليقات الموجودة في الملف.
تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Radio Group
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Radio Group باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Radio Group، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تصميمه
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
