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

ระบุป้ายข้อความด้านล่างฟองอากาศ

คลาสเพิ่มเติมสำหรับ Single Message Container

ตารางต่อไปนี้แสดงคลาสเพิ่มเติมสำหรับคำอธิบายคอนเทนเนอร์ข้อความเดียว

ส. เลขที่ ชั้นเรียนและคำอธิบาย
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

เพิ่มคลาสที่จำเป็นเพิ่มเติมให้กับแต่ละข้อความโดยการเปิดใช้งาน

บูลีน จริง
2

newMessagesFirst

คุณสามารถแสดงข้อความที่ด้านบนแทนที่จะแสดงที่ด้านล่างโดยเปิดใช้งาน

บูลีน เท็จ
3

messages

จะแสดงอาร์เรย์ของข้อความซึ่งแต่ละข้อความควรแสดงเป็นวัตถุพร้อมพารามิเตอร์ข้อความ

อาร์เรย์ -
4

messageTemplate

จะแสดงเทมเพลตข้อความเดียว

สตริง -

คุณสมบัติของข้อความ

ตารางต่อไปนี้แสดงคุณสมบัติของข้อความพร้อมคำอธิบาย

ส. เลขที่ คุณสมบัติและคำอธิบาย
1

myMessages.params

คุณสามารถเริ่มต้นพารามิเตอร์ที่ส่งผ่านด้วยออบเจ็กต์

2

myMessages.container

กำหนดองค์ประกอบ DOM7 ด้วยคอนเทนเนอร์ HTML ของแถบข้อความ

วิธีการส่งข้อความ

ตารางต่อไปนี้แสดงวิธีการของข้อความพร้อมคำอธิบาย

ส. เลขที่ วิธีการและคำอธิบาย
1

myMessages.addMessage(messageParameters, method, animate);

ข้อความสามารถเพิ่มไปยังจุดเริ่มต้นหรือจุดสิ้นสุดโดยใช้พารามิเตอร์วิธีการ

มีพารามิเตอร์ดังต่อไปนี้ -

  • messageParameters - มีพารามิเตอร์ข้อความที่จะเพิ่ม

  • method - เป็นประเภทสตริงที่เพิ่มข้อความไปยังจุดเริ่มต้นหรือท้ายที่เก็บข้อความ

  • animate- เป็นประเภทบูลีนซึ่งเพิ่มข้อความโดยไม่มีการเปลี่ยนหรือเลื่อนภาพเคลื่อนไหวโดยตั้งค่าเป็นเท็จ โดยค่าเริ่มต้นจะเป็นจริง

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

คุณสามารถลบหลายข้อความ

มีพารามิเตอร์ต่อไปนี้ -

  • 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 น.', '18: 35 '

สตริง -
5

type

มีประเภทของข้อความว่าสามารถส่งหรือรับข้อความได้

สตริง ส่งแล้ว
6

label

เป็นการกำหนดป้ายกำกับของข้อความ

สตริง -
7

day

มันให้สตริงวันของข้อความเช่น 'sunday', 'monday', 'Yesterday' เป็นต้น

สตริง -

การเริ่มต้นข้อความด้วย HTML

คุณสามารถเริ่มต้นข้อความด้วย HTML โดยไม่ต้องใช้ JavaScript โดยใช้เพิ่มเติมข้อความ initชั้นข้อความและใช้DATA-คุณลักษณะที่จะผ่านพารามิเตอร์ที่จำเป็นตามที่ปรากฏในข้อมูลโค้ดที่ได้รับด้านล่าง -

...
   <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 และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง

  • เมื่อคุณพิมพ์ข้อความลงในกล่องข้อความและคลิกปุ่มส่งจะระบุว่าข้อความของคุณถูกส่งไปแล้วและแสดงด้วยสีพื้นหลังสีเขียวทางด้านขวา

  • ข้อความที่คุณได้รับจะปรากฏทางด้านซ้ายโดยมีพื้นหลังสีเทาพร้อมกับชื่อผู้ส่ง