السلام عليكم ورحمة الله وبركاته
إضافة ستة أزرار جديدة للتفاعل السريع إلى علبة الدردشة بدون الحاجه الى الضغط على زر "ارسال". يمكن تعزيز واجهة الدردشة بإضافة وظائف جديدة وميزات مبتكرة. في هذا الموضوع، سنتناول كيفية إضافة ستة أزرار جديدة إلى علبة الدردشة للتفاعل السريع، مما سيسمح للأعضاء بإدخال نصوص مختصرة وروابط نصيه ومقاطع فيديو وصور متحركة بسرعة وفعالية. وبدون الحاجه الى الضغط على زر "ارسال".
هذا الزر يتيح للمستخدمين إدخال نصوص قصيرة وسريعة، مما يسهل مشاركة المعلومات بشكل فوري دون الحاجة إلى كتابة مطولة.
ويكنك اضافة المزيد من الرموز والنصوص كما تريد
2. زر الجيف
يمكن من خلال هذا الزر إدخال صور متحركة (GIFs) تضفي روح المرح على المحادثات وتساعد في التعبير عن المشاعر بشكل أكثر ديناميكية.
ويكنك اضافة المزيد من الصور كما تريد
3. زر يوتيوب
يمكّن هذا الزر المستخدمين من معاينة مقاطع الفيديو مباشرة في الدردشة، مما يسهل مشاركة المحتوى المرئي ويعزز من التفاعل بين الأعضاء.
4. زر رابط نصي
يتيح للمستخدمين إنشاء روابط نصية مباشرة، مما يسهل تبادل المعلومات والمحتويات بشكل أكثر سلاسة ويسر.
5. زر خلفية صورة
يمكن لمستخدمي الدردشة استخدام هذا الزر لوضع خلفيات مخصصة للنصوص، مما يجعل المحادثات أكثر جاذبية وإبداعية.
6. زر تكبير النص
هذا الزر يسمح للمستخدمين بزيادة حجم النصوص، مما يسهل قراءتها ويتيح للأعضاء تسليط الضوء على الرسائل الهامة.
ومن ثم توجه نحو لوحة الادارة - عناصر اضافية - اكواد الـ Javascript واضف الكود التالي علبة الدردشة:
من هذه الأزرار، سيتمكن الأعضاء من مشاركة النصوص القصيرة والصور المتحركة بسهولة وسرعة لتجربة دردشة أكثر حيوية وفاعلية. نأمل أن تسهم هذه الميزات في جعل المحادثات أكثر تفاعلية ومتعة
تم كتابة البرنامج التعليمي بواسطة كونان2000 باستخدام AI
منقول من منتدى الدعم والمساعدة
بالتوفيق للجميع
والسلام ختام
إضافة ستة أزرار جديدة للتفاعل السريع إلى علبة الدردشة بدون الحاجه الى الضغط على زر "ارسال". يمكن تعزيز واجهة الدردشة بإضافة وظائف جديدة وميزات مبتكرة. في هذا الموضوع، سنتناول كيفية إضافة ستة أزرار جديدة إلى علبة الدردشة للتفاعل السريع، مما سيسمح للأعضاء بإدخال نصوص مختصرة وروابط نصيه ومقاطع فيديو وصور متحركة بسرعة وفعالية. وبدون الحاجه الى الضغط على زر "ارسال".
معاينة عمل الكود
الازرار الموجودة في الكود
1. زر القلمهذا الزر يتيح للمستخدمين إدخال نصوص قصيرة وسريعة، مما يسهل مشاركة المعلومات بشكل فوري دون الحاجة إلى كتابة مطولة.
ويكنك اضافة المزيد من الرموز والنصوص كما تريد
2. زر الجيف
يمكن من خلال هذا الزر إدخال صور متحركة (GIFs) تضفي روح المرح على المحادثات وتساعد في التعبير عن المشاعر بشكل أكثر ديناميكية.
ويكنك اضافة المزيد من الصور كما تريد
3. زر يوتيوب
يمكّن هذا الزر المستخدمين من معاينة مقاطع الفيديو مباشرة في الدردشة، مما يسهل مشاركة المحتوى المرئي ويعزز من التفاعل بين الأعضاء.
4. زر رابط نصي
يتيح للمستخدمين إنشاء روابط نصية مباشرة، مما يسهل تبادل المعلومات والمحتويات بشكل أكثر سلاسة ويسر.
5. زر خلفية صورة
يمكن لمستخدمي الدردشة استخدام هذا الزر لوضع خلفيات مخصصة للنصوص، مما يجعل المحادثات أكثر جاذبية وإبداعية.
6. زر تكبير النص
هذا الزر يسمح للمستخدمين بزيادة حجم النصوص، مما يسهل قراءتها ويتيح للأعضاء تسليط الضوء على الرسائل الهامة.
تركيب الكود
توجه نحو لوحة الادارة - مظهر المنتدى - ورقة Css - واضف الكود التالي
CSS:
button#show-lead-pencil,#show-GIF,button#show-youtube,button#show-url,button#show-large-text,button#show-background {
margin-left: 7px;
border: 0 !important;
float: right;
font-size: 0;
height: 25px;
width: 25px;
cursor: pointer;
}
button#show-lead-pencil {
background: url(https://i.servimg.com/u/f30/20/35/61/89/collec10.png);
background-size: 100% 100%;
margin-right: 7px;
}
#show-GIF {
background: url(https://i.servimg.com/u/f30/20/35/61/89/video-10.png);
background-size: 100% 100%;
position: relative;
}
button#show-youtube {
background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a15.jpg);
}
button#show-url {
background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a16.jpg);
}
button#show-large-text {
background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a17.jpg);
}
button#show-background {
background: url(https://i.servimg.com/u/f20/16/85/77/67/360_f_10.jpg);
background-size: 100% 100%;
}
#GIF-list {
position: fixed; /* لجعل القائمة ثابتة في وسط الشاشة */
background-color: #fff;
padding: 10px;
display: none; /* إخفاء القائمة في البداية */
z-index: 999; /* تأكد من ظهور القائمة فوق العناصر الأخرى */
list-style: none;
margin: 0;
padding: 0;
width: 400px; /* عرض القائمة بناءً على عدد الأعمدة */
max-height: 80vh; /* ارتفاع أقصى للقائمة */
overflow-y: auto; /* تمرير عمودي إذا كان المحتوى أكثر من الارتفاع المحدد */
top: 55%; /* مركز القائمة عموديًا */
left: 66%; /* مركز القائمة أفقيًا */
transform: translate(-50%, -50%); /* تحريك القائمة لتكون تمامًا في المركز */
}
#GIF-list li {
display: inline-block;
margin: 5px;
}
#GIF-list img {
height: 60px;
width: 60px;
cursor: pointer;
}
#GIF-list li {
margin-top: 25px !important;
display: inline-block;
margin: 3px;
}
ul#GIF-list:before {
font-weight: bold;
font-size: 17px;
color: #fffdfd;
background: #2196F3;
right: 0;
left: 0;
position: absolute;
display: flex;
content: "صور متحركة";
justify-content: center;
align-content: center;
}
#lead-pencil-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
}
#GIF-list img {
height: 60px;
width: 60px;
cursor: pointer;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lead-pencil {
display: block;
text-align: center;
background-color: #f9f9f9;
cursor: pointer;
border-radius: 4px;
}
.lead-pencil:hover {
background-color: #e0e0e0;
}
button#show-more {
border: 0 !important;
background: #e3e5e5 !important;
padding: 2px;
cursor: pointer;
}
@media (max-width: 768px) { /* يمكنك تعديل العرض حسب الحاجة */
#GIF-list {
width: 80% !important; /* عرض القائمة بناءً على عدد الأعمدة */
transform: translate(-70%,-50%)!important; /* تحريك القائمة لتكون تمامًا في المركز */
}
}ومن ثم توجه نحو لوحة الادارة - عناصر اضافية - اكواد الـ Javascript واضف الكود التالي علبة الدردشة:
JavaScript:
$(document).ready(function() {
function setupButtons() {
if ($(window).width() < 4768) {
$('#nb-users-connected').after('<button id="show-more" type="button">المزيد</button>');
}
}
setupButtons();
$('body').append(`
<div id="button-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
<button class="popup-button" id="show-lead-pencil" type="button">أظهر الرموز</button>
<button class="popup-button" id="show-youtube" type="button">يوتيوب</button>
<button class="popup-button" id="show-url" type="button">رابط نصي</button>
<button class="popup-button" id="show-large-text" type="button">نص كبير</button>
<button class="popup-button" id="show-background" type="button">خلفية</button>
<button class="popup-button" id="show-GIF" type="button">عرض GIF</button>
<button id="close-button-popup">إغلاق</button>
</div>
`);
$('#show-more').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('#button-popup').toggle();
});
$('#close-button-popup').on('click', function() {
$('#button-popup').hide();
});
// إعدادات نافذة الرموز
$('body').append(`
<div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
<div id="lead-pencil-list" style="margin-bottom: 10px;"></div>
<button id="close-popup">إغلاق</button>
</div>
`);
var symbols = [
"السلام عليكم ورحمة الله", "كيف حالك", "تمام ولله الحمد", "اهلا ومرحبا بك",
"هههههههه", "بروح انام", "تصبحون على خير", "مع السلامة",
"^_^", "◕.◕", "(❁´◡`❁)", "(★‿★)",
"X_X", "^_~", "（〇_ｏ）", "(>▂<)",
"(＠_＠;)", "(￣﹏￣；)", "(►__◄)", "(︶^︶)"
];
var uniqueSymbols = Array.from(new Set(symbols));
uniqueSymbols.forEach(function(symbol) {
$('#lead-pencil-list').append(`<span class="lead-pencil" data-symbol="${symbol}">${symbol}</span>`);
});
$(document).on('click', '#show-lead-pencil', function() {
$('#popup').show();
$('#button-popup').hide();
});
$('#close-popup').on('click', function() {
$('#popup').hide();
});
$(document).on('click', '.lead-pencil', function() {
var symbol = $(this).data('symbol');
var currentText = $('#chatbox_footer #message').val();
if (!currentText.includes(symbol)) {
$('#message').val(currentText + symbol);
$('#message').focus();
$('button[value="إرسال"],input#submit_button').click();
}
$('#popup').hide();
});
// إعدادات الأزرار الأخرى
$(document).on('click', '.popup-button', function() {
handleButtonClick($(this).attr('id'));
$('#button-popup').hide();
});
function handleButtonClick(buttonId) {
if (buttonId === 'show-youtube') {
var youtubeUrl = prompt("أدخل رابط يوتيوب:");
if (youtubeUrl) {
$('#message').val(function(index, value) {
return value + `[youtube]${youtubeUrl}[/youtube]`;
});
$('button[value="إرسال"],input#submit_button').click();
}
} else if (buttonId === 'show-url') {
var url = prompt("أدخل الرابط:");
var description = prompt("أدخل وصف الرابط:");
if (url && description) {
$('#message').val(function(index, value) {
return value + `[url=${url}]${description}[/url]`;
});
$('button[value="إرسال"],input#submit_button').click();
}
} else if (buttonId === 'show-large-text') {
var largeText = prompt("أدخل النص الكبير:");
if (largeText) {
$('#message').val(function(index, value) {
return value + `[size=24]${largeText}[/size]`;
});
$('button[value="إرسال"],input#submit_button').click();
}
} else if (buttonId === 'show-background') {
var imageUrl = prompt("أدخل رابط الصورة:");
var backgroundText = prompt("أدخل النص:");
if (imageUrl && backgroundText) {
$('#message').val(function(index, value) {
return value + `[table][tr][td style="background: url(${imageUrl});background-repeat: no-repeat;background-size: 100% 100%;height: 88px;"]${backgroundText}[/td][/tr][/table]`;
});
$('button[value="إرسال"],input#submit_button').click();
}
} else if (buttonId === 'show-GIF') {
$('#popup').hide();
$('#GIF-list').toggle();
}
}
$(document).on('click', function(event) {
if (!$(event.target).closest('#popup, #button-popup, #show-more').length) {
$('#popup').hide();
$('#button-popup').hide();
}
});
// إعدادات زر GIF
var $imageList = $('<ul>').attr('id', 'GIF-list').hide();
var GIF = [
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/35664d10.gif', alt: 'ولد يرقص' },
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/animat24.gif', alt: 'موزة ترقص' },
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/sponge10.gif', alt: 'سبونج بوب' },
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/goku-d10.gif', alt: 'جوجو' },
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/detect10.gif', alt: 'كونان' },
{ src: 'https://i.servimg.com/u/f30/20/35/61/89/emoji-10.gif', alt: 'متعجب' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/tom-an10.gif', alt: 'توم يبي ينام' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/d6bd4210.gif', alt: 'توم وجيري' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/kuroo-10.gif', alt: 'ضحكة' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/c18xku10.gif', alt: 'huh' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/cat-gi10.gif', alt: 'قطة' },
{ src: 'https://i.servimg.com/u/f20/16/85/77/67/2ded2410.gif', alt: 'haha' }
];
GIF.forEach(function(image) {
var $listItem = $('<li>');
var $img = $('<img>').attr('src', image.src).attr('alt', image.alt);
$listItem.append($img);
$imageList.append($listItem);
});
$('body').append($imageList);
$imageList.on('click', 'img', function() {
var src = $(this).attr('src');
$('#message').val(src);
$('button[value="إرسال"],input#submit_button').click();
$imageList.hide();
});
$(document).on('click', function(event) {
if (!$(event.target).closest('#show-GIF, #GIF-list').length) {
$imageList.hide();
}
});
});من هذه الأزرار، سيتمكن الأعضاء من مشاركة النصوص القصيرة والصور المتحركة بسهولة وسرعة لتجربة دردشة أكثر حيوية وفاعلية. نأمل أن تسهم هذه الميزات في جعل المحادثات أكثر تفاعلية ومتعة
تم كتابة البرنامج التعليمي بواسطة كونان2000 باستخدام AI
منقول من منتدى الدعم والمساعدة
بالتوفيق للجميع
والسلام ختام
