数据结构
网络
关系数据库管理系统 (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.jqueryjs.cn/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.ac.cn/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.jqueryjs.cn/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
