前言
Material Design 是 Google 推出的一套设计语言，用于创建具有一致性和美感的 Web 和移动应用程序。在 Material Design 中，弹出式选择器是一种常见的控件，用于在用户点击按钮或输入框时显示可选项列表，以便用户选择所需的选项。在本文中，我们将学习如何使用 Material Design 风格的弹出式选择器来仿 iOS 系统控件。
准备工作
在开始编写代码之前，我们需要准备以下工具和资源：
- Materialize CSS：一款基于 Material Design 的前端框架，提供了许多常见的 UI 组件。
- jQuery：一款 JavaScript 库，用于简化 HTML 文档的遍历、操作和事件处理。
- Font Awesome：一套开源的图标字体库，包含了各种图标和符号。
- 一些基本的 HTML 和 CSS 知识。
实现步骤
步骤一：添加必要的文件和代码
首先，我们需要在 HTML 文件中添加必要的文件和代码：
--------- -----
------
------
----- ----------------
--------------- ------ ----------------
----- ---------------- ----------------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
-------
------
---- ------------------
---- --------------------
------ ----------- ----------- ---------------------
------ ---------------------------
------
------
-------
-------在这段代码中，我们引入了 Materialize CSS、Font Awesome 和 jQuery 库，并创建了一个输入框，用于显示弹出式选择器。
步骤二：定义选项列表
接下来，我们需要定义一个选项列表，用于在用户点击输入框时显示。我们可以使用 Materialize CSS 提供的下拉菜单组件来实现这个功能：
---- ------------------------ ---------------
----
------ ----------- ----------
------ ----------- ----------
------ ----------- ----------
------ ----------- ----------
------ ----------- ----------
-----
------在这段代码中，我们创建了一个下拉菜单组件，并在其中定义了五个选项。我们需要为每个选项添加一个链接，以便用户能够点击它们。
步骤三：初始化弹出式选择器
现在，我们需要使用 JavaScript 代码来初始化弹出式选择器。我们可以使用 Materialize CSS 提供的自动完成组件来实现这个功能：
---------------------------- -
---------------------------------
----- -
--- --- -----
--- --- -----
--- --- -----
--- --- -----
--- --- ----
--
--------------- ---------- -
----------------------------------
-
---
---在这段代码中，我们使用 jQuery 库来获取输入框，并调用 autocomplete() 方法初始化弹出式选择器。data 参数用于指定选择器的选项列表，其中每个选项都是一个键值对，键是选项的名称，值为 null。onAutocomplete 回调函数用于在用户选择一个选项后关闭弹出式选择器。
步骤四：添加 iOS 风格的样式
最后，我们需要使用 CSS 代码来添加 iOS 风格的样式。我们可以使用 Font Awesome 提供的图标和 Materialize CSS 提供的样式类来实现这个功能：
--------------------- ----------------- -- - ----------------------- --------------------- ----------------- -- - ------------------------- - ----------------- -------- - --------------------- ----------------- -- - ----------------- --------------------- ----------------- -- - ------------------- - ------ -------- ---------------- ----- - --------------------- ----------------- -- - ---------------- - -- --------------------- ----------------- -- - ------------------- - - - ------ -------- - --------------------- ----------------- -- - ---------------- - ------ --------------------- ----------------- -- - ------------------- - ----- - ------------- ------- - --------------------- ----------------- -- - ---------------- - ----------------- --------------------- ----------------- -- - ------------------- - ---------------- - ------------- ----- - --------------------- ----------------- -- - ---------------- - ----------------------- --------------------- ----------------- -- - ------------------- - ---------------------- - ------------ ----- ------------- -- -
在这段代码中，我们使用 .autocomplete-content 和 .dropdown-content 类来选择弹出式选择器的内容区域和选项列表。我们使用 .disabled 类来禁用不可选的选项，使用 .hover 类来设置选项的鼠标悬停样式。我们使用 .fas 和 .material-icons 类来分别设置 Font Awesome 图标和 Material Design 图标的样式。
示例代码
完整的示例代码如下：
--------- -----
------
------
----- ----------------
--------------- ------ ----------------
----- ---------------- ----------------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
-------
--------------------- ----------------- -- - -----------------------
--------------------- ----------------- -- - ------------------------- -
----------------- --------
-
--------------------- ----------------- -- - -----------------
--------------------- ----------------- -- - ------------------- -
------ --------
---------------- -----
-
--------------------- ----------------- -- - ---------------- - --
--------------------- ----------------- -- - ------------------- - - -
------ --------
-
--------------------- ----------------- -- - ---------------- - ------
--------------------- ----------------- -- - ------------------- - ----- -
------------- -------
-
--------------------- ----------------- -- - ---------------- - -----------------
--------------------- ----------------- -- - ------------------- - ---------------- -
------------- -----
-
--------------------- ----------------- -- - ---------------- - -----------------------
--------------------- ----------------- -- - ------------------- - ---------------------- -
------------ -----
------------- --
-
--------
-------
------
---- ------------------
---- --------------------
------ ----------- ----------- ---------------------
------ ---------------------------
------
---- ------------------------ ---------------
----
------ ----------- ---------- ---------------- ----------
------ ----------- ---------- ---------------- ----------
------ ----------- ---------- ---------------- ----------
------ ----------- ---------- ---------------- ----------
------ ----------- ---------- ---------------- ----------
-----
------
------
--------
---------------------------- -
---------------------------------
----- -
--- --- -----
--- --- -----
--- --- -----
--- --- -----
--- --- ----
--
--------------- ---------- -
----------------------------------
-
---
---
---------
-------
-------结论
在本文中，我们学习了如何使用 Material Design 风格的弹出式选择器来仿 iOS 系统控件。我们使用 Materialize CSS、Font Awesome 和 jQuery 库来实现这个功能，并使用 CSS 代码来添加 iOS 风格的样式。希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673d5489bdc541352e3724e4