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初始化消息【Framework7消息】以下方法用于使用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 = "http://www.srcmini.com/#" 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 flagvar conversationStarted = false; // Here initiliaze the messagesvar myMessages = myApp.messages('.messages', {autoLayout:true}); // Initiliaze the messagebarvar myMessagebar = myApp.messagebar('.messagebar'); // Displays the text after clicking the button$$('.messagebar .link').on('click', function () {// specifies the message textvar messageText = myMessagebar.value().trim(); // If there is no message, then exit from thereif (messageText.length === 0) return; // Specifies the empty messagebarmyMessagebar.clear()// Defines the random message typevar messageType = (['sent', 'received'])[Math.round(Math.random())]; // Provides the avatar and name for the received messagevar avatar, name; if(messageType === 'received') {name = 'Kate'; }// It adds the messagemyMessages.addMessage ({// It provides the message texttext: messageText, // It displays the random message typetype: messageType, // Specifies the avatar and name of the senderavatar: avatar, name: name, // Displays the day, date and time of the messageday: !conversationStarted ? 'Today' : false, time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false})// Here you can update the conversation flagconversationStarted = true; }); < /script> < /body> < /html>

立即测试

    推荐阅读