Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea

Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea

Emoji adalah suatu gambar animasi yang digunakan didalam chat. Dan pada kesempatan kali ini saya aka membahas tentang Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea. Plugin Emojionearea adalah plugin jquery emoji yang bisa kita gunakan secara gratis. Untuk mendapatkan file plugin emojioneareanya, teman-teman bisa kunjungi link ini disini.

Lalu teman-teman download filenya. Dan teman-teman bisa baca juga cara menggunakannya, karena di webbsitenya sudah ada penjelasan cara penggunaannya. Jika sudah selesai download, langkah selanjutnya saya akan membuat struktur html dengan bantuan bootstrap yang di dalamnya ada textarea untuk input pesan. Dan berikut ini scriptnya.

 

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="../dist/emojionearea.min.css" media="screen">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <script type="text/javascript" src="../dist/emojionearea.js"></script>

  <title>Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea</title>

</head>

<body>

  <div class="container">

    <div class="row p-5 mt-5">

      <div class="col-12 p-5" style="margin-top:200px">

        <textarea class="form-control" id="example1"></textarea>

        <h1 class="text-center">Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea</h1>

      </div>

    </div>

  </div>

</body>

</html>

Teman-teman harus perhatikan untuk linknya, pastikan file emojionearea.min.css, jquery.min.js dan emojionearea.js sudah terkoneksi dengan baik. Jika sudah maka kita tinggal memasukan event pada emojinya.

<script type="text/javascript">

    $(document).ready(function() {

      $("#example1").emojioneArea({

        autoHideFilters: true

      });

    });

</script>

Dan jika dibuka dibrowser masing-masing maka akan tampil seperti gambar berikut ini.

Pilihan emoji akan muncul ketika kita melakukan klik pada icon yang berada di pojok kanan atas textarea. Untuk tag html yang bisa digunakan untuk menampung isi pesan tidak hanya textarea saja, tapi bisa berupa input atau div.

Demikian artikel tentang Cara Membuat Emoji Chat Menggunakan Plugin Emojionearea. Semoga dapat bermanfaat dan selamat mencoba.

21 Maret 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat