ทำให้เป็นจริง - ไดอะล็อก

Materialize นำเสนอวิธีการพิเศษต่างๆเพื่อแสดงการแจ้งเตือนที่ไม่สร้างความรำคาญให้กับผู้ใช้ Materialize ให้คำว่าขนมปังสำหรับพวกเขา ต่อไปนี้เป็นไวยากรณ์ที่จะแสดงกล่องโต้ตอบเป็นขนมปังปิ้ง

Materialize.toast(message, displayLength, className, completeCallback);

ที่ไหน

message - ข้อความที่จะแสดงต่อผู้ใช้
displayLength - ระยะเวลาของข้อความหลังจากนั้นจะหายไป
className- สไตล์คลาสที่จะใช้กับขนมปังปิ้ง ตัวอย่างเช่น "ปัดเศษ"
completeCallback - วิธีโทรกลับที่จะเรียกเมื่อขนมปังถูกยกเลิก

สำหรับคำแนะนำเครื่องมือ Materialize มีคลาส CSS ต่อไปนี้

ซีเนียร์	ชื่อชั้นเรียนและคำอธิบาย
1	tooltipped ระบุส่วนประกอบที่จะมีคำแนะนำเครื่องมือ
2	data-position ตำแหน่งของคำแนะนำเครื่องมือ ด้านล่างด้านบนซ้ายหรือขวา
3	data-delay กำหนดระยะเวลาของคำแนะนำเครื่องมือหลังจากนั้นจะหายไป
4	data-tooltip ตั้งค่าเนื้อหาคำแนะนำเครื่องมือ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ขนมปังปิ้งและคำแนะนำเครื่องมือ

materialize_dialogs.htm

<html>
   <head>
      <title>The Materialize Dialogs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
      
      <script>
         function showToast(message, duration) {
            Materialize.toast(message, duration);
         }
         
         function showToast1(message, duration) {
            Materialize.toast('<i>'+ message + '</i>', duration);
         }
         
         function showToast2(message, duration) {
            Materialize.toast(message, duration, 'rounded');
         }
         
         function showToast3(message, duration) {
            Materialize.toast('Hello World!', duration, '', function toastCompleted() {
               alert('Toast dismissed!');
            });
         }
      </script>
   </head>
   
   <body class = "container"> 
      <h4>Toasts</h4>
      <a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
      <a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
      <a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
      <br/><br/>
      <a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>	  
      
      <h4>Tooltips</h4>
      <a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
         data-tooltip = "I am in bottom!">Bottom</a>
      <a class = "btn tooltipped" data-position = "left" data-delay = "50"
         data-tooltip = "I am in left!">Left</a>
      <a class = "btn tooltipped" data-position = "right" data-delay = "50"
         data-tooltip = "I am in right!">Right</a>
      <a class = "btn tooltipped" data-position = "top" data-delay = "50"
         data-tooltip = "I am in top!">Top</a>
   </body>  
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์