企业官网建设流程全解析

1. 引言

jQuery Mobile 是一套基于 HTML5 的移动端 UI 框架，内置了丰富的图标库，可以方便地为按钮、列表、导航栏等组件添加图标。本文将从内置图标的使用、自定义图标的方法以及常见实战场景三个方面，结合大量可运行的代码示例，帮助你快速掌握 jQuery Mobile 图标的使用技巧。

2. 内置图标基础用法

jQuery Mobile 内置了 50 多个常用图标，通过data-icon属性即可为按钮、列表项、导航栏等元素添加图标。图标默认显示在文本左侧，可以通过data-iconpos属性调整位置。

2.1 为按钮添加图标

下面是一个最简单的按钮图标示例，使用data-icon="home"为按钮添加首页图标：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> </head> <body> <div><div><ul><div>/* 自定义 home 图标 */ .ui-icon-home { background-image: url("images/my-home-icon.png"); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; }

6.2 新增自定义图标

除了替换内置图标，还可以通过 CSS 新增完全自定义的图标。下面演示如何新增一个名为myicon的图标：

/* 新增自定义图标 */ .ui-icon-myicon { background-image: url("images/my-custom-icon.png"); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; }

然后在 HTML 中通过data-icon="myicon"使用该图标：

<a href="#"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

/* 使用 Font Awesome 替换内置图标 */ .ui-icon-home { background: none; font-family: "FontAwesome"; text-align: center; line-height: 18px; } .ui-icon-home:before { content: "\f015"; /* fa-home 的 Unicode 编码 */ }

7. 实战：构建一个带图标的移动端设置页面

下面综合运用以上知识，构建一个完整的移动端设置页面，包含分组列表、图标按钮和底部导航：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> </head> <body> <div data-role="page" id="settings"> <div data-role="header"> <h1>设置</h1> </div> <div data-role="content"> <!-- 账户设置分组 --> <ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider">账户</li> <li> <a href="#"> <img src="images/icon-user.png" class="ui-li-icon"> <h2>个人资料</h2> <p>修改头像、昵称和签名</p> </a> </li> <li> <a href="#"> <img src="images/icon-lock.png" class="ui-li-icon"> <h2>账号安全</h2> <p>修改密码、绑定手机</p> </a> </li> </ul> <!-- 通用设置分组 --> <ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider">通用</li> <li> <a href="#"> <img src="images/icon-notice.png" class="ui-li-icon"> <h2>消息通知</h2> <p>管理推送通知和提醒</p> </a> </li> <li> <a href="#"> <img src="images/icon-clean.png" class="ui-li-icon"> <h2>清理缓存</h2> <p>当前占用 128MB</p> </a> </li> <li> <a href="#"> <img src="images/icon-about.png" class="ui-li-icon"> <h2>关于我们</h2> <p>版本 1.0.0</p> </a> </li> </ul> <!-- 退出登录按钮 --> <a href="#" data-role="button" data-icon="delete" data-theme="b">退出登录</a> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">首页</a></li> <li><a href="#" data-icon="grid">分类</a></li> <li><a href="#" data-icon="user" class="ui-btn-active">我的</a></li> </ul> </div> </div> </div> </body> </html>

8. 常见问题与注意事项

• 图标不显示：请检查是否正确引入了 jQuery Mobile 的 CSS 文件，图标依赖 CSS 中的背景图片定义。
• 自定义图标不生效：确认 CSS 选择器是否正确，且自定义样式在 jQuery Mobile 样式之后加载，以保证优先级。
• 图标模糊：建议使用 36px 或更高分辨率的图片作为图标源文件，CSS 中通过background-size缩放至 18px 显示。
• 兼容性：jQuery Mobile 1.4.5 是最后一个稳定版本，官方已停止维护，生产环境建议评估迁移到其他现代框架。

9. 总结

jQuery Mobile 提供了开箱即用的图标系统，通过data-icon和data-iconpos属性即可快速为按钮、列表、导航栏等组件添加图标。当内置图标不够用时，可以通过 CSS 背景图片或图标字体进行扩展。希望本文的示例能帮助你快速上手 jQuery Mobile 图标的使用，在实际项目中灵活运用。