开发手册 欢迎您!
软件开发者资料库

Framework7 - 消息

Framework7消息 - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7动作按钮,表单,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点按保持事件,触摸波纹。

描述

消息是Framework7的组成部分,它提供了应用程序中注释和消息系统的可视化.

消息布局

framework7具有以下消息布局结构 :

               Monday, Apr 26 10:30
                                    Hello
                                          How are you?                                          Smith                  I am fine, thanks                  Tuesday, April 28 11:16               

布局在不同区域包含以下类别 :

消息页面布局

下表显示了带描述的消息页面布局类.

S.NoClasses&说明
1

messages-content

这是一个必需的附加类,添加到"page-content"并用于消息包装.

2

消息

这是消息泡沫的必需元素.

3

messages-date

它使用日期戳容器显示发送的消息的日期和时间或收到.

4

消息

这是一条要显示的消息.

单个消息内部部件

下表显示了包含描述的简单消息内部部件的类.

S.NoClasses&说明
1

消息名称

它提供发件人姓名.

2

消息文本

用泡泡定义文本类型.

3

消息头像

它指定发件人头像.

4

消息标签

它指定了气泡下方的文本标签.

单个消息容器的附加类

下表显示了单个消息容器描述的其他类.

S.NoClasses&说明
1

消息发送

它指定消息是由用户发送的,并在右侧以绿色背景颜色显示.

2

收到消息

它用于显示单个消息,表明该消息已被用户接收并保留在左侧,背景为灰色.

3

message-pic

这是一个用于显示带有单条信息的图像的附加类.

4

消息与头像

这是一个额外的课程用头像显示单个消息(接收或发送).

5

消息与尾巴

您可以为单个消息添加一个气泡尾部(recei) ved或发送).

单个消息的其他可用类

下表显示了包含说明的单个邮件的可用类.

S.NoClasses&说明
1

message-hide-name

这是一个用于隐藏单个邮件(已接收或已发送)的邮件名称的附加类.

2

message-hide-avatar

这是一个额外的类,用于隐藏单个消息(接收或发送)的消息头像.

3

message-hide-label

这是隐藏单个消息(已接收或已发送)的消息标签的附加类.

4

message-last

您可以使用此课程来指示一个发件人在当前会话中为单个消息(已接收或已发送)发送的最后一条消息.

5

消息优先

您可以使用此类来表示第一次rec一个发件人在当前会话中为一条消息(已接收或已发送)发送或首次发送消息.

使用JavaScript初始化消息

您可以使用以下方法使用JavaScript初始化消息 :

myApp.messages(messagesContainer,parameters)

该方法有两个选项 :

  • messagesContainer : 它是必需的HTML元素或字符串,包含消息容器HTML元素.

  • 参数 : 它指定一个带有消息参数的对象.

消息参数

下表显示了参数带描述的消息.

S.否参数&说明键入默认
1

autoLayout

它通过启用它为每条消息添加了额外的必需类.

booleantrue
2

newMessagesFirst

您可以在顶部显示消息,而不是通过启用它在底部显示.

booleanfalse
3

消息

它显示一系列消息每个消息应该用消息参数表示为对象.

array-
4

messageTemplate

它显示单个消息模板.

string-

消息属性

下表显示了带描述的消息的属性.

S.No&安培;说明
1

myMessages.params

您可以使用object初始化传递的参数.

2

myMessages.container

定义带有消息栏HTML容器的DOM7元素.

消息方法

下表显示了带描述的消息的方法.

单个消息参数

下表显示了包含描述的单个消息的参数.

S.No参数&说明键入默认
1

text

它定义了消息文本,可以是HTML字符串.

string-
2

名称

它指定了发件人名称.
string-
3

头像

它指定发件人头像网址字符串.

string-
4

时间

它指定了消息的时间字符串,如'9:45 AM','18:35'.

string-
5

输入

它提供的消息类型是否可以发送或收到消息.

string已发送
6

标签

它定义了邮件的标签.

string-
7

day

它给出了消息的日期字符串比如'sunday','monday','today'等.

string-

使用HTML初始化消息

您可以使用以下内容初始化消息没有JavaScript的HTML,使用附加的 messages-init 类到消息并使用 data  -  属性传递所需的参数,如代码所示下面给出的片段 :

...                        ...         ...

示例

以下示例演示了Framework7 : 中消息的使用;

                           Messages                                                                                                                                                                      Messages                                                                                                                                                 Send                                                                                                                        Friday, Apr 26 10:30                                                   Hello                                                                                                   Happy Birthday                                                                                                   Smith                           Thank you                                                                                                   Saturday, Apr 27 9:30                                                   Good Morning...                                                                                                                              Delivered                                                                                                   Smith                           Very Good Morning...                                                                                                                                                                                    

输出

让我们执行以下步骤,看看上面给出的代码如何工作 : 去;

  • 将上面给出的HTML代码保存为服务器根文件夹中的 messages.html 文件.

  • 将此HTML文件打开为http://localhost/messages.html,输出显示如下.

  • 当您在消息框中键入消息并单击"发送"按钮时,它会指定您的消息已发送并在右侧以绿色背景显示.

  • 您收到的信息显示在左侧,带有灰色背景和发件人姓名.

in.js">