Framework7 - Mesaj Çubuğu

Açıklama

Framework7, uygulamadaki mesajlaşma sistemiyle çalışmak için özel yeniden boyutlandırılabilir araç çubuğu sağlar.

Aşağıdaki kod, mesaj çubuğu düzenini gösterir -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>

Mesaj çubuğunda, "sayfanın" içi çok önemlidir ve "mesaj içeriği" nin sağındadır -

<div class = "page toolbar-fixed">
   <!-- messagebar -->
   <div class = "toolbar messagebar">
      <div class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "link">Send</a>
      </div>
   </div>
   
   <!-- messages-content -->
   <div class = "page-content messages-content">
      <div class = "messages">
         ... messages
      </div>
   </div>
</div>

Mesaj çubuğunu JavaScript ile başlatmak için aşağıdaki yöntemi kullanabilirsiniz -

myApp.messagesbar(messagesbarContainer, parameters)

Yöntemin iki seçeneği vardır -

• messagesbarContainer - Mesaj çubuğu kapsayıcı HTML öğesini içeren gerekli bir HTML öğesi veya dizesidir.

• parameters - Mesaj çubuğu parametrelerine sahip bir nesneyi belirtir.

Örneğin -

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Messagebar Parametresi

maxHeight- Metin alanının maksimum yüksekliğini ayarlamak için kullanılır ve metin miktarına bağlı olarak yeniden boyutlandırılır. Parametre türü sayıdır ve varsayılan değer boştur .

Mesaj Çubuğu Özellikleri

Aşağıdaki tablo mesaj çubuğu özelliklerini gösterir -

S.No	Özellikler ve Açıklama
1	myMessagebar.params Nesneyi, geçirilen başlatma parametreleri ile belirtebilirsiniz.
2	myMessagebar.container Dom7 öğesini mesaj çubuğu kapsayıcı HTML öğesi ile belirtebilirsiniz.
3	myMessagebar.textarea Mesaj çubuğu metin alanı HTML öğesi ile dom7 öğesini belirtebilirsiniz.

Mesaj çubuğu Yöntemleri

Aşağıdaki tablo mesaj çubuğu yöntemlerini gösterir -

S.No	Yöntemler ve Açıklama
1	myMessagebar.value(newValue); Mesaj çubuğu metin alanı değerini / metnini ayarlar ve mesaj çubuğu metin alanı değerini döndürür, eğer newValue belirtilmedi.
2	myMessagebar.clear(); Metin alanını temizler ve boyutu günceller / sıfırlar.
3	myMessagebar.destroy(); Messagebar örneğini yok eder.

Mesaj çubuğunu HTML ile başlat

Messagebar -init sınıfını .messagebar'a ekleyerek, JavaScript yöntemlerini ve özelliklerini kullanmadan HTML kullanarak mesaj çubuğunu başlatabilir ve gerekli parametreleri data- niteliklerini kullanarak iletebilirsiniz .

Aşağıdaki kod, mesaj çubuğunun HTML ile başlatılmasını belirtir -

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>

Messagebar Örneğine Erişim

HTML kullanarak başlatırsanız, mesaj çubuğu örneğine erişmek mümkündür; kapsayıcı öğesinin f7 İleti çubuğu özelliği kullanılarak elde edilir .

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

Bu bağlantıda açıklanan Messagebar örneğini görebilirsiniz.