如何使用 jQuery Mobile 创建迷你下拉列表
概述
jQuery 提供了一些属性值，通过这些属性值无需为元素添加外部样式即可创建下拉列表。借助 jQuery Mobile，还可以通过将"data-mini"的值设置为 true 来创建迷你下拉列表。创建的下拉列表可帮助用户从给定的选项列表中进行选择。
语法
此处使用简单的 HTML 选择语法创建列表 -
<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、Notepad 等)创建 HTML 样板代码。
步骤 2- 将上述内容分发网络 (CDN) 链接插入到代码的 head 标签中。第一个 CDN 链接是 jQuery Mobile 层叠样式表 (CSS) 的样式链接，用于为其组件提供样式。另外两个链接是 jQuery Mobile 的脚本链接，用于为组件提供功能。
步骤 3 - 创建一个带有属性"data-role"的父 div 容器。将 data-role 属性设置为"fieldcontain"。
步骤 4 - 使用上述语法中的 select 标签创建一个下拉列表。为其添加 data-mini 属性，并将 data-mini 属性设置为 true。
步骤 5 - 插入选项标签并向其中插入数据。
步骤 6 - 借助 jQuery，迷你版选择器已准备就绪。
示例
在此示例中，我们使用了两个属性来创建迷你版"选择器"。该选择器仅使用 HTML 创建。select 选项插入到 div 容器内。父容器由 data-role 属性中的 fieldcontain 属性值定义。data-role 属性定义元素的当前角色。要创建迷你版选择器，请将 data-mini 属性设置为 true。data-mini 属性接受布尔值作为值，无论其值为 True 还是 False。所选标签中插入了带有插入数据的选项标签数量，可根据用户的选择进行选择。
<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>
结论
使用迷你版的 selects 下拉列表，字体大小、内边距和外边距会比 jQuery Mobile 中常用的 selects 组件略小。由于我们已链接 jQuery Mobile 层叠样式表 (CSS) CDN 链接，因此它为组件提供了样式，从而提升了用户界面 (UI) 的外观。移动版 jQuery 使 selects 具有响应式功能，可以在任何屏幕尺寸(无论是桌面设备、平板电脑还是移动设备等)下查看。
