تُعتبر علبة الدردشة من العناصر الحيوية في أي منتدى، حيث تُسهم في تعزيز التواصل بين الأعضاء. إذا كنت تبحث عن طريقة لتحديث علبة الدردشة الخاصة بمنتداك وجعلها أكثر تفاعلاً وجاذبية، فإن استخدام كود JavaScript لجعلها مشابهة لدردشة فيسبوك هو الحل الأمثل. هذا المقال يقدم لك الكود الكامل وشرح كيفية استخدامه لتحقيق تجربة مستخدم متميزة.
فوائد علبة الدردشة المشابهة لفيسبوك:
- تجربة مستخدم سلسة: تصميم مألوف للأعضاء يجعل التفاعل أكثر سهولة ومتعة.
- تمييز رسائل المشرفين: تساعد على إبراز رسائل المشرفين بلون مختلف، مما يُسهل على الأعضاء التعرف على التوجيهات والمعلومات المهمة.
- زيادة التفاعل: التصميم الجذاب والوظائف السلسة تُشجع الأعضاء على المشاركة والتفاعل بشكل أكبر.
كيفية تثبيت الكود:
لتثبيت هذا الكود، اتبع الخطوات التالية:- تفعيل صور الأعضاء في علبة الدردشة.
- إنشاء كود JavaScript جديد.
- إضافة الكود التالي إلى علبة الدردشة:
javascript
نسخ الكود
الكود:
let bgColor = '#FF0000', // لون خلفية النص
txtColor = '#FFFFFF', // لون النص
bgImage = 'https://i.servimg.com/u/f64/18/92/67/94/ezgif_10.gif', // صورة خلفية النص
adminStyle = document.createElement('STYLE');
adminStyle.innerHTML = '.chatAdmin .msg span {color: ' + txtColor + ' !important; } .chatAdmin .msg {background-image: url(' + bgImage + ') !important; background-position: top center; background-color: ' + bgColor + ' !important; color: ' + txtColor + ' !important; display: inline-block !important; padding: 0 5px; border-radius: 5px; }';
document.head.appendChild(adminStyle);
let nodeStyle = document.createElement('STYLE');
nodeStyle.innerHTML = '#chatbox .otherBuble .user-msg .cb-avatar { order: 1; padding: 0 3px 0 0 !important; } #chatbox .myBuble .user-msg .cb-avatar { order: 0; padding: 0 0 0 3px !important; } #chatbox>p { border: none !important; } #chatbox .user-msg .cb-avatar { padding: 0 0 0 3px !important; } #chatbox .user-msg .cb-avatar img { height: 30px !important; width: 30px !important; } #chatbox .user-msg { position: relative; display: flex; align-items: center; } .chatbox_row_1, .chatbox_row_2 { text-align: center; background: #f9deb5; border: none; overflow: visible; padding: 2px 5px; margin: 3px 0; } .myBuble, .otherBuble { background: transparent; } .otherBuble { border: none; display: flex; position: relative; margin: 1px 0 !important; align-items: center; justify-content: flex-end; } .myBuble { justify-content: right; } .myBuble .msg, .otherBuble .msg { position: relative; background: #e4e6eb; padding: 5px 12px; border-radius: 50px; } .myBuble .msg { background: rgb(0, 153, 255); }.myBuble .msg span { color: #fff !important; } .otherBuble .user, .otherBuble .date-and-time, .myBuble .user, .myBuble .date-and-time { opacity: 0 !important; position: absolute; font-size: 10px; color: #FFF !important; display: inline-block !important; background: rgba(51, 51, 51, .5); border-radius: 5px; padding: 2px; z-index: 9999; } .user-msg .cb-avatar:hover .user, #chatbox .msg:hover .date-and-time { opacity: 1 !important; } .otherBuble .date-and-time:after, .otherBuble .user:after, .myBuble .date-and-time:after, .myBuble .user:after { content: ""; bottom: -5px; position: absolute; border-top: solid 5px rgba(51, 51, 51, .5); border-left: solid 5px transparent; border-right: solid 5px transparent; } .myBuble .user { top: -20px; right: 0; } .myBuble .user:after { right: 10px !important } .otherBuble .user { top: -20px; left: 0; } .otherBuble .user:after { left: 10px !important } .myBuble .date-and-time:after, .otherBuble .date-and-time:after { right: 15px; } .otherBuble .date-and-time, .myBuble .date-and-time { top: -25px; right: calc( 50% - 23.06px ) }';
document.head.appendChild(nodeStyle);
setInterval(function() {
let chatMsgs = document.querySelectorAll('#chatbox .user-msg .chatbox-message-username');
for (i = 0; i < chatMsgs.length; i++) {
if (chatMsgs[i].innerHTML == my_infos.username) {
chatMsgs[i].parentNode.parentNode.parentNode.parentNode.classList.add('myBuble');
} else {
chatMsgs[i].parentNode.parentNode.parentNode.parentNode.classList.add('otherBuble');
}
}
let chatAdmin = document.querySelectorAll('#chatbox .user-msg');
for (i = 0; i < chatAdmin.length; i++) {
if (chatAdmin[i].innerText[0] == '@') {
chatAdmin[i].classList.add('chatAdmin');
}
}
$('.otherBuble, .myBuble').each(function() {
var dateTime = $(this).find('.date-and-time'),
userMsg = $(this).find('.msg'),
userName = $(this).find('.user'),
delMsg = $(this).find('.cb_delete_msg'),
userImg = $(this).find('.cb-avatar');
$(userImg).append(userName);
$(userMsg).append(dateTime);
$(userMsg).append(delMsg);
});
}, 100);
توضيحات إضافية:
- تخصيص الألوان: يمكنك تعديل لون خلفية النص ولون النص حسب تفضيلاتك.
- خلفية الدردشة: يمكن تغيير صورة الخلفية لتناسب تصميم المنتدى الخاص بك.
خلاصة:
تُعد إضافة علبة دردشة مشابهة لدردشة فيسبوك خطوة مميزة نحو تحسين تجربة المستخدم في منتداك. من خلال استخدام الكود الموضح، يمكنك تعزيز التفاعل بين الأعضاء وجعل التواصل أكثر سهولة ويسر.الكلمات المفتاحية:
دردشة المنتدى، علبة الدردشة، JavaScript، تحسين تجربة المستخدم، تصميم علبة الدردشة، تفاعل الأعضاء.
