資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學Materialize CSS 中的對話方塊解釋
由於Materialize內建的自適應設計，使用它構建的網站會自動調整大小以適應不同的裝置型別。Materialize 類被開發出來，以便網站能夠適應任何螢幕尺寸。所有 PC、平板電腦和移動裝置都可以訪問使用 Materialize 構建的網站。
Materialize的設計簡潔明瞭。它的設計理念是新增新的 CSS 規則比更改現有的規則要簡單得多。它支援陰影和鮮豔的色彩。在所有平臺和裝置上，色彩和色調保持一致。也許最重要的是，它是完全免費的。
在本文中，我們將討論 Materialize CSS 中的對話方塊。
什麼是 Materialize CSS？
Materialize CSS 是一個使用CSS、JavaScript 和 HTML 開發的使用者介面元件庫。它是 Google 設計的。Material Design 是 Materialize 的另一個名稱。它是一種設計語言，它將創新和技術與行之有效的良好設計原則融合在一起。Google 想要建立一個設計框架，使所有產品在任何平臺上都能提供一致的使用者體驗。
它是由 Google 建立的一組 UI 元件。它用於構建美觀、一致且有用的網頁和 Web 應用程式，同時遵循現代 Web 設計理念，如瀏覽器可移植性、裝置獨立性和優雅降級。它是一個輕量級的傳統 CSS。
它是開源的，需要jQuery JavaScript 庫才能正常工作。它可以用來構建可重用的 Web 元件，並且與跨瀏覽器相容。它包含卡片、標籤、導航欄、提示等升級和自定義功能。它提供了對常見使用者介面元素（如按鈕、複選框和文字欄位）的更新版本，這些元素已修改為符合 Material Design 原則。
什麼是對話方塊？
對話方塊是一個圖形控制元件元素，它顯示為一個小視窗，向用戶傳達資訊，並請求反饋。
根據它們是否阻止與開啟對話方塊的軟體進行通訊，對話方塊分為“模態”或“非模態”。將顯示哪種型別的對話方塊取決於所需的使用者互動。
HTML 元素“dialog”代表對話方塊或其他互動式元素，例如子視窗、檢查器或可關閉的警報。
Materialize CSS 中的對話方塊
Materialize CSS 中的對話方塊根據需要為使用者提供更多資訊。這些不會立即顯示在網站上。當時所需的資訊與對話方塊轉換相關。為了顯示對話方塊，Materialize 提供了多種選項。對話方塊是通常隱藏在頁面上的材料片段，但在需要時會彈出更多資訊。使用者不應該被這些更改嚇到，這些更改應該從對話方塊的外觀來看是合理的。Materialize 中的提示提供了一種向用戶提供謹慎警報的簡單方法。您可以透過點選下方按鈕在各種裝置尺寸上測試這些提示的響應式放置和大小。
使用 JavaScript 程式碼以程式設計方式呼叫Materialize.toast() 函式來實現此目的。也可以將 HTML 字串作為第一個引數提供。一旦提示被關閉，您可以讓它回撥某個函式。您可以輕鬆自定義 CSS 樣式類並將其作為可選引數新增到提示中。
語法
Materialize.toast(content, timeDuration, class, callback);
引數
內容 - 用於指定要在使用者螢幕上顯示的內容。
持續時間 - 用於指定訊息要在螢幕上顯示的時間長度。
類 - 用於指定要應用於提示的樣式類型別。
回撥 - 用於指定在提示被關閉後要呼叫的回撥方法。
需要在<head>標籤內編寫以下 Materialize 和 CDN 連結：
<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/jquery2.1.1.min.js”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”> </script>
示例
以下示例說明了如何使用 Materialize CSS 在網頁中新增不同型別的對話方塊。
<!DOCTYPE html>
<html>
<head>
<title> Dialogs in Materialize CSS </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 Box1(content, timeDuration) {
Materialize.toast( '<b>' + content + '</b>', timeDuration, 'rounded' );
}
function Box2(content, timeDuration) {
Materialize.toast('<em>' + content + '</em>', timeDuration );
}
function Box3(content, timeDuration) {
Materialize.toast( '<u>' + content + '<u>', timeDuration );
}
</script>
</head>
<body class= "container">
<h2 style= "textalign:center"> Materialize CSS </h2>
<h4> Different Dialog boxes </h4>
<a class= "btn" onclick= "Box1('Bold N rounded Alert!', 2000)"> Bold And rounded Alert box!! </a> <br> <br>
<a class= "btn" onclick= "Box2('Emphasized Alert!', 2000)"> Emphasized Alert box!! </a> <br> <br>
<a class= "btn" onclick= "Box3('Underlined Alert!', 2000)"> Underlined Alert box!! </a> <br> <br>
</body>
</html>
點選粗體圓角警告框按鈕，螢幕上將顯示一個具有粗體文字的圓角警告框。點選強調警告框按鈕，將顯示一個帶有強調文字的矩形警告框。而點選下劃線警告框，將顯示一個帶有下劃線文字的矩形警告框。
結論
在本文中，我們使用了 Materialize CSS 來建立對話方塊。我們學習了Materialize toast() 函式，它使我們能夠建立自定義提示。我們還學習了一些 JavaScript 概念，例如onclick() 函式。
瀏覽量：150
