Framework7 - pasek komunikatów

Opis

Framework7 zapewnia specjalny pasek narzędzi z możliwością zmiany rozmiaru do pracy z systemem przesyłania wiadomości w aplikacji.

Poniższy kod przedstawia układ paska komunikatów -

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

Na pasku komunikatów wnętrze „strony” jest bardzo ważne i znajduje się na prawo od „treści wiadomości” -

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

Możesz użyć następującej metody inicjalizacji paska komunikatów za pomocą JavaScript -

myApp.messagesbar(messagesbarContainer, parameters)

Metoda ma dwie opcje -

  • messagesbarContainer - Jest to wymagany element HTML lub ciąg znaków zawierający element HTML kontenera paska wiadomości.

  • parameters - Określa obiekt z parametrami paska komunikatów.

Na przykład -

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

Parametr paska komunikatów

maxHeight- Służy do ustawiania maksymalnej wysokości obszaru tekstu i będzie zmieniany w zależności od ilości tekstu. Typ parametru to liczba, a wartość domyślna to null .

Właściwości paska komunikatów

W poniższej tabeli przedstawiono właściwości paska komunikatów -

S.Nr Właściwości i opis
1

myMessagebar.params

Możesz określić obiekt z przekazanymi parametrami inicjalizacyjnymi.

2

myMessagebar.container

Możesz określić element dom7 z elementem HTML kontenera paska wiadomości.

3

myMessagebar.textarea

Możesz określić element dom7 z elementem HTML messagebar textarea.

Metody paska komunikatów

W poniższej tabeli przedstawiono metody paska komunikatów -

S.Nr Metody i opis
1

myMessagebar.value(newValue);

Ustawia wartość / tekst paska wiadomości i zwraca wartość textarea paska wiadomości, jeśli newValue nie jest określony.

2

myMessagebar.clear();

Czyści obszar tekstu i aktualizuje / resetuje rozmiar.

3

myMessagebar.destroy();

Niszczy instancję paska komunikatów.

Zainicjuj pasek wiadomości za pomocą HTML

Możesz zainicjować pasek komunikatów przy użyciu HTML bez metod i właściwości JavaScript, dodając klasę messagebar -init do .messagebar i przekazując wymagane parametry za pomocą atrybutów data- .

Poniższy kod określa inicjalizację paska komunikatów za pomocą 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>

Dostęp do instancji paska komunikatów

Dostęp do instancji paska komunikatów jest możliwy, jeśli zainicjujesz go za pomocą HTML; osiąga się to poprzez użycie właściwości paska komunikatów f7 elementu kontenera.

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

Możesz zobaczyć przykład paska komunikatów, który jest wyjaśniony w tym linku