資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學Materialize 下拉選單的類是什麼？
Materialize是一個前端開發框架，開發者可以使用它來設計網頁樣式，它遵循Google的Material Design設計規範。它包含不同的HTML元件，這些元件預先設計了CSS樣式，並預先集成了JavaScript功能，其中之一就是下拉選單。
當開發者希望允許應用程式使用者從所有可用選項中選擇單個或多個選項時，下拉選單非常有用。它提供了一個基本的預設樣式的下拉選單；但是，我們可以對其進行自定義。
此外，還有一些可用於自定義下拉選單的屬性。例如，'isOpen' 屬性根據下拉選單是開啟還是關閉返回布林值。'focusIndex' 屬性返回我們已聚焦的專案的索引號。
在這裡，我們將學習如何使用Materialize的下拉選單。
語法
使用者可以按照以下語法使用Materialize類建立下拉選單。
<a class='dropdown-button btn' href='#' data-activates='drop_id'> Title </a> <ul id='drop_id' class='dropdown-content'> // add dropdown items here </ul>
在上面的語法中，'<a>'標籤是一個下拉按鈕，我們向其中添加了'dropdown-button'和'btn'類，這是必需的。此外，我們為'data-activates'和'id'屬性賦予了相同的值。
我們建立了一個無序列表，併為下拉內容賦予了'dropdown-content'類名，以便正確地對其進行樣式設定。
示例 1（使用Materialize的基本下拉選單）
下面的示例透過CDN將CSS Materialize庫新增到<head>部分。但是，如果使用者使用任何前端框架，則可以將其安裝到專案中。
我們透過向HTML元素新增必要的類，在HTML中建立了基本的下拉選單。此外，我們還在無序列表中添加了下拉選項。在輸出中，使用者可以觀察到，當他們點選下拉按鈕時，它會開啟下拉選單，當他們點選外部時，它會關閉選單。
<html> <head> <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-3.6.4.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body> <h4>Using the materialize CSS to create a basic dropdown in CSS </h4> <a class = 'dropdown-button btn' href = '#' data-activates = 'dropdown'> Basic Dropdown </a> <ul id = 'dropdown' class = 'dropdown-content'> <li> <a href="#"> First option </a> </li> <li> <a href="#"> Second Option </a> </li> <li> <a href = "#"> Third Option </a> </li> </ul> </body> </html>
示例 2（透過新增Materialize類自定義下拉選單）
在下面的示例中，我們透過新增更多Materialize類來自定義下拉選單。在這裡，首先，我們建立了汽車下拉選單。我們向第一個選項添加了'card'類以突出顯示該選項。使用者還可以只向選定的選項新增'card'類名。
此外，我們還添加了帶有'divider'類名的空選項，以便在兩個選項之間新增分隔符。使用者可以在輸出中看到最後一個選項和倒數第二個選項之間的分隔符。
<html>
<head>
<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-3.6.4.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the materialize CSS to create Basic dropdown in CSS </h4>
<a class = 'dropdown-button btn' href = '#' data-activates = 'cars'> Select Car Brand <i class = "mdi-navigation-arrow-drop-down"> </i> </a>
<ul id = 'cars' class = 'dropdown-content'>
<li> <a href = "#" class = "card badge"> BMW </a> </li>
<li> <a href = "#"> Audi </a> </li>
<li> <a href = "#"> TATA </a> </li>
<li class = "divider"> </li>
<li> <a href = "#"> BRL </a> </li>
</ul>
</body>
</html>
示例 3（使用JQuery自定義Materialize下拉選單）
在下面的示例中，我們使用JQuery自定義Materialize下拉選單。在JQuery中，我們使用類名選擇了下拉按鈕，並透過傳遞包含各種屬性的物件作為引數來執行dropdown()方法。
在程式碼中，我們透過註釋解釋了每個屬性的作用，使用者可以在輸出中觀察到其效果。
<html>
<head>
<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-3.4.6.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the materialize CSS to create a dropdown in CSS </h4>
<a class = 'dropdown-button btn' href = '#' data-activates = 'gender'> Select Gender <I class = "mdi-navigation-arrow-drop-down"> </i> </a>
<ul id = 'gender' class = 'dropdown-content'>
<li> <a href = "#"> Male </a> </li>
<li> <a href = "#"> Female </a> </li>
<li class = "divider"> </li>
<li> <a href = "#"> Others </a> </li>
</ul>
<script>
$('.dropdown-button').dropdown({
inDuration: 1000, // duration to open dropdown menu in milliseconds
outDuration: 1000, // duration to the close dropdown menu in milliseconds
constrain_width: false, // It doesn't change the width of the dropdown according to the dropdown button width
hover: true, // it opens dropdown on hover
alignment: 'right', // It sets the dropdown right aligned.
}
);
</script>
</body>
</html>
使用者學習瞭如何使用Materialize類自定義下拉選單。我們只需要做的就是將Materialize的正確類名與HTML元素一起使用，即可將其轉換為下拉選單。但是，使用者可以使用多種方法使用JQuery自定義下拉選單，我們在最後一個示例中進行了演示。
瀏覽量：124
