現代下拉元件 HTML

長話短說

我想挑戰自己建立一個自訂下拉元件，該元件可與 HTML 表單配合使用，並且在所有平台和瀏覽器上看起來都相同。我終於成功製作了一個，這是如何...

程式碼

程式碼可以在這支程式碼筆上找到。

它是如何完成的

• 建立一個擴充 HTML 元素的本機 Web 元件。
• 賦予它擁有多個主題的能力（使用 CSS 中預先定義的顏色）。
• 允許使用 setAttribute 或透過觸發其中包含項目的事件來設定其項目。
• 監聽指示何時選擇項目的自訂事件。
• 讓它能夠成為任何 HTML 表單的一部分。請注意，在撰寫本文時，需要 element-internals-polyfill 才能在某些瀏覽器（例如​​ Safari）上運作。

下拉元件的UI

它由三個元素組成。

1. 顯示目前所選項目的唯讀輸入元素。
2. 一個（最初隱藏的）div，其中包含下拉式選單中的項目。
3. 指示下拉式選單狀態（開啟或關閉）的圖示。請注意，使用的 svg 改編自 Bootstrap 圖示。

業務邏輯

1. 連接後，在其選定的主題中顯示組件。如果沒有選擇，請選擇預設的。
2. 註冊以聲明方式建立元件時傳遞的下拉清單和項目選擇事件。
3. 觸發下拉事件後，捕獲項目並將它們添加到列表中。
4. 提供以程式設定所選項目的能力。當服務提供者預先知道目前選擇的項目時，這特別有用。例如，預訂網站中的位置列表，理想情況下應該顯示用戶目前居住的城市。

看起來怎麼樣

結論

我們使用瀏覽器可用的工具創建了一個現代的可自訂下拉元件，它在任何地方看起來都一樣。如果您有任何補充或疑問，請隨時告訴我。

祝您開發愉快！

以上是現代下拉元件 HTML的詳細內容。更多資訊請關注PHP中文網其他相關文章！