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>

레이아웃은 다른 영역에서 다음 클래스를 포함합니다-

메시지 페이지 레이아웃

다음 표는 설명과 함께 메시지 페이지 레이아웃의 클래스를 보여줍니다.

S. 아니 수업 및 설명
1

messages-content

"page-content"에 추가되고 메시지 래퍼에 사용되는 필수 추가 클래스입니다.
2

messages

메시지 풍선의 필수 요소입니다.
삼

messages-date

날짜 스탬프 컨테이너를 사용하여 송수신 된 메시지의 날짜와 시간을 표시합니다.
4

message

표시되는 단일 메시지입니다.

단일 메시지 내부 부품

다음 표는 설명이있는 간단한 메시지 내부 부분의 클래스를 보여줍니다.

S. 아니 수업 및 설명
1

message-name

보낸 사람 이름을 제공합니다.
2

message-text

버블 유형으로 텍스트를 정의하십시오.
삼

message-avatar

보낸 사람 아바타를 지정합니다.
4

message-label

거품 아래에 텍스트 레이블을 지정합니다.

단일 메시지 컨테이너에 대한 추가 클래스

다음 표는 단일 메시지 컨테이너 설명에 대한 추가 클래스를 보여줍니다.

S. 아니 수업 및 설명
1

message-sent

사용자가 메시지를 보냈 음을 지정하며 오른쪽에 녹색 배경색으로 표시됩니다.
2

message-received

사용자가 메시지를 받았음을 나타내는 단일 메시지를 표시하는 데 사용되며 회색 배경색으로 왼쪽에 유지됩니다.
삼

message-pic

단일 메시지로 이미지를 표시하기위한 추가 클래스입니다.
4

message-with-avatar

아바타와 함께 단일 메시지 (수신 또는 전송)를 표시하기위한 추가 클래스입니다.
5

message-with-tail

단일 메시지 (수신 또는 전송)에 대한 풍선 꼬리를 추가 할 수 있습니다.

단일 메시지에 대해 사용 가능한 추가 클래스

다음 표는 설명과 함께 단일 메시지에 대해 사용 가능한 클래스를 보여줍니다.

S. 아니 수업 및 설명
1

message-hide-name

단일 메시지 (수신 또는 전송)에 대한 메시지 이름을 숨기는 추가 클래스입니다.
2

message-hide-avatar

단일 메시지 (수신 또는 전송)에 대한 메시지 아바타를 숨기는 추가 클래스입니다.
삼

message-hide-label

단일 메시지 (수신 또는 전송)에 대한 메시지 레이블을 숨기는 추가 클래스입니다.
4

message-last

이 클래스를 사용하여 단일 메시지 (수신 또는 전송)에 대해 한 발신자가 현재 대화에서 마지막으로 받거나 보낸 메시지를 나타낼 수 있습니다.
5

message-first

이 클래스를 사용하여 단일 메시지 (수신 또는 전송)에 대해 한 발신자가 현재 대화에서 처음 받거나 처음 보낸 메시지를 나타낼 수 있습니다.

JavaScript로 메시지 초기화

다음 방법을 사용하여 JavaScript로 메시지를 초기화 할 수 있습니다.

myApp.messages(messagesContainer, parameters)

이 방법에는 두 가지 옵션이 있습니다.

  • messagesContainer − 메시지 컨테이너 HTML 요소를 포함하는 필수 HTML 요소 또는 문자열입니다.

  • parameters − 메시지 매개 변수가있는 개체를 지정합니다.

메시지 매개 변수

다음 표는 설명이있는 메시지의 매개 변수를 보여줍니다.

S. 아니 매개 변수 및 설명 유형 기본
1

autoLayout

활성화하여 각 메시지에 필요한 추가 클래스를 추가합니다.

 부울 진실
2

newMessagesFirst

활성화하면 하단에 표시하지 않고 상단에 메시지를 표시 할 수 있습니다.

 부울 그릇된
삼

messages

각 메시지가 메시지 매개 변수가있는 객체로 표시되어야하는 메시지 배열을 표시합니다.

 정렬 -
4

messageTemplate

단일 메시지 템플릿을 표시합니다.

 끈 -

메시지 속성

다음 표는 설명이있는 메시지의 속성을 보여줍니다.

S. 아니 속성 및 설명
1

myMessages.params

전달 된 매개 변수를 객체로 초기화 할 수 있습니다.
2

myMessages.container

메시지 표시 줄 HTML 컨테이너로 DOM7 요소를 정의합니다.

메시지 방법

다음 표는 설명이있는 메시지 방법을 보여줍니다.

S. 아니 방법 및 설명
1

myMessages.addMessage(messageParameters, method, animate);

method 매개 변수를 사용하여 메시지를 처음이나 끝에 추가 할 수 있습니다.

다음과 같은 매개 변수가 있습니다.

  • messageParameters − 추가 할 메시지 매개 변수를 제공합니다.

  • method − 메시지 컨테이너의 시작 또는 끝에 메시지를 추가하는 문자열 유형입니다.

  • animate− boolean type으로 false로 설정하여 전환이나 스크롤 애니메이션없이 메시지를 추가합니다. 기본적으로 true입니다.
2

myMessages.appendMessage(messageParameters, animate);

메시지 컨테이너 끝에 메시지를 추가합니다.
삼

myMessages.prependMessage(messageParameters, animate);

메시지 컨테이너의 시작 부분에 메시지를 추가합니다.
4

myMessages.addMessages(messages, method, animate);

한 번에 여러 메시지를 추가 할 수 있습니다.

다음 매개 변수가 있습니다.

  • messages − 추가 할 메시지 배열을 제공하며, 메시지 매개 변수가있는 객체로 표시되어야합니다.
5

myMessages.removeMessage(message);

메시지를 제거하는 데 사용됩니다.

다음 매개 변수가 있습니다.

  • message − 메시지 요소를 제거하는 필수 HTML 요소 또는 문자열입니다.
6

myMessages.removeMessages(messages);

여러 메시지를 제거 할 수 있습니다.

다음 매개 변수가 있습니다.

  • messages − 메시지를 제거하는 HTML 요소 또는 문자열이있는 필수 배열입니다.
7

myMessages.scrollMessages();

새 메시지의 첫 번째 매개 변수에 따라 메시지를 위에서 아래로 또는 그 반대로 스크롤 할 수 있습니다.
8

myMessages.layout();

메시지에 자동 레이아웃을 적용 할 수 있습니다.
9

myMessages.clean();

메시지를 정리하는 데 사용됩니다.
10

myMessages.destroy();

메시지를 파괴하는 데 사용됩니다.

단일 메시지 매개 변수

다음 표는 설명이있는 단일 메시지의 매개 변수를 보여줍니다.

S. 아니 매개 변수 및 설명 유형 기본
1

text

HTML 문자열이 될 수있는 메시지 텍스트를 정의합니다.

 끈 -
2

name

보낸 사람 이름을 지정합니다.

 끈 -
삼

avatar

보낸 사람 아바타 URL 문자열을 지정합니다.

 끈 -
4

time

'9:45 AM', '18 : 35 '와 같이 메시지의 시간 문자열을 지정합니다.

 끈 -
5

type

메시지를 보내거나받을 수 있는지 여부에 관계없이 메시지 유형을 제공합니다.

 끈 보낸
6

label

메시지의 레이블을 정의합니다.

 끈 -
7

day

'일요일', '월요일', '어제'등과 같은 메시지의 요일 문자열을 제공합니다.

 끈 -

HTML로 메시지 초기화

당신은 추가 사용하여 자바 스크립트없이 HTML로 메시지를 초기화 할 수 있습니다 메시지 - 초기화 에 클래스를 메시지 와 사용 데이터 - 아래 주어진 한 코드에서와 같이 필요한 매개 변수를 전달하는 특성을 -

...
   <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 서버 루트 폴더의 파일.

  • 이 HTML 파일을 http : //localhost/messages.html로 열면 출력이 아래와 같이 표시됩니다.

  • 메시지 상자에 메시지를 입력하고 보내기 버튼을 클릭하면 메시지가 전송되었음을 지정하고 오른쪽에 녹색 배경색으로 표시됩니다.

  • 수신 한 메시지는 보낸 사람 이름과 함께 회색 배경으로 왼쪽에 나타납니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved