Framework7 - Tin nhắn
Sự miêu tả
Tin nhắn là thành phần của Framework7, cung cấp hình ảnh trực quan về nhận xét và hệ thống nhắn tin trong ứng dụng.
Bố cục Tin nhắn
Framework7 có cấu trúc bố cục thư sau:
<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>Bố cục chứa các lớp sau trong các khu vực khác nhau:
Bố cục trang tin nhắn
Bảng sau đây cho thấy các lớp của bố cục trang thông báo với mô tả.
| S.Không | Lớp học & Mô tả |
|---|---|
| 1 | messages-content Nó là một lớp bổ sung bắt buộc được thêm vào "nội dung trang" và được sử dụng cho trình bao bọc thư. |
| 2 | messages Nó là một yếu tố bắt buộc đối với bong bóng tin nhắn. |
| 3 | messages-date Nó sử dụng hộp chứa tem ngày để hiển thị ngày và thời gian của tin nhắn được gửi hoặc nhận. |
| 4 | message Nó là một thông báo duy nhất được hiển thị. |
Bộ phận bên trong tin nhắn đơn
Bảng sau đây cho thấy các lớp của các phần bên trong thông báo đơn giản với mô tả.
| S.Không | Lớp học & Mô tả |
|---|---|
| 1 | message-name Nó cung cấp tên người gửi. |
| 2 | message-text Xác định văn bản với loại bong bóng. |
| 3 | message-avatar Nó chỉ định hình đại diện người gửi. |
| 4 | message-label Nó chỉ định nhãn văn bản bên dưới bong bóng. |
Các lớp bổ sung cho Vùng chứa Thông điệp Đơn
Bảng sau đây hiển thị các lớp bổ sung cho mô tả vùng chứa thông báo đơn.
| S.Không | Lớp học & Mô tả |
|---|---|
| 1 | message-sent Nó chỉ định rằng tin nhắn được gửi bởi người dùng và được hiển thị với màu nền xanh lá cây ở phía bên phải. |
| 2 | message-received Nó được sử dụng để hiển thị một tin nhắn cho biết rằng, tin nhắn đã được người dùng nhận và nằm ở phía bên trái với màu nền xám. |
| 3 | message-pic Nó là một lớp bổ sung để hiển thị hình ảnh với một tin nhắn. |
| 4 | message-with-avatar Nó là một lớp bổ sung để hiển thị một tin nhắn (đã nhận hoặc đã gửi) với hình đại diện. |
| 5 | message-with-tail Bạn có thể thêm đuôi bong bóng cho một tin nhắn (đã nhận hoặc đã gửi). |
Các lớp bổ sung có sẵn cho một tin nhắn
Bảng sau đây cho thấy các lớp có sẵn cho một thông báo với mô tả.
| S.Không | Lớp học & Mô tả |
|---|---|
| 1 | message-hide-name Nó là một lớp bổ sung để ẩn tên tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 2 | message-hide-avatar Nó là một lớp bổ sung để ẩn hình đại diện tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 3 | message-hide-label Nó là một lớp bổ sung để ẩn nhãn tin nhắn cho một tin nhắn (nhận hoặc gửi). |
| 4 | message-last Bạn có thể sử dụng lớp này để chỉ ra tin nhắn đã nhận hoặc đã gửi cuối cùng trong cuộc trò chuyện hiện tại của một người gửi cho một tin nhắn (đã nhận hoặc đã gửi). |
| 5 | message-first Bạn có thể sử dụng lớp này để cho biết tin nhắn nhận được đầu tiên hoặc được gửi đầu tiên trong cuộc trò chuyện hiện tại của một người gửi cho một tin nhắn (đã nhận hoặc đã gửi). |
Khởi tạo Tin nhắn bằng JavaScript
Bạn có thể khởi tạo thông báo bằng JavaScript bằng cách sử dụng phương pháp sau:
myApp.messages(messagesContainer, parameters)Phương pháp này có hai tùy chọn -
messagesContainer - Nó là một phần tử hoặc chuỗi HTML bắt buộc bao gồm phần tử HTML chứa thư.
parameters - Nó chỉ định một đối tượng với các tham số thông báo.
Thông số Tin nhắn
Bảng sau đây cho thấy các thông số của tin nhắn với mô tả.
| S.Không | Mô tả về Thông Số | Kiểu | Mặc định |
|---|---|---|---|
| 1 | autoLayout Nó thêm các lớp cần thiết bổ sung cho mỗi thông báo bằng cách kích hoạt nó. |
boolean | thật |
| 2 | newMessagesFirst Bạn có thể hiển thị tin nhắn ở trên cùng thay vì hiển thị ở dưới cùng bằng cách bật nó. |
boolean | sai |
| 3 | messages Nó hiển thị một mảng thông báo trong đó mỗi thông báo phải được biểu diễn dưới dạng đối tượng với các tham số thông báo. |
mảng | - |
| 4 | messageTemplate Nó hiển thị một mẫu tin nhắn. |
chuỗi | - |
Thuộc tính Tin nhắn
Bảng sau đây cho thấy các thuộc tính của thông báo với mô tả.
| S.Không | Kê khai tài sản |
|---|---|
| 1 | myMessages.params Bạn có thể khởi tạo các tham số được truyền với đối tượng. |
| 2 | myMessages.container Xác định phần tử DOM7 bằng vùng chứa HTML trên thanh thông báo. |
Phương thức nhắn tin
Bảng sau đây cho thấy các phương pháp của thông báo với mô tả.
| S.Không | Phương pháp & Mô tả |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Thông báo có thể được thêm vào đầu hoặc cuối bằng cách sử dụng tham số phương thức. Nó có các thông số sau:
|
| 2 | myMessages.appendMessage(messageParameters, animate); Nó thêm một tin nhắn vào cuối vùng chứa tin nhắn. |
| 3 | myMessages.prependMessage(messageParameters, animate); Nó thêm một tin nhắn vào đầu vùng chứa tin nhắn. |
| 4 | myMessages.addMessages(messages, method, animate); Bạn có thể thêm nhiều tin nhắn cùng một lúc. Nó có tham số sau:
|
| 5 | myMessages.removeMessage(message); Nó được sử dụng để xóa tin nhắn. Nó có tham số sau:
|
| 6 | myMessages.removeMessages(messages); Bạn có thể xóa nhiều tin nhắn. Nó có tham số sau:
|
| 7 | myMessages.scrollMessages(); Bạn có thể cuộn tin nhắn từ trên xuống dưới và ngược lại tùy thuộc vào tham số đầu tiên của tin nhắn mới. |
| số 8 | myMessages.layout(); Bố cục tự động có thể được áp dụng cho các tin nhắn. |
| 9 | myMessages.clean(); Nó được sử dụng để làm sạch các tin nhắn. |
| 10 | myMessages.destroy(); Nó được sử dụng để hủy các tin nhắn. |
Tham số tin nhắn đơn
Bảng sau đây hiển thị các tham số cho một thông báo có mô tả.
| S.Không | Mô tả về Thông Số | Kiểu | Mặc định |
|---|---|---|---|
| 1 | text Nó xác định văn bản tin nhắn, có thể là một chuỗi HTML. |
chuỗi | - |
| 2 | name Nó chỉ định tên người gửi. |
chuỗi | - |
| 3 | avatar Nó chỉ định chuỗi URL hình đại diện của người gửi. |
chuỗi | - |
| 4 | time Nó chỉ định chuỗi thời gian của thông báo như '9:45 AM', '18: 35 '. |
chuỗi | - |
| 5 | type Nó cung cấp loại tin nhắn cho dù nó có thể được gửi hay nhận. |
chuỗi | gởi |
| 6 | label Nó xác định nhãn của tin nhắn. |
chuỗi | - |
| 7 | day Nó cung cấp chuỗi ngày của thông báo như 'chủ nhật', 'thứ hai', 'hôm qua', v.v. |
chuỗi | - |
Khởi tạo Tin nhắn bằng HTML
Bạn có thể khởi tạo thư bằng HTML mà không cần JavaScript bằng cách sử dụng lớp messages-init bổ sung cho thư và sử dụng thuộc tính data- để chuyển các tham số bắt buộc như được hiển thị trong đoạn mã dưới đây -
...
<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>
...Thí dụ
Ví dụ sau minh họa việc sử dụng các thông báo trong 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>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng messages.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/messages.html và kết quả được hiển thị như hình dưới đây.
Khi bạn nhập một tin nhắn vào hộp tin nhắn và nhấp vào nút Gửi, nó chỉ định rằng tin nhắn của bạn đã được gửi và được hiển thị với màu nền xanh ở phía bên phải.
Thư mà bạn nhận được, xuất hiện ở phía bên trái với nền màu xám cùng với tên người gửi.