Framework7 - Mesajlar

Açıklama

Mesajlar, uygulamadaki yorumların ve mesajlaşma sisteminin görselleştirilmesini sağlayan Framework7 bileşenidir.

Mesaj Düzeni

Framework7 aşağıdaki mesaj düzeni yapısına sahiptir -

<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>

Düzen, farklı alanlarda aşağıdaki sınıfları içerir -

Mesajlar Sayfa Düzeni

Aşağıdaki tablo, açıklamalarla birlikte mesaj sayfa düzeninin sınıflarını gösterir.

S.No	Sınıflar ve Açıklama
1	messages-content "Sayfa içeriği" ne eklenen ve mesaj sarmalayıcı için kullanılan gerekli bir ek sınıftır.
2	messages Mesaj balonları için gerekli bir unsurdur.
3	messages-date Gönderilen veya alınan mesajın tarihini ve saatini görüntülemek için tarih damgası konteynerini kullanır.
4	message Görüntülenecek tek bir mesajdır.

Tek Mesaj İç Parçalar

Aşağıdaki tablo, açıklamayla birlikte basit mesaj iç bölümlerinin sınıflarını gösterir.

S.No	Sınıflar ve Açıklama
1	message-name Gönderenin adını sağlar.
2	message-text Metni kabarcık türü ile tanımlayın.
3	message-avatar Gönderen avatarını belirtir.
4	message-label Kabarcığın altındaki metin etiketini belirtir.

Tek Mesaj Konteyneri için ek sınıflar

Aşağıdaki tablo, tek mesaj kapsayıcı açıklaması için ek sınıfları gösterir.

S.No	Sınıflar ve Açıklama
1	message-sent Mesajın kullanıcı tarafından gönderildiğini belirtir ve sağ tarafta yeşil arka plan rengiyle görüntülenir.
2	message-received Mesajın kullanıcı tarafından alındığını ve gri arka plan rengi ile sol tarafta kaldığını gösteren tek mesajın görüntülenmesi için kullanılır.
3	message-pic Tek bir mesajla görüntüyü görüntülemek için ek bir sınıftır.
4	message-with-avatar Avatar ile tek bir mesajı (alınan veya gönderilen) görüntülemek için ek bir sınıftır.
5	message-with-tail Tek bir mesaj için (alınan veya gönderilen) bir balon kuyruğu ekleyebilirsiniz.

Tek Mesaj İçin Kullanılabilir Ek Sınıflar

Aşağıdaki tablo, açıklamayla birlikte tek bir mesaj için mevcut sınıfları gösterir.

S.No	Sınıflar ve Açıklama
1	message-hide-name Tek bir mesajın (alınan veya gönderilen) mesaj adını gizlemek için ek bir sınıftır.
2	message-hide-avatar Tek bir mesaj için (alınan veya gönderilen) mesaj avatarını gizlemek için ek bir sınıftır.
3	message-hide-label Tek bir mesajın (alınan veya gönderilen) mesaj etiketini gizlemek için ek bir sınıftır.
4	message-last Bu sınıfı, tek bir mesaj için (alınan veya gönderilen) bir gönderen tarafından mevcut görüşmede son alınan veya gönderilen mesajı belirtmek için kullanabilirsiniz.
5	message-first Bu sınıfı, mevcut görüşmede bir gönderen tarafından tek bir mesaj için (alınan veya gönderilen) ilk alınan veya ilk gönderilen mesajı belirtmek için kullanabilirsiniz.

JavaScript ile Mesajları Başlatma

Aşağıdaki yöntemi kullanarak mesajları JavaScript ile başlatabilirsiniz -

myApp.messages(messagesContainer, parameters)

Yöntem iki seçenek alır -

messagesContainer - Mesaj kapsayıcı HTML öğesini içeren gerekli bir HTML öğesi veya dizesidir.
parameters - Mesaj parametreleri olan bir nesneyi belirtir.

Mesaj Parametreleri

Aşağıdaki tablo, açıklamalı mesajların parametrelerini gösterir.

S.No	Parametre ve Açıklama	Tür	Varsayılan
1	autoLayout Etkinleştirerek her mesaja ek gerekli sınıfları ekler.	Boole	doğru
2	newMessagesFirst Etkinleştirerek mesajı altta görüntülemek yerine üstte görüntüleyebilirsiniz.	Boole	yanlış
3	messages Her mesajın mesaj parametreleri ile nesne olarak temsil edilmesi gereken bir mesaj dizisi görüntüler.	dizi	-
4	messageTemplate Tek mesaj şablonunu görüntüler.	dizi	-

Mesaj Özellikleri

Aşağıdaki tablo, açıklamalı mesajların özelliklerini gösterir.

S.No	Özellik ve Açıklama
1	myMessages.params Nesne ile aktarılan parametreleri başlatabilirsiniz.
2	myMessages.container DOM7 öğesini bir mesaj çubuğu HTML kabıyla tanımlar.

Mesaj Yöntemleri

Aşağıdaki tablo, açıklamalı mesaj yöntemlerini gösterir.

Aşağıda, açıklamalı mesaj yöntemlerinin listesi verilmiştir.

S.No	Yöntem ve Açıklama
1	myMessages.addMessage(messageParameters, method, animate); Metot parametresi kullanılarak mesaj başa veya sona eklenebilir. Aşağıdaki parametrelere sahiptir - messageParameters - Eklenecek mesaj parametreleri sağlar. method - Mesaj konteynerinin başına veya sonuna mesaj ekleyen bir dize türüdür. animate- Herhangi bir geçiş veya kaydırma animasyonu olmadan yanlış olarak ayarlayarak bir mesaj ekleyen bir boole türüdür. Varsayılan olarak doğru olacaktır.
2	myMessages.appendMessage(messageParameters, animate); Mesaj kabının sonuna bir mesaj ekler.
3	myMessages.prependMessage(messageParameters, animate); Mesaj kabının başlangıcına bir mesaj ekler.
4	myMessages.addMessages(messages, method, animate); Aynı anda birden fazla mesaj ekleyebilirsiniz. Aşağıdaki parametreye sahiptir - messages - Mesaj parametreleri ile nesne olarak temsil edilmesi gereken, eklenecek bir mesaj dizisi sağlar.
5	myMessages.removeMessage(message); Mesajı kaldırmak için kullanılır. Aşağıdaki parametreye sahiptir - message - Mesaj öğesini kaldıran gerekli bir HTML öğesi veya dizesidir.
6	myMessages.removeMessages(messages); Birden çok mesajı kaldırabilirsiniz. Aşağıdaki parametreye sahiptir - messages - Mesajları kaldıran HTML öğeleri veya dizesi olan gerekli bir dizidir.
7	myMessages.scrollMessages(); Yeni mesajın ilk parametresine bağlı olarak mesajları yukarıdan aşağıya veya tersi yönde kaydırabilirsiniz.
8	myMessages.layout(); Mesajlara otomatik düzen uygulanabilir.
9	myMessages.clean(); Mesajları temizlemek için kullanılır.
10	myMessages.destroy(); Mesajları yok etmek için kullanılır.

Tek Mesaj Parametreleri

Aşağıdaki tablo, açıklamalı tek bir mesaj için parametreleri göstermektedir.

S.No	Parametre ve Açıklama	Tür	Varsayılan
1	text Bir HTML dizesi olabilecek mesaj metnini tanımlar.	dizi	-
2	name Gönderenin adını belirtir.	dizi	-
3	avatar Gönderen avatar URL dizesini belirtir.	dizi	-
4	time '9:45 AM', '18: 35 'gibi mesajın zaman dizesini belirtir.	dizi	-
5	type Mesajın gönderilip gönderilemeyeceğini bildirir.	dizi	gönderildi
6	label Mesajın etiketini tanımlar.	dizi	-
7	day 'Pazar', 'pazartesi', 'dün' vb. Gibi mesajın gün dizisini verir.	dizi	-

Mesajları HTML ile Başlatma

Ek kullanarak JavaScript olmadan HTML iletileri başlatabilir mesajları-init için sınıfını mesajlar ve kullanımı veriye aşağıda verilmiştir snippet'ine kodda gösterildiği gibi gerekli parametreleri geçmek özelliklerini -

...
   <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>
...

Misal

Aşağıdaki örnek, Framework7'de mesajların kullanımını gösterir -

<!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>

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen HTML kodunu farklı kaydedin messages.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/messages.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.
Mesaj kutusuna bir mesaj yazıp Gönder düğmesine tıkladığınızda, mesajınızın gönderildiğini belirtir ve sağ tarafta yeşil arka plan rengiyle görüntülenir.
Aldığınız mesaj, gönderenin adı ile birlikte gri arka planla sol tarafta görünür.