Framework7 - Messaggi
Descrizione
I messaggi sono componenti di Framework7, che fornisce la visualizzazione dei commenti e del sistema di messaggistica nell'applicazione.
Layout dei messaggi
Il framework7 ha la seguente struttura di layout dei messaggi:
<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>Il layout contiene le seguenti classi in diverse aree:
Layout della pagina dei messaggi
La tabella seguente mostra le classi di layout della pagina dei messaggi con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | messages-content È una classe aggiuntiva richiesta aggiunta a "page-content" e utilizzata per il wrapper dei messaggi. |
| 2 | messages È un elemento obbligatorio per le bolle di messaggi. |
| 3 | messages-date Utilizza il contenitore del timbro della data per visualizzare la data e l'ora del messaggio inviato o ricevuto. |
| 4 | message È un unico messaggio da visualizzare. |
Parti interne a messaggio singolo
La tabella seguente mostra le classi delle parti interne del messaggio semplice con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-name Fornisce il nome del mittente. |
| 2 | message-text Definisci il testo con il tipo di bolla. |
| 3 | message-avatar Specifica l'avatar del mittente. |
| 4 | message-label Specifica l'etichetta di testo sotto la bolla. |
Classi aggiuntive per Single Message Container
La tabella seguente mostra classi aggiuntive per la descrizione del contenitore di messaggi singoli.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-sent Specifica che il messaggio è stato inviato dall'utente e viene visualizzato con il colore di sfondo verde sul lato destro. |
| 2 | message-received Serve per visualizzare il singolo messaggio indicante che il messaggio è stato ricevuto dall'utente e rimane sul lato sinistro con colore di sfondo grigio. |
| 3 | message-pic È una classe aggiuntiva per la visualizzazione di immagini con un singolo messaggio. |
| 4 | message-with-avatar È una classe aggiuntiva per la visualizzazione di un singolo messaggio (ricevuto o inviato) con avatar. |
| 5 | message-with-tail È possibile aggiungere una coda di bolla per un singolo messaggio (ricevuto o inviato). |
Classi disponibili aggiuntive per messaggio singolo
La tabella seguente mostra le classi disponibili per un singolo messaggio con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-hide-name È una classe aggiuntiva per nascondere il nome del messaggio per un singolo messaggio (ricevuto o inviato). |
| 2 | message-hide-avatar È una classe aggiuntiva per nascondere l'avatar del messaggio per un singolo messaggio (ricevuto o inviato). |
| 3 | message-hide-label È una classe aggiuntiva per nascondere l'etichetta del messaggio per un singolo messaggio (ricevuto o inviato). |
| 4 | message-last È possibile utilizzare questa classe per indicare l'ultimo messaggio ricevuto o inviato nella conversazione corrente da un mittente per un singolo messaggio (ricevuto o inviato). |
| 5 | message-first È possibile utilizzare questa classe per indicare il primo messaggio ricevuto o il primo inviato nella conversazione corrente da un mittente per un singolo messaggio (ricevuto o inviato). |
Inizializzazione dei messaggi con JavaScript
È possibile inizializzare i messaggi con JavaScript utilizzando il seguente metodo:
myApp.messages(messagesContainer, parameters)Il metodo richiede due opzioni:
messagesContainer - È un elemento o una stringa HTML obbligatorio che include l'elemento HTML del contenitore dei messaggi.
parameters - Specifica un oggetto con i parametri dei messaggi.
Parametri dei messaggi
La tabella seguente mostra i parametri dei messaggi con descrizione.
| S.No | Parametro e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | autoLayout Aggiunge ulteriori classi richieste a ciascun messaggio abilitandolo. |
booleano | vero |
| 2 | newMessagesFirst È possibile visualizzare il messaggio in alto invece di visualizzarlo in basso abilitandolo. |
booleano | falso |
| 3 | messages Visualizza un array di messaggi in cui ogni messaggio deve essere rappresentato come oggetto con parametri di messaggio. |
Vettore | - |
| 4 | messageTemplate Visualizza il modello di messaggio singolo. |
corda | - |
Proprietà dei messaggi
La tabella seguente mostra le proprietà dei messaggi con descrizione.
| S.No | Proprietà e descrizione |
|---|---|
| 1 | myMessages.params È possibile inizializzare i parametri passati con object. |
| 2 | myMessages.container Definisce l'elemento DOM7 con un contenitore HTML della barra dei messaggi. |
Metodi di messaggi
La tabella seguente mostra i metodi dei messaggi con la descrizione.
| S.No | Metodo e descrizione |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Il messaggio può essere aggiunto all'inizio o alla fine utilizzando il parametro method. Ha i seguenti parametri:
|
| 2 | myMessages.appendMessage(messageParameters, animate); Aggiunge un messaggio alla fine del contenitore dei messaggi. |
| 3 | myMessages.prependMessage(messageParameters, animate); Aggiunge un messaggio all'inizio del contenitore dei messaggi. |
| 4 | myMessages.addMessages(messages, method, animate); Puoi aggiungere più messaggi contemporaneamente. Ha il seguente parametro:
|
| 5 | myMessages.removeMessage(message); Viene utilizzato per rimuovere il messaggio. Ha il seguente parametro:
|
| 6 | myMessages.removeMessages(messages); Puoi rimuovere più messaggi. Ha il seguente parametro:
|
| 7 | myMessages.scrollMessages(); È possibile scorrere i messaggi dall'alto verso il basso e viceversa a seconda del primo parametro del nuovo messaggio. |
| 8 | myMessages.layout(); Il layout automatico può essere applicato ai messaggi. |
| 9 | myMessages.clean(); Viene utilizzato per pulire i messaggi. |
| 10 | myMessages.destroy(); Viene utilizzato per distruggere i messaggi. |
Parametri messaggio singolo
La tabella seguente mostra i parametri per un singolo messaggio con descrizione.
| S.No | Parametro e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | text Definisce il testo del messaggio, che potrebbe essere una stringa HTML. |
corda | - |
| 2 | name Specifica il nome del mittente. |
corda | - |
| 3 | avatar Specifica la stringa dell'URL dell'avatar del mittente. |
corda | - |
| 4 | time Specifica la stringa dell'ora del messaggio come "9:45 AM", "18:35". |
corda | - |
| 5 | type Fornisce il tipo di messaggio se può essere inviato o ricevuto. |
corda | inviato |
| 6 | label Definisce l'etichetta del messaggio. |
corda | - |
| 7 | day Fornisce la stringa del giorno del messaggio come "domenica", "lunedì", "ieri" ecc. |
corda | - |
Inizializzazione dei messaggi con HTML
È possibile inizializzare i messaggi con HTML senza JavaScript utilizzando la classe di inizializzazione dei messaggi aggiuntiva per i messaggi e utilizzare gli attributi di dati per passare i parametri richiesti come mostrato nello snippet di codice riportato di seguito -
...
<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>
...Esempio
L'esempio seguente mostra l'uso dei messaggi nel Framework7:
<!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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come messages.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/messages.html e l'output viene visualizzato come mostrato di seguito.
Quando digiti un messaggio nella casella del messaggio e fai clic sul pulsante Invia, specifica che il messaggio è stato inviato e viene visualizzato con il colore di sfondo verde sul lato destro.
Il messaggio che ricevi, appare sul lato sinistro con lo sfondo grigio insieme al nome del mittente.