फ्रेमवर्क 7 - संदेश

विवरण

संदेश फ्रेमवर्क 7 के घटक हैं, जो एप्लिकेशन में टिप्पणियों और संदेश प्रणाली का दृश्य देता है।

संदेश लेआउट

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.No	कक्षाएं और विवरण
1	messages-content यह एक आवश्यक अतिरिक्त वर्ग है जिसे "पृष्ठ-सामग्री" में जोड़ा जाता है और संदेश आवरण के लिए उपयोग किया जाता है।
2	messages यह संदेशों के बुलबुले के लिए एक आवश्यक तत्व है।
3	messages-date यह भेजे गए या प्राप्त संदेश की तारीख और समय प्रदर्शित करने के लिए डेट स्टैंप कंटेनर का उपयोग करता है।
4	message यह प्रदर्शित किया जाने वाला एक एकल संदेश है।

सिंगल मैसेज इनर पार्ट्स

निम्न तालिका विवरण के साथ सरल संदेश आंतरिक भागों की कक्षाएं दिखाती है।

S.No	कक्षाएं और विवरण
1	message-name यह प्रेषक का नाम प्रदान करता है।
2	message-text बबल प्रकार के साथ पाठ को परिभाषित करें।
3	message-avatar यह प्रेषक अवतार को निर्दिष्ट करता है।
4	message-label यह बुलबुले के नीचे पाठ लेबल को निर्दिष्ट करता है।

एकल संदेश कंटेनर के लिए अतिरिक्त कक्षाएं

निम्न तालिका एकल संदेश कंटेनर विवरण के लिए अतिरिक्त कक्षाएं दिखाती है।

S.No	कक्षाएं और विवरण
1	message-sent यह निर्दिष्ट करता है कि संदेश उपयोगकर्ता द्वारा भेजा गया था और दाईं ओर हरे रंग की पृष्ठभूमि के रंग के साथ प्रदर्शित किया गया है।
2	message-received इसका उपयोग एकल संदेश को प्रदर्शित करने के लिए किया जाता है, यह दर्शाता है कि संदेश उपयोगकर्ता द्वारा प्राप्त किया गया था और बाईं ओर ग्रे पृष्ठभूमि रंग के साथ रहता है।
3	message-pic यह एक एकल संदेश के साथ छवि प्रदर्शित करने के लिए एक अतिरिक्त वर्ग है।
4	message-with-avatar यह अवतार के साथ एक एकल संदेश (प्राप्त या भेजा) प्रदर्शित करने के लिए एक अतिरिक्त वर्ग है।
5	message-with-tail आप एकल संदेश (प्राप्त या भेजे गए) के लिए एक बुलबुला पूंछ जोड़ सकते हैं।

एकल संदेश के लिए अतिरिक्त उपलब्ध कक्षाएं

निम्न तालिका वर्णन के साथ एक एकल संदेश के लिए उपलब्ध कक्षाओं को दिखाती है।

S.No	कक्षाएं और विवरण
1	message-hide-name यह एक एकल संदेश (प्राप्त या भेजा) के लिए संदेश का नाम छिपाने के लिए एक अतिरिक्त वर्ग है।
2	message-hide-avatar यह एक एकल संदेश (प्राप्त या भेजा) के लिए संदेश अवतार को छिपाने के लिए एक अतिरिक्त वर्ग है।
3	message-hide-label यह एक एकल संदेश (प्राप्त या भेजा) के लिए संदेश लेबल को छिपाने के लिए एक अतिरिक्त वर्ग है।
4	message-last आप वर्तमान वार्तालाप में एक संदेश (प्राप्त या भेजे गए) के लिए एक प्रेषक द्वारा अंतिम प्राप्त या भेजे गए संदेश को इंगित करने के लिए इस वर्ग का उपयोग कर सकते हैं।
5	message-first आप वर्तमान वार्तालाप में किसी एकल संदेश के लिए एक प्रेषक द्वारा प्राप्त या पहले भेजे गए संदेश को इंगित करने के लिए इस कक्षा का उपयोग कर सकते हैं (प्राप्त या भेजा)।

जावास्क्रिप्ट के साथ प्रारंभिक संदेश

आप निम्न विधि का उपयोग करके जावास्क्रिप्ट के साथ संदेशों को आरंभ कर सकते हैं -

myApp.messages(messagesContainer, parameters)

विधि दो विकल्प लेती है -

messagesContainer - यह एक आवश्यक HTML तत्व या स्ट्रिंग है जिसमें संदेश कंटेनर HTML तत्व शामिल हैं।
parameters - यह संदेश पैरामीटर के साथ एक ऑब्जेक्ट निर्दिष्ट करता है।

संदेश पैरामीटर

निम्न तालिका विवरण के साथ संदेशों के मापदंडों को दिखाती है।

S.No	पैरामीटर और विवरण	प्रकार	चूक
1	autoLayout यह सक्षम करके प्रत्येक संदेश में अतिरिक्त आवश्यक कक्षाएं जोड़ता है।	बूलियन	सच
2	newMessagesFirst आप इसे सक्षम करके नीचे की ओर प्रदर्शित करने के बजाय शीर्ष पर संदेश प्रदर्शित कर सकते हैं।	बूलियन	असत्य
3	messages यह संदेशों की एक सरणी प्रदर्शित करता है जिसमें प्रत्येक संदेश को संदेश मापदंडों के साथ वस्तु के रूप में दर्शाया जाना चाहिए।	सरणी	-
4	messageTemplate यह एकल संदेश टेम्पलेट प्रदर्शित करता है।	तार	-

संदेश गुण

निम्न तालिका विवरण के साथ संदेशों के गुणों को दिखाती है।

S.No	संपत्ति विवरण
1	myMessages.params आप ऑब्जेक्ट के साथ पारित मापदंडों को इनिशियलाइज़ कर सकते हैं।
2	myMessages.container एक संदेश पट्टी HTML कंटेनर के साथ DOM7 तत्व को परिभाषित करता है।

संदेश के तरीके

निम्न तालिका विवरण के साथ संदेशों की विधियों को दिखाती है।

नीचे दिए गए विवरण के साथ संदेशों के तरीकों की सूची है।

S.No	विधि और विवरण
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(); इसका उपयोग संदेशों को नष्ट करने के लिए किया जाता है।

एकल संदेश पैरामीटर

निम्न तालिका विवरण के साथ किसी एकल संदेश के मापदंडों को दिखाती है।

S.No	पैरामीटर और विवरण	प्रकार	चूक
1	text यह संदेश पाठ को परिभाषित करता है, जो एक HTML स्ट्रिंग हो सकता है।	तार	-
2	name यह प्रेषक का नाम निर्दिष्ट करता है।	तार	-
3	avatar यह प्रेषक अवतार URL स्ट्रिंग निर्दिष्ट करता है।	तार	-
4	time यह '9:45 AM', '18: 35 'जैसे संदेश के टाइम स्ट्रिंग को निर्दिष्ट करता है।	तार	-
5	type यह संदेश का प्रकार प्रदान करता है कि क्या यह संदेश भेजा या प्राप्त किया जा सकता है।	तार	भेज दिया
6	label यह संदेश के लेबल को परिभाषित करता है।	तार	-
7	day यह संदेश का दिन स्ट्रिंग देता है जैसे 'रविवार', 'सोमवार', 'कल' आदि।	तार	-

HTML के साथ प्रारंभिक संदेश

आप अतिरिक्त का उपयोग करके जावास्क्रिप्ट के बिना HTML के साथ संदेशों को प्रारंभ कर सकते हैं संदेशों-init करने के लिए वर्ग संदेशों और प्रयोग डेटा- विशेषताओं के रूप में कोड में दिखाया नीचे दिए गए स्निपेट आवश्यक पैरामीटर पारित करने के लिए -

...
   <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>
...

उदाहरण

निम्न उदाहरण फ्रेमवर्क 7 में संदेशों के उपयोग को दर्शाता है -

<!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 के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आप संदेश बॉक्स में एक संदेश टाइप करते हैं और भेजें बटन पर क्लिक करते हैं, तो यह निर्दिष्ट करता है कि आपका संदेश भेजा गया है और दाईं ओर हरे रंग की पृष्ठभूमि के रंग के साथ प्रदर्शित किया गया है।
संदेश जो आप प्राप्त करते हैं, प्रेषक के नाम के साथ ग्रे पृष्ठभूमि के साथ बाईं ओर दिखाई देता है।