Framework7消息

本文概述

邮件布局
消息页面布局
使用JavaScript初始化消息
消息参数

Framework7消息是在应用程序中用于注释和消息传递系统的组件。

邮件布局

...   
<div class="page">
  <div class="page-content messages-content">
    <div class="messages">
      <!-- Date stamp -->
      <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
 
      <!-- Sent message (by default - green and on right side) -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">Hello</div>
      </div>
 
      <!-- Another sent message -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">How are you?</div>
      </div>
 
      <!-- Received message (by default - grey on left side) -->
      <div class="message message-with-avatar message-received">
        <!-- Sender name -->
        <div class="message-name">Kate</div>
 
        <!-- Bubble with text -->
        <div class="message-text">I am fine, thanks</div>
 
        <!-- Sender avatar -->
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
      </div>
 
      <!-- Another date stamp -->
      <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
 
      <!-- Sent message with image -->
      <div class="message message-pic message-sent">
        <!-- Bubble with image -->
        <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
        <!-- Message label -->
        <div class="message-label">Delivered 2 days ago</div>
      </div>
 
      <!-- Sent message with single message date -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">
          How are you?
          <div class="message-date">Nov 11, 2016</div>
        </div>
        <!-- Message label -->
        <div class="message-label">Delivered 2 days ago</div>
      </div>
    </div>
  </div>
</div>        
...

消息页面布局

以下是消息页面布局的类别列表：

“ messages-content”：这是添加到“ page-content”并用于消息包装的必需的附加类。
“消息”：它也是消息气泡的必需附加包装。
“ messages-date”：它使用日期戳容器显示发送或接收的消息的日期和时间。
“消息”：用于显示单个消息。

单个消息内部

以下是简单消息内部部分的类：

message-name：用于提供发件人名称。
message-text：用于定义气泡类型的文本。
message-avatar：用于指定发件人头像。
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元素的字符串。
参数：它指定带有消息参数的对象。

消息参数

指数	参数	类型	描述
1)	autoLayout	boolean	通过启用它, 它向每条消息添加了附加的必需类。
2)	newMessagesFirst	boolean	你可以通过启用消息在顶部显示消息, 而不是在底部显示消息。
3)	messages	array	它显示消息数组, 其中每个消息都应表示为带有消息参数的对象。
4)	messageTemplate	string	它显示单个消息模板。

讯息方式

以下是消息方法的列表：

指数	方法	描述
1)	myMessages.addMessage（messageParameters, method, animate）;	根据方法参数将新消息添加到末尾或开头：messageParameters：要添加的消息的对象参数。需要。方法-字符串：（“追加”或“前置”）指示在消息容器的末尾或开头添加新消息。可选, 如果未指定, 则它将根据newMessagesFirst参数添加消息animate-布尔值：（默认为true）。你可以在此处传递false, 消息将立即添加, 而不会进行任何过渡和滚动动画。可选的。方法返回添加的消息的HTMLElement
2)	myMessages.appendMessage（messageParameters, 动画）;	Add new message to the end (to the bottom)
3)	myMessages.prependMessage（messageParameters, 动画）;	Add new message to the beginning (to the top)
4)	myMessages.addMessages（消息, 方法, 动画）;	一次添加多条消息。消息：包含要添加的消息的数组。数组中的每个消息都应显示为带有消息参数Required的对象。方法返回添加了消息的HTMLElements数组
5)	myMessages.removeMessage(message);	删除消息消息：要删除的消息元素的HTMLElement或字符串（带有CSS选择器）。如果删除了指定的消息, 则Required Method返回true
6)	myMessages.removeMessages(messages);	删除多条消息消息：要删除的消息数组（带有HTMLElements）或字符串（带有CSS Selector）。如果指定的消息已删除, 则Required Method返回true。
7)	myMessages.scrollMessages();	根据newMessagesFirst参数将消息滚动到顶部/底部
8)	myMessages.layout();	应用邮件自动布局
9)	myMessages.clean();	清除/删除所有消息
10)	myMessages.destroy();	销毁消息实例

例

<!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">Sunday, Feb 9 <span>12:58</span></div>
      <div class="message message-sent">
        <div class="message-text">Hello</div>
      </div>
      <div class="message message-sent">
        <div class="message-text">How are you?</div>
      </div>
      <div class="message message-received">
        <div class="message-name">Kate</div>
        <div class="message-text">I am fine, thanks</div>
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
      </div>
      <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
      <div class="message message-sent">
        <div class="message-text">Nice photo?</div>
      </div>
      <div class="message message-sent message-pic">
        <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
        <div class="message-label">Delivered</div>
      </div>
      <div class="message message-received">
        <div class="message-name">Kate</div>
        <div class="message-text">Wow, awesome!</div>
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" 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 = 'Kate';
            }
            
            // 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>

立即测试

本文概述

邮件布局

消息页面布局

单个消息内部

单消息容器的其他类

单个消息的其他可用类

使用JavaScript初始化消息

消息参数

讯息方式

例

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

邮件布局

消息页面布局

单个消息内部

单消息容器的其他类

单个消息的其他可用类

使用JavaScript初始化消息

消息参数

讯息方式

例

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发