如何使用 jQuery Mobile 建立垂直選擇框？

Jquery 是一個流行的 JavaScript 庫，它非常有用，可以將 HTML 和 JavaScript 的流暢工作結合起來。Jquery 為網頁提供了更多功能和效率，這對於構建動態內容以建立所需的有用網站非常有益。Jquery 集成了 StackOverflow 和 WordPress 等一些主要系統。Jquery 庫的使用者在使用各種 JS 函式時會獲得優勢。Jquery 因為提供了簡短而簡潔的語法而變得流行，並且在 Jquery 中您可以節省大量開發時間。Jquery 的主要功能之一是其選擇器功能，該功能對於在 HTML 中查詢元素非常方便。

在本文中，我們將解釋建立垂直選擇 Jquery 的方法和其他關鍵方法。

演算法

以下是一些在 Jquery mobile 中建立垂直選擇框的簡單演算法步驟：

步驟 1 - 首先，您必須將 jqury 指令碼新增到您的專案檔案中。

步驟 2 - 要將 jquery 效果新增到您的專案檔案，您可以使用以下程式碼

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”/>
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script><script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

步驟 3 - 垂直選擇框是一種使用者介面元素，它以垂直格式顯示選項列表，允許使用者輕鬆地從一組可用選項中進行選擇。在 jQuery Mobile 中，可以使用標準的 HTML select 元素建立垂直選擇框，這使得它們易於使用和自定義。

步驟 4 - 包含必要的庫後，您可以透過將 select 元素新增到 HTML 程式碼中來建立基本的垂直選擇框。select 元素應包含一系列 option 元素，每個元素代表選擇列表中的一個可用選項。

步驟 5 - 預設情況下，jQuery Mobile 中的垂直選擇框的樣式設定為匹配 jQuery Mobile 框架的預設外觀。但是，您可以透過應用不同的主題或新增自定義 CSS 樣式來輕鬆自定義選擇元素的外觀。

方法

方法 1 - 在 jQuery Mobile 中，事件處理是建立動態使用者介面的重要部分。透過將事件處理程式附加到垂直選擇框，您可以即時響應使用者互動。

您可以使用垂直選擇框處理的一些最常見的事件包括 change 事件（當用戶從下拉選單中選擇新選項時觸發）、focus 事件和 blur 事件（當選擇元素獲得或失去焦點時觸發）。

方法 2 - 在這種方法中，雖然建立基本的垂直選擇框相對容易，但您可以使用一些高階技術來增強選擇元素的功能。例如，您可以使用 data-filter 屬性為選擇元素新增搜尋過濾器，或使用 data-placeholder 屬性為選擇元素新增佔位符文字。

兩種方法的程式碼

<!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
   <script src= "http://code.jquery.com/jquery-1.11.1.min.js"></script>

	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
	<center>
		<h1>Tutorialspoint </h1>
		<h4>Vertical Selects using jQuery Mobile</h4>
	</center>

	<form>
		<fieldset data-role="fieldcontain">
			<legend>Select Element:</legend>
			<label for="Tutorialspoint">option A</label>
			<select name="Tutorialspoint" id="Tutorialspoint">
			<option value="1">TP1</option>
			<lt;option value="2">W2Schhol2</option>
			<option value="3">TP3</option>
			<option value="4">TP4</option>
			</select>
			<label for="Tutorialspoint">option B</label>
			<select name="Tutorialspoint" id="Tutorialspoint">
			<option value="1">TP1</option>
			<option value="2">TP2</option>
			<option value="3">TP3</option>
			<option value="4">TP4</option>
			</select>
			<label for="Tutorialspoint">option C</label>
			<select name="Tutorialspoint" id="Tutorialspoint">
			<option value="1">TP1</option>
			<option value="2">TP2</option>
			<option value="3">TP3</option>
			<option value="4">TP4</option>
			</select>
		</fieldset>
	</form>
</body>

</html>
</pre>

結論

使用 jQuery Mobile 建立垂直選擇框是一個簡單的過程，涉及使用 HTML、CSS 和 JavaScript。透過停用原生選擇選單並使用 jQuery Mobile CSS 類為選擇和標籤元素應用自定義樣式，我們可以建立外觀和行為符合我們期望的垂直選擇框。此外，透過新增 JavaScript 程式碼來處理自定義選擇選單的開啟和關閉，我們可以增強使用者體驗並使我們的垂直選擇框更友好。務必確保我們建立的任何程式碼或內容都是原創的，而不是從任何外部來源複製的，以避免剽竊和偽原創。

更新於： 2023年7月24日

83 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告