بسم الله الرحمن الرحيم
السّلام عليكم ورحمة الله وبركـاته...
يسعدني أن أقدم محاولتي الأولى في تصميم صفحة تسجيل دخول بإستخدام HTML وتكويدها بالـCSS وأخيرًا التأثيرات البسيطة بإستخدام jquery.
اضغط من هنا للمعاينة
ستجدون في المرفقات ملف الـHTML وكذلك الـCSS.
تعلمت من خلال هذه التجربة في الجكويري أنه يمكن تنفيذ عدة أوامر أو حركات عند الضغط على زر وإليكم المثال التالي:-
بدأنا الدالة (function) بإعلامها أنه عند الضغط على الزر الذي أعطيتيه الهوية (id) "lang_en" أثناء كتابة ملف الـHTML فعليكِ تنفيذ الأوامر التالية:-
ثم جعلت سطر إظهار الحاوية آخر سطر في اللغة التركية وفي كل الحالات فإنها تظهر أول شيء، فلا يظر بأيها بدأت، وحتى عند محاولة إعطاء عدد ثواني لتأخير إظهار الحاوية فإنها لا تعمل وأعتقد أنها ستعمل لو وضعت دالة (function) بعد كلمة slow في المثال أعلاه ووضعت إظهار اللغة داخلة كما شرحها شقاوي معطيًا الكود التالي:-
عند التكويد في ملف الـCSS أضطريت لأن أعطي لزر تسجيل الدخول & التسجيل هوية (id) حتّى أجعل كل زر يظهر بنصف الحاوية وتحت بعض معطيًا اياهم قيمة 50%، لكي تختلف طريقة العرض عن أزرار اللغة.
وفيما يخص قلب إتجاه الكتابة من اليسار لليمين ففعلتها في الـCSS بعد أن أعطيت هوية (id) لمدخل (input) الخاص باللغة العربية وكتب الكود التالي في الـCSS:-
الجدير بالذكر أني استخدمت الكود التالي في الـCSS لتدريج الخلفية:-
فيما يخص vh فهي تعني viewport height وتعني 100% من ارتفاع شاشة المستخدم وإن أردت العرض فعليك استعمال الوحدة vw مع min-width.
هذه هي محاولتي الأولى لإنشاء صفحة تسجيل دخول والتي استغرقتني 6 ساعات.
السّلام عليكم ورحمة الله وبركـاته...
يسعدني أن أقدم محاولتي الأولى في تصميم صفحة تسجيل دخول بإستخدام HTML وتكويدها بالـCSS وأخيرًا التأثيرات البسيطة بإستخدام jquery.
اضغط من هنا للمعاينة
ستجدون في المرفقات ملف الـHTML وكذلك الـCSS.
تعلمت من خلال هذه التجربة في الجكويري أنه يمكن تنفيذ عدة أوامر أو حركات عند الضغط على زر وإليكم المثال التالي:-
$(function(){
$('#lang_en').click(function(){
$('.container').slideDown('slow')
$('.ara_login_form').hide('');
$('.eng_login_form').show('');
$('.turk_login_form').hide('');
});بدأنا الدالة (function) بإعلامها أنه عند الضغط على الزر الذي أعطيتيه الهوية (id) "lang_en" أثناء كتابة ملف الـHTML فعليكِ تنفيذ الأوامر التالية:-
- إظهار الحاوية والتي سبق وأن أعطيتها فئة (class) أسميتها "container". فالـ class نضع قبله نقطة(.) وأما الـ id نضع قبله علامة الوسم (#)
- إخفاء وسم الـ div والذي سبق وأن أعطيته فئة (class) وأسميتها (ara_login_form).
- إخفاء وسم الـ div والذي سبق وأن أعطيته فئة (class) وأسميتها (turk_login_form).
$('#lang_ar').click(function(){
$('.ara_login_form').show('');
$('.container').slideDown('slow')
$('.eng_login_form').hide('');
$('.turk_login_form').hide('');
});ثم جعلت سطر إظهار الحاوية آخر سطر في اللغة التركية وفي كل الحالات فإنها تظهر أول شيء، فلا يظر بأيها بدأت، وحتى عند محاولة إعطاء عدد ثواني لتأخير إظهار الحاوية فإنها لا تعمل وأعتقد أنها ستعمل لو وضعت دالة (function) بعد كلمة slow في المثال أعلاه ووضعت إظهار اللغة داخلة كما شرحها شقاوي معطيًا الكود التالي:-
$(selector).slideDown(num, function(){
});
$(selector).slideUp(num, function(){
});عند التكويد في ملف الـCSS أضطريت لأن أعطي لزر تسجيل الدخول & التسجيل هوية (id) حتّى أجعل كل زر يظهر بنصف الحاوية وتحت بعض معطيًا اياهم قيمة 50%، لكي تختلف طريقة العرض عن أزرار اللغة.
وفيما يخص قلب إتجاه الكتابة من اليسار لليمين ففعلتها في الـCSS بعد أن أعطيت هوية (id) لمدخل (input) الخاص باللغة العربية وكتب الكود التالي في الـCSS:-
direction: rtl; الجدير بالذكر أني استخدمت الكود التالي في الـCSS لتدريج الخلفية:-
background: linear-gradient(to bottom, #CAF697, #D5F8AC , #EDFCDD);
min-height: 100vh;فيما يخص vh فهي تعني viewport height وتعني 100% من ارتفاع شاشة المستخدم وإن أردت العرض فعليك استعمال الوحدة vw مع min-width.
هذه هي محاولتي الأولى لإنشاء صفحة تسجيل دخول والتي استغرقتني 6 ساعات.