Framework7 - Bilah Pesan

Deskripsi

Framework7 menyediakan toolbar khusus yang dapat diubah ukurannya untuk bekerja dengan sistem pesan dalam aplikasi.

Kode berikut menunjukkan tata letak bilah pesan -

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

Di bilah pesan, bagian dalam "halaman" sangat penting dan berada di sebelah kanan "konten-pesan" -

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

Anda dapat menggunakan metode berikut untuk menginisialisasi bilah pesan dengan JavaScript -

myApp.messagesbar(messagesbarContainer, parameters)

Metode ini memiliki dua opsi -

• messagesbarContainer - Ini adalah elemen atau string HTML wajib yang menyertakan elemen HTML wadah pesan.

• parameters - Ini menentukan objek dengan parameter bilah pesan.

Misalnya -

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

Parameter Bilah Pesan

maxHeight- Ini digunakan untuk mengatur tinggi maksimum textarea dan akan diubah ukurannya tergantung pada jumlah teksnya. Jenis parameternya adalah angka dan nilai defaultnya adalah null .

Properti Messagebar

Tabel berikut menunjukkan properti bilah pesan -

S.No	Properti & Deskripsi
1	myMessagebar.params Anda dapat menentukan objek dengan parameter inisialisasi yang diteruskan.
2	myMessagebar.container Anda dapat menentukan elemen dom7 dengan elemen HTML penampung pesan.
3	myMessagebar.textarea Anda dapat menentukan elemen dom7 dengan elemen HTML textarea bilah pesan.

Metode Messagebar

Tabel berikut menunjukkan metode bilah pesan -

S.No	Metode & Deskripsi
1	myMessagebar.value(newValue); Ini menetapkan nilai / teks textarea pesan dan mengembalikan nilai textarea pesan, jika newValue tidak ditentukan.
2	myMessagebar.clear(); Ini membersihkan textarea dan memperbarui / mengatur ulang ukurannya.
3	myMessagebar.destroy(); Ini menghancurkan contoh bilah pesan.

Inisialisasi Messagebar dengan HTML

Anda dapat menginisialisasi bilah pesan menggunakan HTML tanpa metode dan properti JavaScript dengan menambahkan kelas messagebar-init ke .messagebar dan Anda dapat meneruskan parameter yang diperlukan menggunakan atribut data- .

Kode berikut menentukan inisialisasi bilah pesan dengan HTML -

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

Akses ke Instance Messagebar

Dimungkinkan untuk mengakses contoh bilah pesan, jika Anda menginisialisasinya dengan menggunakan HTML; ini dicapai dengan menggunakan properti bilah pesan f7 dari elemen penampungnya.

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

Anda dapat melihat contoh Bilah Pesan, yang dijelaskan di tautan ini