The Best
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

The Bestدخول
●● إعلانـات ●●
إعلانك هنا إعلانك هنا إعلانك هنا
إعـلانـات المنتـدى

إحصائيات المنتدى
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
138 المساهمات
131 المساهمات
117 المساهمات
66 المساهمات
42 المساهمات
34 المساهمات
31 المساهمات
30 المساهمات
19 المساهمات
11 المساهمات
آخر المشاركات




×
النص



لون شفاف

الألوان الافتراضية
×
الخلفية



لون شفاف

الألوان الافتراضية
×
النص



لون شفاف

الألوان الافتراضية
×
الخلفية



لون شفاف

الألوان الافتراضية

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz

السلام عليكم ورحمة الله وبركاته,
إضافة ستة أزرار جديدة للتفاعل السريع إلى علبة الدردشة بدون الحاجه الى الضغط على زر "ارسال"


كيف حالكم جميعاً؟ أتمنى أن تكونوا بخير
علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع PV4JlES
https://i.postimg.cc/G3JtqRSk/Animation.gif
_____________________________________

يمكن تعزيز واجهة الدردشة بإضافة وظائف جديدة وميزات مبتكرة. في هذا الموضوع، سنتناول كيفية إضافة ستة أزرار جديدة  إلى علبة الدردشة للتفاعل السريع،
مما سيسمح للأعضاء بإدخال نصوص مختصرة وروابط نصيه ومقاطع فيديو وصور متحركة بسرعة وفعالية.
وبدون الحاجه الى الضغط على زر "ارسال"   علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 4126721595

1. زر القلم
هذا الزر يتيح للمستخدمين إدخال نصوص قصيرة وسريعة، مما يسهل مشاركة المعلومات بشكل فوري دون الحاجة إلى كتابة مطولة.
ويكنك اضافة المزيد من الرموز والنصوص كما تريد

2. زر الجيف
يمكن من خلال هذا الزر إدخال صور متحركة (GIFs) تضفي روح المرح على المحادثات وتساعد في التعبير عن المشاعر بشكل أكثر ديناميكية.
ويكنك اضافة المزيد من الصور كما تريد

3. زر يوتيوب
يمكّن هذا الزر المستخدمين من معاينة مقاطع الفيديو مباشرة في الدردشة، مما يسهل مشاركة المحتوى المرئي ويعزز من التفاعل بين الأعضاء.

4. زر رابط نصي
يتيح للمستخدمين إنشاء روابط نصية مباشرة، مما يسهل تبادل المعلومات والمحتويات بشكل أكثر سلاسة ويسر.

5. زر خلفية صورة
يمكن لمستخدمي الدردشة استخدام هذا الزر لوضع خلفيات مخصصة للنصوص، مما يجعل المحادثات أكثر جاذبية وإبداعية.

6. زر تكبير النص
هذا الزر يسمح للمستخدمين بزيادة حجم النصوص، مما يسهل قراءتها ويتيح للأعضاء تسليط الضوء على الرسائل الهامة.


ملاحظة...
تظهر الازرار داخل زر واحد اسمه "المزيد" وعند الضغط عليه تظهر الازرار الستة
________________________________


كيفية تثبيت البرنامج


على جميع النسخ

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
العنوان * : اختيارك
أضف الكود الى : علبة الدردشة

الكود:

$(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", "^_~", "(〇_o)", "(>▂<)",
        "(@_@;)", "( ̄﹏ ̄;)", "(►__◄)", "(︶^︶)"
    ];

    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();
        }
    });
});


ومبروك عليك الازرار الجديدة في علبة الدردشة  علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 981351

-----------------------------------------------------------------------


خاتمة

من هذه الأزرار، سيتمكن الأعضاء من مشاركة النصوص القصيرة والصور المتحركة بسهولة وسرعة
لتجربة دردشة أكثر حيوية وفاعلية.  

نأمل أن تسهم هذه الميزات في جعل المحادثات أكثر تفاعلية ومتعة  8)

والسلام عليكم ورحمة الله وصلى الله على نبينا محمد وعلى اله وصحبة اجمعين

,

تم كتابة البرنامج التعليمي بواسطة كونان2000 باستخدام AI

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
اضافات رائعة و مفيدة جدا

خاصة زر تكبير الخط وزر الجيف

بوركت جهودك كونان


descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
Akatsuki كتب:
اضافات رائعة و مفيدة جدا

خاصة زر تكبير الخط وزر الجيف

بوركت جهودك كونان



العفو اختي @Akatsuki
شكرا لكِ على كلماتك الرائعه والطيبه

وكذلك اذا ممكن تحبون تضيفون غير هذه الازرار فباذن الله ممكن

والله يوفقك اختي
تحياتي
علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 3937780206

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
ماشاء الله عليك
الله يعطيك العافية

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
الله يعافيك اختي  @دمعه السعودية
علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 698882594

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
أهلًا كونان ~ 
إضافة رائعة جدًا
علبة الدردشة أصبحت نادرة مثل منتديات أحلى منتدى  علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 4078314248
الردود الجاهزة مفيدة جدًا للمشرفين .
شكرًا لمجهودك الدائم 
علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع 866468155

descriptionعلبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع Emptyرد: علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

more_horiz
الله يسلمك اختي  @Rose
سعيد  انه عجبك ^^
 KonuEtiketleri عنوان الموضوع
علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع
 Konu BBCode BBCode
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
remove_circleمواضيع مماثلة