Framework7 - 資訊

說明

資訊是 Framework7 的元件，它可在應用程式中實現視覺化註釋和訊息傳遞系統。

資訊佈局

Framework7 具有以下資訊佈局結構 −

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

該佈局在不同的區域包含以下類 −

訊息頁面佈局

下表顯示了訊息頁面佈局的類以及說明。

序號	類和說明
1	messages-content 這是新增到“page-content”中的必需的附加類，用於訊息包裝器。
2	messages 這是訊息氣泡的必需元素。
3	messages-date 它使用日期戳容器顯示傳送或接收訊息的日期和時間。
4	message 它是要顯示的單個訊息。

單個訊息內部部分

下表顯示了簡單訊息內部部分的類以及說明。

序號	類和說明
1	message-name 它提供發件人姓名。
2	message-text 使用氣泡型別定義文字。
3	message-avatar 它指定發件人頭像。
4	message-label 它指定氣泡下方文字標籤。

單個訊息容器的附加類

下表顯示了單個訊息容器描述的附加類。

序號	類和說明
1	message-sent 它指定訊息是由使用者傳送的，並在右側以綠色背景顏色顯示。
2	message-received 用於顯示單個訊息，指示該訊息是使用者接收的，並保留在左側，背景顏色為灰色。
3	message-pic 它是顯示單個訊息影像的附加類。
4	message-with-avatar 它是顯示單個訊息（接收或傳送）和頭像的附加類。
5	message-with-tail 你可以在單條資訊（接收或傳送）中新增氣泡尾巴。

適用於單條資訊的附加可用類

下表顯示了適用於單條資訊且帶有說明的可用類。

序號	類和說明
1	message-hide-name 這是一種附加類，適用於隱藏單條資訊（接收或傳送）的訊息名稱。
2	message-hide-avatar 這是一種附加類，適用於隱藏單條資訊（接收或傳送）的訊息頭像。
3	message-hide-label 這是一種附加類，適用於隱藏單條資訊（接收或傳送）的訊息標籤。
4	message-last 你可以使用此類，指示傳送者在當前會話中收到的或傳送的最後一條資訊。
5	message-first 你可以使用此類，指示傳送者在當前會話中收到的或傳送的第一條資訊。

使用 JavaScript 初始化資訊

你可以使用 JavaScript 透過以下方法初始化資訊 −

myApp.messages(messagesContainer, parameters)

此方法包含兩個選項 −

messagesContainer − 它是一個必需的 HTML 元素或包含訊息容器 HTML 元素的字串。
parameters − 它指定具有訊息引數的物件。

訊息引數

下表顯示了具有說明的訊息引數。

序號	引數和說明	型別	預設
1	autoLayout 啟用 autoLayout 後，它將對每條資訊新增所需的附加類。	布林值	true
2	newMessagesFirst 啟用 newMessagesFirst 後，你可以在頂部顯示資訊，而不是在底部顯示資訊。	布林值	false
3	messages 它顯示一個由表示為具有訊息引數的物件的資訊組成的陣列。	陣列	-
4	messageTemplate 它顯示單條資訊模板。	字串	-

資訊屬性

下表顯示了具有說明的訊息屬性。

序號	屬性及說明
1	myMessages.params 你可以使用物件初始化傳遞的引數。
2	myMessages.container 定義帶有訊息欄 HTML 容器的 DOM7 元素。

序號

屬性及說明

myMessages.params

你可以使用物件初始化傳遞的引數。

myMessages.container

定義帶有訊息欄 HTML 容器的 DOM7 元素。

資訊方法

下表顯示了具有說明的訊息方法。

下面列出了具有說明的訊息方法。

序號	方法和說明
1	myMessages.addMessage(messageParameters, method, animate); 可以使用 method 引數將資訊新增到開頭或結尾。它具有以下引數 − messageParameters − 它提供要新增的訊息引數。 method − 它是一種字串型別，可以將資訊新增到訊息容器的開頭或結尾。 animate − 它是一種布林型別，透過將 animate 設定為 false 來新增一條沒有過渡或滾動動畫的資訊。預設情況下，animate 為 true。
2	myMessages.appendMessage(messageParameters, animate); 它將一條資訊新增到訊息容器的末尾。
3	myMessages.prependMessage(messageParameters, animate); 它將一條資訊新增到訊息容器的開頭。
4	myMessages.addMessages(messages, method, animate); 你可以一次新增多條資訊。它具有以下引數 − messages − 它提供要新增的資訊陣列，這些資訊應表示為具有訊息引數的物件。
5	myMessages.removeMessage(message); 它用於刪除資訊。它具有以下引數 − message − 它是一個必需的 HTML 元素或刪除訊息元素的字串。
6	myMessages.removeMessages(messages); 你可以刪除多條資訊。它具有以下引數 − 訊息 − 這是一個必需的陣列，它包含用於移除訊息的 HTML 元素或字串。
7	myMessages.scrollMessages(); 你可以根據新訊息的第一個引數從上到下或從下到上滾動訊息。
8	myMessages.layout(); 訊息可以應用自動佈局。
9	myMessages.clean(); 它用於清理訊息。
10	myMessages.destroy(); 它用於銷燬訊息。

單個訊息引數

下表顯示了帶描述的單個訊息的引數。

序號	引數和說明	型別	預設
1	text 它定義訊息文字，它可以是 HTML 字串。	字串	-
2	name 它指定發件人名稱。	字串	-
3	avatar 它指定發件人頭像的 URL 字串。	字串	-
4	time 它指定訊息的時間字串，如“9:45 AM”、“18:35”。	字串	-
5	type 它提供訊息的型別，它可以是已傳送或已接收的訊息。	字串	sent
6	label 它定義訊息的標籤。	字串	-
7	day 它提供訊息的日期字串，如“星期日”、“星期一”、“昨天”等。	字串	-

使用 HTML 初始化訊息

你可以使用附加的 messages-init 類將 messages 放在 HTML 中，並且使用 data- 屬性來傳遞所需引數，如下面給出的程式碼片段中所示，而無需 JavaScript 來初始化訊息。

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

示例

以下示例演示了在 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>

輸出

讓我們執行以下步驟來了解上面給出的程式碼如何工作 −

將上面給出的 HTML 程式碼另存為 messages.html 檔案，並儲存在你的伺服器根資料夾中。
以 https:///messages.html 的形式開啟此 HTML 檔案，輸出將顯示如下。
當你在訊息框中輸入訊息並單擊發送按鈕時，它指定你的訊息已傳送，並在右側以綠色背景色顯示。
你接收到的訊息與發件人名稱一起顯示在左側，背景為灰色。

列印頁面