Framework7 - Thanh thông báo

Sự miêu tả

Framework7 cung cấp thanh công cụ có thể thay đổi kích thước đặc biệt để làm việc với hệ thống nhắn tin trong ứng dụng.

Đoạn mã sau đây hiển thị bố cục thanh thông báo -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>

Trong thanh thông báo, phần bên trong của "trang" rất quan trọng và nằm ở bên phải của "nội dung-thông báo" -

<div class = "page toolbar-fixed">
   <!-- messagebar -->
   <div class = "toolbar messagebar">
      <div class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "link">Send</a>
      </div>
   </div>
   
   <!-- messages-content -->
   <div class = "page-content messages-content">
      <div class = "messages">
         ... messages
      </div>
   </div>
</div>

Bạn có thể sử dụng phương pháp sau để khởi tạo thanh thông báo bằng JavaScript:

myApp.messagesbar(messagesbarContainer, parameters)

Phương pháp này có hai tùy chọn -

messagesbarContainer - Đây là một phần tử hoặc chuỗi HTML bắt buộc bao gồm phần tử HTML vùng chứa thanh thông báo.
parameters - Nó chỉ định một đối tượng với các tham số trên thanh thông báo.

Ví dụ -

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Thông số thanh thông báo

maxHeight- Nó được sử dụng để đặt chiều cao tối đa của vùng văn bản và sẽ được thay đổi kích thước tùy thuộc vào lượng văn bản của nó. Loại tham số là số và giá trị mặc định là null .

Thuộc tính thanh thông báo

Bảng sau đây cho thấy các thuộc tính của thanh thông báo:

S. không	Thuộc tính & Mô tả
1	myMessagebar.params Bạn có thể chỉ định đối tượng với các tham số khởi tạo được truyền vào.
2	myMessagebar.container Bạn có thể chỉ định phần tử dom7 với phần tử HTML vùng chứa thanh thông báo.
3	myMessagebar.textarea Bạn có thể chỉ định phần tử dom7 với phần tử HTML văn bản trên thanh thông báo.

Phương thức thanh thông báo

Bảng sau đây cho thấy các phương thức của thanh thông báo:

S. không	Phương pháp & Mô tả
1	myMessagebar.value(newValue); Nó đặt giá trị textarea / văn bản của thanh tin nhắn và trả về giá trị textarea của thanh tin nhắn, nếu newValue không được chỉ định.
2	myMessagebar.clear(); Nó xóa vùng văn bản và cập nhật / đặt lại kích thước.
3	myMessagebar.destroy(); Nó phá hủy cá thể thanh thông báo.

Khởi tạo Thanh thông báo bằng HTML

Bạn có thể khởi tạo thanh thông báo bằng HTML mà không có các phương thức và thuộc tính JavaScript bằng cách thêm lớp messagebar-init vào thanh .messagebar và bạn có thể chuyển các tham số bắt buộc bằng cách sử dụng thuộc tính data- .

Đoạn mã sau chỉ định việc khởi tạo thanh thông báo bằng HTML -

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>

Truy cập vào phiên bản của Messagebar

Có thể truy cập cá thể thanh thông báo, nếu bạn khởi tạo nó bằng cách sử dụng HTML; nó đạt được bằng cách sử dụng thuộc tính Thanh thông báo f7 của phần tử vùng chứa của nó.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

Bạn có thể xem ví dụ về Messagebar, được giải thích trong liên kết này