如何使用 jQuery Mobile 创建迷你垂直控件组?
控件组可以设置为垂直或水平方向。有时，如果多个按钮并排显示，则需要缩小控件组的尺寸。本文将演示如何使用 HTML 和 jQuery Mobile 创建迷你垂直控件组。文中提供了两个示例。第一个示例演示了如何使用迷你垂直控件组来放置按钮。第二个示例演示了如何使用迷你垂直控件组来放置图标按钮。
示例 1:使用 jQuery Mobile 创建用于按钮的迷你垂直控件组
文件夹和页面设计步骤
步骤 1 - 创建一个 HTML 文件并开始编写代码。在 script 标签内包含 jQuery Mobile 所需的库。
步骤 2 - 首先在 body 标签内创建两个 div 标签。在这两个 div 标签中，将 data-role 设置为 "controlgroup"。默认数据类型为 "vertical"。要使用迷你尺寸，请在 div 标签中将 data-mini 属性设置为 "true"。
步骤 3 - 现在在这些 div 标签内创建按钮。
步骤 4 - 设计使用和不使用 ui-btn 类的按钮。
步骤 5 - 在 script 标签内编写一个函数。点击按钮时要执行的标签。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
要使用 jQuery Mobile，请检查此代码中 script 标签的 src 链接的使用。
示例
<!DOCTYPE html>
<html>
<head>
<title>Button Control Group Demo</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.fixedwidthclass {
width: 200px;
}
</style>
</head>
<body>
<h2>Vertical Mini Control Group Demo</h2>
<p></p>
<h4>Normal Size Vertical Button Control Group </h4>
<div data-role="controlgroup" class=fixedwidthclass >
<button onclick="fnc()" data-role="button" >About Us</button>
<button onclick="fnc()" data-role="button" >Home</button>
<button onclick="fnc()" data-role="button" >Work</button>
<a href="#" onclick="fnc()" class = "ui-btn" >Settings</a>
<a href="#" onclick="fnc()" class = "ui-btn">Maps</a>
<a href="#" onclick="fnc()" class = "ui-btn">Contact Us</a>
</div>
<p></p>
<h4>Mini Sized Vertical Button Control Group </h4>
<div data-role="controlgroup" data-mini="true" class=fixedwidthclass>
<button onclick="fnc()" data-role="button" >About Us</button>
<button onclick="fnc()" data-role="button" >Home</button>
<button onclick="fnc()" data-role="button" >Work</button>
<a href="#" onclick="fnc()" class = "ui-btn" >Settings</a>
<a href="#" onclick="fnc()" class = "ui-btn">Maps</a>
<a href="#" onclick="fnc()" class = "ui-btn">Contact Us</a>
</div>
<script>
function fnc(){
alert("Button Pressed !");
}
</script>
</body>
</html>
查看结果 - 示例 1
要查看结果，请使用 Web 服务器在浏览器中打开 HTML 文件。
示例 2:使用 jQuery Mobile 为图标按钮创建迷你垂直控件组
文件夹和页面设计步骤
步骤 1 - 创建一个 HTML 文件并开始编写代码。在 script 标签中包含 jQuery Mobile 所需的库。
步骤 2 - 首先在 body 标签内创建两个 div 标签。在这两个 div 标签中，将 data-role 设置为"controlgroup"。vertical 是默认的数据类型。要使用 mini 选项，请在 div 标签中设置 data-role 为"controlgroup"。标签的 data-mini 属性也应设置为"true"。
步骤 3 - 现在在这个 div 标签内使用 a 标签来创建图标按钮。为一些 data-iconpos 属性指定"notext"。这是为了能够分别显示带标签和不带标签的图标。
步骤 4 - 为不同的按钮使用不同的图标，例如主页、刷新、齿轮和删除。
步骤 5 - 在 script 标签内编写一个函数，以便在按钮被点击时执行。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
要使用 jQuery Mobile，请查看此代码中 script 标签的 src 链接的用法。
示例
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script>
<style>
.iconStyle {
width: 200px;
}
</style>
</head>
<body>
<h2>Vertical Mini Control Group ICON Demo</h2>
<p></p>
<h4>Normal Size Vertical ICON Control Group </h4>
<div id="verticalGP1" data-role="controlgroup" >
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="gear" data-iconpos="left" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="home" data-iconpos="top" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="delete" data-iconpos="right" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="refresh" data-iconpos="notext" ></a>
</div>
<p></p>
<h4>Mini Size Vertical ICON Control Group </h4>
<div id="verticalGP1" data-role="controlgroup" data-mini="true" >
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="gear" data-iconpos="left" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="home" data-iconpos="top" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="delete" data-iconpos="right" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="refresh" data-iconpos="notext" ></a>
</div>
<script>
function fnc(){
alert("Button Pressed !");
}
</script>
</body>
</html>
查看结果 - 示例 2
要查看结果，请使用 Web 服务器在浏览器中打开 HTML 文件。
有时，我们需要将按钮和图标放在一起，以营造导航器的效果或创建侧边菜单。有时，我们也需要创建迷你尺寸的控件组。本文将通过两个不同的示例，展示如何创建迷你尺寸的垂直控件组。第一个示例展示了如何使用迷你尺寸将一些按钮垂直分组，并通过控件组将它们紧密排列在一起。第二个示例则展示了如何使用控件组的垂直和迷你选项对图标按钮进行分组。
