Framework7-메시지 표시 줄

기술

Framework7은 응용 프로그램의 메시징 시스템과 함께 작동하도록 크기를 조정할 수있는 특수 도구 모음을 제공합니다.

다음 코드는 메시지 표시 줄 레이아웃을 보여줍니다-

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

메시지 표시 줄에서 "페이지"내부는 매우 중요하며 "메시지 내용"의 오른쪽에 있습니다.

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

다음 방법을 사용하여 JavaScript로 메시지 표시 줄을 초기화 할 수 있습니다.

myApp.messagesbar(messagesbarContainer, parameters)

이 방법에는 두 가지 옵션이 있습니다.

messagesbarContainer − 메시지 바 컨테이너 HTML 요소를 포함하는 필수 HTML 요소 또는 문자열입니다.
parameters − messagebar 매개 변수가있는 객체를 지정합니다.

예를 들면-

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

Messagebar 매개 변수

maxHeight− 텍스트 영역의 최대 높이를 설정하는 데 사용되며 텍스트 양에 따라 크기가 조정됩니다. 매개 변수 유형은 숫자 이고 기본값은 null 입니다.

Messagebar 속성

다음 표는 messagebar 속성을 보여줍니다-

S. 아니	속성 및 설명
1	myMessagebar.params 전달 된 초기화 매개 변수로 객체를 지정할 수 있습니다.
2	myMessagebar.container messagebar 컨테이너 HTML 요소로 dom7 요소를 지정할 수 있습니다.
삼	myMessagebar.textarea messagebar textarea HTML 요소로 dom7 요소를 지정할 수 있습니다.

Messagebar 메서드

다음 표는 messagebar 방법을 보여줍니다-

S. 아니	방법 및 설명
1	myMessagebar.value(newValue); messagebar textarea 값 / 텍스트를 설정하고 messagebar textarea 값을 반환합니다. newValue 지정되지 않았습니다.
2	myMessagebar.clear(); 텍스트 영역을 지우고 크기를 업데이트 / 재설정합니다.
삼	myMessagebar.destroy(); messagebar 인스턴스를 파괴합니다.

HTML로 Messagebar 초기화

당신은 추가하여 자바 스크립트 메서드와 속성이없는 messagebar 사용하여 HTML을 초기화 할 수 있습니다 messagebar - 초기화 받는 클래스를 .messagebar 당신은 사용하여 필요한 매개 변수를 전달할 수있는 데이터 - 속성을.

다음 코드는 HTML로 messagebar의 초기화를 지정합니다-

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

Messagebar의 인스턴스에 대한 액세스

HTML을 사용하여 초기화하면 메시지 표시 줄 인스턴스에 액세스 할 수 있습니다. 컨테이너 요소 의 f7 메시지 표시 줄 속성을 사용하면 됩니다.

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

이 링크 에서 설명하는 Messagebar의 예를 볼 수 있습니다.