اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

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

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



أضف رد جديد

قديم 27-02-2019, 05:07 PM   #1
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
افتراضي التنبيه على صحة البيانات أو عدمها بواسطة css

التنبيه على صحة البيانات أو عدمها بواسطة CSS

تقدّم المواصفات الجديدة في CSS3 محدّدين Selector مفيدين للغاية هما :valid و :invalid وهي أصناف زائفة pseudo-class يمكن استخدامها مع عناصر الإدخال الخاصة بالاستمارات. لنفترض أن لديك عنصر إدخال تتحقّق من خلاله فيما إذا كان ما أدخله المستخدم صحيحًا أم خاطئًا. لإجراء عملية التحقق ستحتاج إلى إضافة خاصية HTML5 required إلى الوسم الخاص بعنصر الإدخال، وبهذا يمكن الاستفادة من المحدّدين :valid/:invalid لتغيير لون حقل الإدخال ليعرف المستخدم من خلال ذلك أنّ ما أدخله صحيح أو خاطئ. فعلى سبيل المثال يتحول مربع الإدخال إلى اللون الأخضر عندما تكون العبارة صحيحة، وكما يلي:

input:required {
background: #AAA;
}
input:valid {
background: #0A0;
}
input:invalid {
background: #A00;
}
سننشئ في هذا الدرس استمارة بنمط Material وسننبّه المستخدم على صحة البيانات المدخلة في الاستمارة من خلال الصنفين الزائفين :valid و :invalid. تتألف الاستمارة من مربع نصّي وحيد وقد أحطنا عنصري input[type="text"] وlabel بعنصر div يحمل المحدّد .form-control من إطار عمل Bootstrap. لدينا أيضًا شريط سيتغير لونه بين الأخضر والأحمر للدلالة على صحة المعلومات المدخلة من عدمها.

<div class="form-control">
<input type="text" required />
<span class="bar"></span>
<label for="First Name">First Name</label>
</div>
في البداية سنزيل جميع الحدود المحيطة بمربّع النص باستثناء الحدّ السفلي وسنلوّنه باللون الأزرق ليكون متناسقًا مع نمط التصميم Material.

.form-control {
position:relative;
margin-top:40px;
width:400px;
}
input {
border:none;
border-bottom:3px solid #34495e;
padding:10px 0;
width:400px;
display:block;
font-size:16px;
}
سيؤدي العنصر label دور ماسك مكان placeholder، لذا سنجعل موقعه مطلقًا مع تعيين المسافة اليسرى والعلوية المناسبة، ليبدو العنصر بهيئة ماسك مكان اعتيادي.

label {
position:absolute;
top:8px;
left:5px;
font-size:16px;
color:#333;
transistion: 0.3s ease all;
-webkit-transition:0.3s ease all;
}
والآن عندما يضغط المستخدم أو يجعل التركيز على مربّع النص سنقوم بإلغاء الحدّ السفلي، وسنغير موقع ماسك المكان ليصبح فوق مربع النص ليبدو كـ label.

input:focus{
border:none;
outline:none;
}
سيبقى الـ label فوق مربع النص إلى أن يجعل المستخدم التركيز على مربّع النص ويضيف إليه أي معلومات صحيحة.

input:focus ~ label, .form-control input:valid ~ label {
top:-10px;
font-size:12px;
left:2px;
color:#111;
}
لن يظهر المحدّد .bar بصورة تلقائية، بمعنى أن عرضه سيكون صفرًا، وإن قمنا بالتركيز على مربع النص فإن عرض المحدّد .bar سيزداد. كما ستلاحظ فقد حدّدنا العرض ضمن الصنفين الكاذبين (:after و :before) حيث سيزداد العرض 50% لكل عنصر زائف، بمعنى أن الزيادة الكلية ستكون 100%، وهكذا سنحصل على تأثير توسّع جميل.

.bar:before, .bar:after {
content:'';
height:3px;
width:0;
bottom:1px;
position:absolute;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}

.bar:before {
left:50%;
}

.bar:after {
right:50%;
}


input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
سنغيّر الآن لون خلفية الشريط حسب صحة أو عدم صحة البيانات المدخلة، وذلك باستخدام الصنفين الزائفين :valid و :invalid.

input:valid ~ .bar:before, input:valid ~ .bar:after{
background:#2ecc71;
}

input:invalid ~ .bar:before, input:invalid ~ .bar:after{
background:#e74c3c;
}
تعمل هذه الطريقة على متصفحات (+Chrome(10 و (+Firefox(4 و (+Safari(5 و (+Opera(10 و (+IE(10، ولكن لا تعمل على الإصدار التاسع وما دونه من متصفح IE. وجدير بالذكر أنّه لن يتم التحقّق من صحة البيانات بأي شكل من الأشكال، ويمكن استخدام هذه الطريقة في مجال تجربة المستخدم فقط.

القيصر غير متواجد حالياً   اقتباس
قديم 28-07-2019, 07:51 PM   #2
الصورة الرمزية احمد البرنس
تاريخ التسجيل: Jul 2019
المشاركات: 500
التقييم: 10
افتراضي

بارك الله فيكم ونفعنا بما قدمتم
جزاكم الله خير الجزاء
سلمت اناملكم
فى انتظار ابدعاتكم
دمتم متألقين مبدعين متميزين
احمد البرنس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
نظرة شاملة على قاعدة بيانات ووردبريس مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 27-07-2019 11:05 PM
ما هو تأثير ال ( بيج داتا ) على تصميم المواقع raheel قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 11-04-2019 06:55 PM
التنبيه على صحة البيانات أو عدمها بواسطة css الفارس قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 05-04-2019 01:28 PM
تقليص قاعدة البيانات | أفضل الممارسات لتقليص قاعدة بيانات الووردبرس الخاصة بك القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 11-03-2019 09:23 AM
error establishing a database connection خطأ إنشاء اتصال بقاعدة البيانات القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 11-03-2019 09:08 AM


الساعة الآن 06:01 PM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.