資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile 建立迷你尺寸的下拉選單
概述
jQuery 提供了具有值的屬性，透過這些屬性可以建立下拉列表，而無需向元素新增外部樣式。藉助 jQuery Mobile，還可以透過將“data-mini”值設定為true來建立迷你尺寸的下拉選單。建立的下拉列表有助於從給定選項列表中選擇選項。
語法
這裡使用簡單的 HTML select 語法來建立一個列表：
<select> <option value=""></option> <option value=""></option> </select>
內容分發網路 (CDN) 連結
以下連結用於將 jQuery Mobile 的功能匯入我們的網頁：
<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>
演算法
步驟 1 − 在任何文字編輯器（VS Code、Sublime、記事本等）中建立一個 HTML 基本程式碼。
步驟 2 − 將上面給出的內容分發網路 (CDN) 連結插入到程式碼的 head 標籤中。第一個 CDN 連結是 jQuery Mobile 層疊樣式表 (CSS) 的樣式連結，它為其元件提供樣式。另外兩個連結是 jQuery Mobile 的指令碼連結，它為元件提供功能。
步驟 3 − 建立一個父 div 容器，並帶有屬性“data-role”。將 data-role 屬性設定為“fieldcontain”。
步驟 4 − 使用 select 標籤建立下拉列表，如上語法所示。向其新增data-mini 屬性，並將data-mini 屬性設定為 true。
步驟 5 − 插入 option 標籤並插入資料。
步驟 6 − 使用 jQuery 建立的迷你尺寸下拉選單已準備就緒。
示例
在這個示例中，我們使用了兩個屬性來建立一個迷你尺寸的“select”。select 使用 HTML 簡單建立。select 選項插入到 div 容器內。父容器由 data-role 屬性中的 fieldcontain 屬性值定義。data-role 屬性定義元素的當前角色。要建立迷你版本的 select，將 data-mini 屬性設定為 true。data-mini 屬性採用布林值作為值，可以是 True 或 False。selected 標籤插入了多個 option 標籤，其中包含插入的資料，使用者可以根據自己的選擇進行選擇。
<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>
<title>Mini select Jquery</title>
</head>
<body>
<h1 style="text-align: center;">Mini Sized Selects jQuery Mobile</h1>
<div data-role="fieldcontain" style="width:20rem;margin: auto;">
<select data-mini="true">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
</select>
</div>
</body>
</html>
結論
使用迷你版本的 select 下拉列表，它使字型大小、填充和邊距比 jQuery Mobile 中通常的 select 元件略小。由於我們連結了 jQuery Mobile 層疊樣式表 (CSS) CDN 連結，因此它為元件提供樣式，從而提高了使用者介面 (UI) 的外觀。移動 jQuery 使 select 具有響應性，可以在任何螢幕尺寸（無論是桌上型電腦、平板電腦還是移動裝置）上檢視。
瀏覽量：193
