ساخت ایموجی پیکر جذاب برای وبسایت با html و JQuery

همه ما دوست داریم تا با دادن ظاهری جذاب و قابلیت های متنوع به وبسایت خود توجه کاربران را جلب کنیم. یکی از جذابیت های سایت ما میتواند با استفاده از ایموجی های متنوع در بخش کامنت و نظرات سایت شکل بگیرد . امروزه در مکالمات انسان‌ها کلمات تنها پاسخگوی تمامی نیازها نیستند؛ خوشبختانه از سال ۱۹۹۹ شاهد حضور ایموجی ها یا همان شکلک ها در میان ابزار های گفتگو و در میان کاراکتر های کاربران هستیم که کمک شایانی به انتقال احساسات میکنند.از سال ۲۰۱۲ بود که کاربران آیفون هم در بروزرسانی iOS 6 توانستند از اموجی ها در کیبوردشان استفاده کنند. این اتفاق شروع یک انقلاب در نوع ارتباطات بین افراد و همچنین انتقال احساسات بوده و هست
🔶در این مطلب قصد دارم به شما کمک کنم که به سادگی با استفاده از html و JQuery ایموجی پیکر دلخواه خود را برای وبسایتتان ایجاد کنید.

ابتدا سند html خود را با همان ساختار همیشگی ایجاد میکنیم و title دلخواه خود را به صفحه میدهیم.
```
<html>
<head>
<title>my website</title>

</head>
<body>

</body>
</html>
```
حال برای دانلود پک ایموجی موردنظر میتوانید از این لینک استفاده کنید.پس از دانلود فایل فشرده و خارج کردن آن از حالت zip ما باید از پوشه dist دو فایل emojionearea.min.css و emojionearea.min.js را کپی کرده و در دایرکتوری پروژه خود قرار دهیم

اکنون میتوانیم با ایجاد تگ های link و script در قسمت head، سند html را با فایل های css و js دانلود شده مرتبط کنیم.

<html>
<head>
<title>my website</title>
<link rel="stylesheet" href="https://roocket.ir/./emojionearea.min.css">

<script src="./emojionearea.min.js"></script>
</head>
<body>

</body>
</html>

برای استفاده از ایموجی های خود یک تگ text area در قسمت body ایجاد میکنیم و به آن id دلخواه و استایل
;display: none را میدهیم

<html>
<head>
    <title>my website</title>
    <link rel="stylesheet" href="https://roocket.ir/./emojionearea.min.css">

    <script src="./emojionearea.min.js"></script>
</head>
<body>
    <textarea id="myTextarea" style="display: none;"></textarea>
</body>
</html>

حال نوبت به CDN جی کوئری میرسد که میتوانید آن را از سایت JQuery دریافت کنید و در قسمت head وبسایت پیست کنید.برای راحتی کار میتوانید از کدی که قرار دادم استفاده کنید
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
```

حال اگر صفحه را رفرش کنید میتوانید ببینید که ایموجی ها اضافه شدند اما مشکلی که وجود دارد این است که کنتینر ایموجی ها به سمت بالا بازمیشود و قابل مشاهده نیست برای حل این مشکل میتوانید از کد جاوا اسکریپت زیر در قسمت body استفاده کنید.

<script>
        $(document).ready(function() {
            $("#myTextarea").emojioneArea({
                pickerPosition:"bottom"
            });
        })
    </script>

کار ما تمام است و کد نهایی ما به شکل زیر در می آید:

<html>
<head>
    <title>my website</title>
    <link rel="stylesheet" href="https://roocket.ir/./emojionearea.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./emojionearea.min.js"></script>
</head>
<body>
    <textarea id="myTextarea" style="display: none;"></textarea>
    <script>
        $(document).ready(function() {
            $("#myTextarea").emojioneArea({
                pickerPosition:"bottom"
            });
        })
    </script>
</body>
</html>

🔶و نتیجه نهایی به شکل زیر است
توضیح تصویر رو وارد کنید

امیدوارم از این مطلب لذت برده باشید و مورد استفادتون قرار گرفته باشه❤️
📌منبع:https://www.youtube.com/watch?v=3JrBdurwlXo

ساخت ایموجی پیکر جذاب برای وبسایت با html و JQuery

در حال یادگیری :)