في عالم تطوير الويب، يعد تسهيل تجربة المستخدم أمرًا بالغ الأهمية، وخاصة في المنتديات. نقدم لكم اليوم كود الدخول السريع للنسخة الأخيرة من AwesomeBB، والذي يتيح للمستخدمين الدخول دون الحاجة للانتقال إلى صفحة جديدة. يهدف هذا الكود إلى تعزيز سرعة الوصول وتوفير تجربة مريحة للزوار.
كيفية تركيب الكود
لتثبيت كود الدخول السريع، اتبع الخطوات البسيطة التالية:- الدخول إلى لوحة الإدارة:
- قم بفتح لوحة التحكم الخاصة بموقعك.
الكود:
javascriptنسخ الكود
الكود:
$(function() {
// تعريف المتغيرات
var userName = 'اسم العضو',
password = 'كلمة السر',
autoLogin = 'ادخلني بشكل آلي عند زيارتي مرة اخرى',
login = 'دخول',
register = 'التسجيل',
forgetPassword = 'لقد نسيت كلمة السر';
// إعدادات الزر
var loginBtn = document.querySelector('header a[href*="/login"]'),
loginHTML = '<div class="loginFromHeader"><form class="header-login-form" action="/login" method="post" name="form_login"><span class="close_form"><i class="material-icons">clear</i></span><input type="text" name="username" placeholder="'+userName+'" value="" maxlength="40"><input type="password" name="password" placeholder="'+password+'" size="25" maxlength="32"><label><input id="checkbox_autologin" type="checkbox" name="autologin" checked="checked"><span>'+autoLogin+'</span></label><input type="submit" name="login" value="'+login+'" class="btn button login-btn-header"><a href="/register" class="btn btn-flat">'+register+'</a><a href="/profile?mode=sendpassword" class="forgetPW">'+forgetPassword+'</a><input type="hidden" name="redirect" value=""><input type="hidden" name="query" value=""><input name="redirect" value="' + window.location.pathname + '" type="hidden" /></form></div>',
newElem = document.createElement('DIV'),
newStyle = document.createElement('STYLE');
// إضافة الأنماط
newStyle.innerHTML = '.LoginContainer { background-color: #263238; color: #fff; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; padding: 0 70px;opacity: 0; visibility: hidden; transition: 500ms;} .header-login-form { width: 100%; display: inline-flex; align-items: center; justify-content: center; }';
document.head.appendChild(newStyle);
newElem.innerHTML = loginHTML;
newElem.className = 'LoginContainer';
document.querySelector('header').appendChild(newElem);
loginBtn.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.LoginContainer').setAttribute('style', 'opacity: 1; visibility: visible;');
document.querySelector('.close_form').addEventListener('click', function(e) {
this.parentNode.parentNode.parentNode.setAttribute('style', 'opacity: 0; visibility: hidden;');
});
});
});
فوائد كود الدخول السريع
- سهولة الاستخدام: يوفر الكود واجهة مستخدم سهلة وبسيطة للدخول، مما يقلل من الوقت المستغرق للوصول إلى المنتدى.
- تحسين تجربة المستخدم: يسمح للمستخدمين بالدخول بسهولة، مما يعزز رضاهم ويزيد من احتمالية عودتهم للموقع.
- تصميم جذاب: يضيف لمسة جمالية إلى واجهة الموقع من خلال تصميم أنيق وحديث.
استنتاج
باستخدام كود الدخول السريع لـ AwesomeBB، يمكنك تحسين تجربة المستخدم بشكل كبير. لا تفوت الفرصة لتقديم واجهة تفاعلية وفعالة لمستخدميك، مما يجعلهم يشعرون بالراحة عند استخدام المنتدى.الكلمات المفتاحية:
- كود الدخول السريع
- AwesomeBB
- تحسين تجربة المستخدم
- واجهة مستخدم
- تطوير الويب
