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 และผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
เมื่อคุณพิมพ์ข้อความลงในกล่องข้อความและคลิกปุ่มส่งจะระบุว่าข้อความของคุณถูกส่งไปแล้วและแสดงด้วยสีพื้นหลังสีเขียวทางด้านขวา
ข้อความที่คุณได้รับจะปรากฏทางด้านซ้ายโดยมีพื้นหลังสีเทาพร้อมกับชื่อผู้ส่ง