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