Framework7 - Pesan

Deskripsi

Pesan merupakan komponen dari Framework7, yang memberikan visualisasi komentar dan sistem pesan dalam aplikasi.

Tata Letak Pesan

Framework7 memiliki struktur tata letak pesan berikut -

<div class = "page">
<div class = "page-content messages-content">
   <div class = "messages">
      <!-- Defines the date stamp -->
      <div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
      
      <!-- Displays the sent message and by default, it will be in green color on right side -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">Hello</div>
      </div>
      
      <!-- Displays the another sent message -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">How are you?</div>
      </div>
      
      <!-- Displays the received message and by default, it will be in grey color on left side -->
      <div class = "message message-with-avatar message-received">
         <!-- Provides sender name -->
         <div class = "message-name">Smith</div>
         <!--  Define the text with bubble type -->
         <div class = "message-text">I am fine, thanks</div>
         <!-- Defines the another date stamp -->
         <div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
      </div>
      
   </div>
</div>

Tata letak berisi kelas-kelas berikut di berbagai area -

Tata Letak Halaman Pesan

Tabel berikut menunjukkan kelas tata letak halaman pesan dengan deskripsi.

S.No Kelas & Deskripsi
1

messages-content

Ini adalah kelas tambahan wajib yang ditambahkan ke "konten halaman" dan digunakan untuk pembungkus pesan.
2

messages

Ini adalah elemen yang diperlukan untuk gelembung pesan.
3

messages-date

Ini menggunakan wadah cap tanggal untuk menampilkan tanggal dan waktu pesan dikirim atau diterima.
4

message

Ini adalah satu pesan yang akan ditampilkan.

Bagian Dalam Pesan Tunggal

Tabel berikut menunjukkan kelas bagian dalam pesan sederhana dengan deskripsi.

S.No Kelas & Deskripsi
1

message-name

Ini memberikan nama pengirim.
2

message-text

Tentukan teks dengan tipe gelembung.
3

message-avatar

Ini menentukan avatar pengirim.
4

message-label

Ini menentukan label teks di bawah gelembung.

Kelas tambahan untuk Single Message Container

Tabel berikut menunjukkan kelas tambahan untuk deskripsi wadah pesan tunggal.

S.No Kelas & Deskripsi
1

message-sent

Ini menentukan bahwa pesan dikirim oleh pengguna dan ditampilkan dengan warna latar belakang hijau di sisi kanan.
2

message-received

Ini digunakan untuk menampilkan pesan tunggal yang menunjukkan bahwa, pesan telah diterima oleh pengguna dan tetap berada di sisi kiri dengan warna latar abu-abu.
3

message-pic

Ini adalah kelas tambahan untuk menampilkan gambar dengan satu pesan.
4

message-with-avatar

Ini adalah kelas tambahan untuk menampilkan satu pesan (diterima atau dikirim) dengan avatar.
5

message-with-tail

Anda dapat menambahkan bubble tail untuk satu pesan (diterima atau dikirim).

Kelas Tambahan yang Tersedia untuk Pesan Tunggal

Tabel berikut menunjukkan kelas yang tersedia untuk satu pesan dengan deskripsi.

S.No Kelas & Deskripsi
1

message-hide-name

Ini adalah kelas tambahan untuk menyembunyikan nama pesan untuk satu pesan (diterima atau dikirim).
2

message-hide-avatar

Ini adalah kelas tambahan untuk menyembunyikan avatar pesan untuk satu pesan (diterima atau dikirim).
3

message-hide-label

Ini adalah kelas tambahan untuk menyembunyikan label pesan untuk satu pesan (diterima atau dikirim).
4

message-last

Anda dapat menggunakan kelas ini untuk menunjukkan pesan terakhir yang diterima atau dikirim dalam percakapan saat ini oleh satu pengirim untuk satu pesan (diterima atau dikirim).
5

message-first

Anda dapat menggunakan kelas ini untuk menunjukkan pesan yang pertama diterima atau yang pertama dikirim dalam percakapan saat ini oleh satu pengirim untuk satu pesan (diterima atau dikirim).

Menginisialisasi Pesan dengan JavaScript

Anda dapat menginisialisasi pesan dengan JavaScript dengan menggunakan metode berikut -

myApp.messages(messagesContainer, parameters)

Metode ini membutuhkan dua opsi -

  • messagesContainer - Ini adalah elemen atau string HTML wajib yang menyertakan elemen HTML penampung pesan.

  • parameters - Ini menentukan objek dengan parameter pesan.

Parameter Pesan

Tabel berikut menunjukkan parameter pesan dengan deskripsi.

S.No Parameter & Deskripsi Tipe Default
1

autoLayout

Itu menambahkan kelas tambahan yang diperlukan untuk setiap pesan dengan mengaktifkannya.

 boolean benar
2

newMessagesFirst

Anda dapat menampilkan pesan di atas daripada menampilkan di bawah dengan mengaktifkannya.

 boolean Salah
3

messages

Ini menampilkan array pesan di mana setiap pesan harus direpresentasikan sebagai objek dengan parameter pesan.

 Himpunan -
4

messageTemplate

Ini menampilkan template pesan tunggal.

 tali -

Properti Pesan

Tabel berikut menunjukkan properti pesan dengan deskripsi.

S.No Deskripsi properti
1

myMessages.params

Anda dapat menginisialisasi parameter yang diteruskan dengan objek.
2

myMessages.container

Mendefinisikan elemen DOM7 dengan wadah HTML bilah pesan.

Metode Pesan

Tabel berikut menunjukkan metode pesan dengan deskripsi.

S.No Metode & Deskripsi
1

myMessages.addMessage(messageParameters, method, animate);

Pesan dapat ditambahkan ke awal atau akhir dengan menggunakan parameter metode.

Ini memiliki parameter berikut -

  • messageParameters - Ini memberikan parameter pesan untuk ditambahkan.

  • method - Ini adalah tipe string yang menambahkan pesan ke awal atau akhir penampung pesan.

  • animate- Ini adalah tipe boolean, yang menambahkan pesan tanpa transisi atau animasi scrolling dengan menyetelnya ke false. Secara default, ini akan menjadi true.
2

myMessages.appendMessage(messageParameters, animate);

Ini menambahkan pesan ke akhir wadah pesan.
3

myMessages.prependMessage(messageParameters, animate);

Ini menambahkan pesan ke awal wadah pesan.
4

myMessages.addMessages(messages, method, animate);

Anda dapat menambahkan beberapa pesan sekaligus.

Ini memiliki parameter berikut -

  • messages - Ini menyediakan array pesan untuk ditambahkan, yang harus direpresentasikan sebagai objek dengan parameter pesan.
5

myMessages.removeMessage(message);

Ini digunakan untuk menghapus pesan.

Ini memiliki parameter berikut -

  • message - Ini adalah elemen atau string HTML yang diperlukan yang menghapus elemen pesan.
6

myMessages.removeMessages(messages);

Anda dapat menghapus beberapa pesan.

Ini memiliki parameter berikut -

  • messages - Ini adalah larik yang diperlukan dengan elemen HTML atau string yang menghapus pesan.
7

myMessages.scrollMessages();

Anda dapat menggulir pesan dari atas ke bawah dan sebaliknya tergantung pada parameter pertama dari pesan baru.
8

myMessages.layout();

Tata letak otomatis dapat diterapkan ke pesan.
9

myMessages.clean();

Ini digunakan untuk membersihkan pesan.
10

myMessages.destroy();

Ini digunakan untuk menghancurkan pesan.

Parameter Pesan Tunggal

Tabel berikut menunjukkan parameter untuk satu pesan dengan deskripsi.

S.No Parameter & Deskripsi Tipe Default
1

text

Ini mendefinisikan teks pesan, yang bisa menjadi string HTML.

 tali -
2

name

Ini menentukan nama pengirim.

 tali -
3

avatar

Ini menentukan string URL avatar pengirim.

 tali -
4

time

Ini menentukan string waktu dari pesan seperti '9:45 AM', '18: 35 '.

 tali -
5

type

Ini memberikan jenis pesan apakah itu bisa dikirim atau diterima pesan.

 tali terkirim
6

label

Ini mendefinisikan label pesan.

 tali -
7

day

Ini memberikan string hari dari pesan seperti 'minggu', 'senin', 'kemarin' dll.

 tali -

Menginisialisasi Pesan dengan HTML

Anda dapat menginisialisasi pesan dengan HTML tanpa JavaScript dengan menggunakan kelas messages-init tambahan ke pesan dan menggunakan atribut data- untuk meneruskan parameter yang diperlukan seperti yang ditunjukkan dalam cuplikan kode yang diberikan di bawah ini -

...
   <div class = "page-content messages-content">
      <!-- Initialize the messages using additional "messages-init" class-->
      <div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
         ...

      </div>
   </div>
...

Contoh

Contoh berikut menunjukkan penggunaan pesan di Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Messages</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Messages</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar messagebar">
                     <div class = "toolbar-inner">
                        <textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
                     </div>
                  </div>
                  
                  <div class = "page-content messages-content">
                     <div class = "messages">
                        <div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Hello</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text">Happy Birthday</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Thank you</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                        
                        <div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Good Morning...</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
                           <div class = "message-label">Delivered</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Very Good Morning...</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // It indicates conversation flag
         var conversationStarted = false;

         // Here initiliaze the messages
         var myMessages = myApp.messages('.messages', {
            autoLayout:true
         });

         // Initiliaze the messagebar
         var myMessagebar = myApp.messagebar('.messagebar');

         // Displays the text after clicking the button
         $$('.messagebar .link').on('click', function () {
         
            // specifies the message text
            var messageText = myMessagebar.value().trim();
            
            // If there is no message, then exit from there
            if (messageText.length === 0) return;

            // Specifies the empty messagebar
            myMessagebar.clear()

            // Defines the random message type
            var messageType = (['sent', 'received'])[Math.round(Math.random())];

            // Provides the avatar and name for the received message
            var avatar, name;
            
            if(messageType === 'received') {
               name = 'Smith';
            }
            
            // It adds the message
            myMessages.addMessage ({
            
               // It provides the message text
               text: messageText,
            
               // It displays the random message type
               type: messageType,
            
               // Specifies the avatar and name of the sender
               avatar: avatar,
               name: name,
            
               // Displays the day, date and time of the message
               day: !conversationStarted ? 'Today' : false,
               time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // Here you can update the conversation flag
            conversationStarted = true;
         });

      </script>
   </body>

</html>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode HTML yang diberikan di atas sebagai messages.html file di folder root server Anda.

  • Buka file HTML ini sebagai http: //localhost/messages.html dan hasilnya ditampilkan seperti di bawah ini.

  • Saat Anda mengetik pesan ke dalam kotak pesan dan mengklik tombol Kirim, ini menentukan bahwa pesan Anda telah terkirim dan ditampilkan dengan warna latar belakang hijau di sisi kanan.

  • Pesan yang Anda terima, muncul di sisi kiri dengan latar belakang abu-abu bersama dengan nama pengirim.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved