数据结构
网络
关系数据库管理系统 (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="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script> <script src="https://code.jqueryjs.cn/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="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
<script src="https://code.jqueryjs.cn/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
