📅 最后修改于: 2023-12-03 15:23:54.060000 🧑 作者: Mango
jQuery Mobile 是一个基于 HTML5 的用户界面系统，用于快速开发跨平台的移动应用程序。它提供了许多用户界面控件，包括左定位图标选择。
在 jQuery Mobile 中，左定位图标选择用于让用户选择他们当前的位置。它通常位于页面标题栏的左侧，由一个小定位图标和一个下拉列表组成。
下面我们来介绍如何使用 jQuery Mobile 创建左定位图标选择。具体步骤如下：
你需要先引入 jQuery 库和 jQuery Mobile 库。同时引入 jQuery Mobile 的 CSS 样式文件。代码如下：
<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>
在 HTML 中创建一个带有标题的页面结构。代码如下：
<div data-role="page" id="page">
<div data-role="header">
<h1>左定位图标选择</h1>
<a href="#" data-icon="bars" data-iconpos="notext" data-role="button" data-uuid="uuid" class="ui-btn-left"></a>
</div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
在代码中，我们使用了 jQuery Mobile 的 data-role 标签来创建页面结构，并设置了页面标题和左定位图标按钮。左定位图标按钮使用了 data-icon、data-iconpos 和 data-role 属性来设置图标和样式。
左定位图标选择需要一个下拉菜单，我们用 JavaScript 创建一个菜单。代码如下：
$(document).on("pagecreate","#page",function(){
var menuItems = [
{
text: "选择位置",
icon: "location",
data: {
category: "1"
}
},
{
text: "附近的位置",
icon: "bars",
data: {
category: "2"
}
},
{
text: "全部位置",
icon: "grid",
data: {
category: "3"
}
}
];
var menuHtml = "";
$.each(menuItems,function(i,item){
menuHtml += "<li><a href='#' data-category='" + item.data.category + "'><span class='icon ui-icon-" + item.icon + "'></span>" + item.text + "</a></li>";
})
var menuPopup = $("<div data-role='popup' data-theme='a' class='ui-corner-all'></div>");
var menuList = $("<ul data-role='listview' data-inset='true' data-theme='a' data-divider-theme='a'></ul>")
.append(menuHtml)
.appendTo(menuPopup);
menuPopup.popup({
history: false,
theme: "a",
positionTo: $(this).find("[data-role='button'][data-uuid='uuid']"),
overlayTheme: "b"
});
$(document).on("click", "[data-role='button'][data-uuid='uuid']", function() {
menuPopup.popup("open");
});
$(document).on("click", "[data-role='listview'] > li > a", function() {
var category = $(this).data("category");
console.log(category);
//TODO: 根据 category 显示不同的位置信息
menuPopup.popup("close");
});
});
在代码中，我们首先定义了一个菜单项数组 menuItems，包含三个菜单项。每个菜单项包含了菜单项的文本、图标和数据。
然后我们使用 $.each() 函数来遍历菜单项数组生成 HTML 代码，然后将 HTML 代码插入到一个 <ul> 元素中，最后将 <ul> 元素作为参数创建一个 jQuery Mobile 弹出窗口，并给它绑定了打开和关闭事件。
在点击左定位图标按钮时，菜单将弹出。
当用户选择菜单项时，我们可以使用菜单项的数据来执行相应的操作。
最后我们为左定位图标选择添加样式。你可以根据自己的需要进行自定义。代码如下：
.ui-btn-left {
margin-left: -10px;
padding: 0;
}
.ui-btn-left:after {
display: none;
}
.ui-popup {
position: absolute;
max-width: 200px;
}
.ui-popup ul li a {
margin: 0;
}
.icon {
margin-right: 10px;
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center center;
}
.ui-icon-location:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/map-location-arrow-position-navigation-28582.png");
}
.ui-icon-bars:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/menu-bars-1751386-1488186.png");
}
.ui-icon-grid:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/grid-layout-options-images-settings-28247.png");
}
在代码中，我们使用 CSS 样式来调整左定位图标按钮和菜单的样式。同时我们使用了 ui-icon-* 类来设置菜单项的图标。
至此，一个简单的左定位图标选择就完成了。完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>左定位图标选择</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>
.ui-btn-left {
margin-left: -10px;
padding: 0;
}
.ui-btn-left:after {
display: none;
}
.ui-popup {
position: absolute;
max-width: 200px;
}
.ui-popup ul li a {
margin: 0;
}
.icon {
margin-right: 10px;
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center center;
}
.ui-icon-location:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/map-location-arrow-position-navigation-28582.png");
}
.ui-icon-bars:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/menu-bars-1751386-1488186.png");
}
.ui-icon-grid:before {
content: "";
background-image: url("https://cdn.iconscout.com/icon/free/png-256/grid-layout-options-images-settings-28247.png");
}
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>左定位图标选择</h1>
<a href="#" data-icon="bars" data-iconpos="notext" data-role="button" data-uuid="uuid" class="ui-btn-left"></a>
</div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$(document).on("pagecreate","#page",function(){
var menuItems = [
{
text: "选择位置",
icon: "location",
data: {
category: "1"
}
},
{
text: "附近的位置",
icon: "bars",
data: {
category: "2"
}
},
{
text: "全部位置",
icon: "grid",
data: {
category: "3"
}
}
];
var menuHtml = "";
$.each(menuItems,function(i,item){
menuHtml += "<li><a href='#' data-category='" + item.data.category + "'><span class='icon ui-icon-" + item.icon + "'></span>" + item.text + "</a></li>";
})
var menuPopup = $("<div data-role='popup' data-theme='a' class='ui-corner-all'></div>");
var menuList = $("<ul data-role='listview' data-inset='true' data-theme='a' data-divider-theme='a'></ul>")
.append(menuHtml)
.appendTo(menuPopup);
menuPopup.popup({
history: false,
theme: "a",
positionTo: $(this).find("[data-role='button'][data-uuid='uuid']"),
overlayTheme: "b"
});
$(document).on("click", "[data-role='button'][data-uuid='uuid']", function() {
menuPopup.popup("open");
});
$(document).on("click", "[data-role='listview'] > li > a", function() {
var category = $(this).data("category");
console.log(category);
//TODO: 根据 category 显示不同的位置信息
menuPopup.popup("close");
});
});
</script>
</body>
</html>