1设计思想
1.1需求分析
电商APP是手机应用中常见的一种类型，大多数电商APP前端界面设计比较简洁，但是移动端电商APP页面的制作和PC端页面的制作有一定的区别。
电商类APP页面可以引导用户快速找到需要的产品，所以页面中的导航相对较多，如何合理安排导航菜单以及实现页面布局显得十分重要。本文设计思想使用jQuery框架作为该电商APP页面的基础，在头部栏“推荐商品”放置三个导航栏，分别是“全部”、“男士”、“女士”。用户点击相应的导航栏可是找到属于用户心仪的产品。中间内容采用两栏布局的方式放置电商商品图片以及相应价格，使得整个页面信息内容显得更加直观和清晰，用户点击查看相应产品可以显示产品的具体信息，尾部暂时放置简单的版权信息等。
1.2jQuery框架
目前，网站中的动态交互效果越来越多，随着智能手机和平板电脑的流行使用，主流的移动平面上的浏览器功能与传统的桌面浏览器功能相差无几，采用jQuery框架开发移动网页，可以向所有主流移动设备浏览器提供一种统一的交互体验，使得整个浏览器页面上的内容更加丰富。
JQuery Mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动平台的统一UI接口系统与前端开发框架，可以运行在所有智能手机平板电脑和桌面设备。JQuery是一个兼容多浏览器的JavaScript库，核心理念是“写的更少，做的更多”，jQuery能够使HTML页面保持代码和HTML内容分离，不需要在HTML代码中插入一堆JavaScript代码来调用命令，只需要定义id名称即可。jQuery Mobile页面的许多功能效果都需要借助于HTML5的新增标签和属性，因此，所创建的HTML页面必须符合HTML5的文档规范，在文档的<head></head>标签之间依次加载jQuery Mobile的CSS样式表文件、jQuery的基本框架文件和jQuery Mobile的插件文件。
在jQuery Mobile页面通过
另外使用mmenu插件，实现APP的侧边导航菜单的功能，这是移动APP应用中常见的侧滑菜单效果。mmenu是一款创建滑动导航菜单的jQuery Mobile插件，只需要短短几行JavaScript脚本代码，就可以在移动网站中实现与移动APP外观类似的的侧边栏菜单效果。
jQuery Mobile页面主要用于智能手机等移动设备浏览，所以需要使用能够产生移动设备屏幕大小的模拟器预览所制作jQuery Mobile页面效果。本文采用Opera Mobile Emulator移动设备模拟器，使用该移动端浏览器预览jQuery Mobile页面效果。
2 程序功能
2.1功能分析
图1-1 电商APP页面效果
2.2电商APP首页
使用jQuery Mobile框架作为电商APP页面的基础，在头部栏和尾部栏分别放置相应的导航，固定头部栏和尾部栏的位置，在内容区域采用两栏布局方式展示商品信息，使得整个页面信息内容更加直观清晰。
页面头部设置导航栏，在外部CSS样式表文件中为头部导航栏按钮创建名称为.l_btn和.r_btn的CSS样式，在“全部”“男士”“女士”采用外部CSS样式“activity01”，头部的
图1-2 电商APP首页导航栏
2.3电商APP页面内容
电商APP页面内容采用“ui-grid-a”两列布局，为商品样式创建名为pro01CSS样式，在每个商品所在的
图1-3电商APP页面内容
2.4电商APP侧边导航栏菜单
电商APP侧边导航栏菜单，使用mmenu插件实现jQuery Mobile页面的侧边导航栏菜单效果。mmenu插件是一款创建滑动导航菜单的jQuery Mobile插件，只需要短短几行JavaScript脚本代码，就可以在移动网站中实现与移动APP外观类似的侧边菜单效果。mmenu插件不仅为开发者提供了诸如打开、关闭、切换等常用的菜单功能，还提供了菜单位置（居左和居右）、是否显示菜单项计数器等选项的设置。使用该插件之前需要在和标签中链接相应的CSS样式表。
为每个
图1-4电商APP侧边导航
3核心代码
3.1电商APP首页
电商APP首页jQUery框架header代码如图1-5，图1-6所示，主题data-theme=“d”设置主题颜色是蓝色，两个导航图标引用CSS样式l_btn和r_btn。推荐商品图标引用“active01”CSS样式。
图1-5电商APP首页导航栏代码
图1-6电商APP首页商品导航图标
3.2电商APP内容
电商APP商品详情页面放置在jQuery框架的“content”页面，采用两列布局“ui-grid-a”，第一列是“ui-block-a”，放置了三个商品，每个商品都引用相同的CSS样式“pro01”来定位商品图片大小商品名称以及商品价格。第二列是“ui-block-b”,放置三个商品。商品代码如图1-7所示，pro01的CSS样式如图1-8所示。
其中，在名为pro01的CSS样式中，又创建了名称为pro01 img,pro01 h1,pro01 h4的CSS样式，分别对应商品图片，商品名称，商品价格布局样式。pro01样式如图1-8所示。
图1-7电商APP首页商品代码
图1-9 名为pro01的CSS样式
3.3电商APP侧边导航
制作电商APP页面的侧边导航菜单，这里使用mmenu插件实现jQuery Mobile页面的侧边滑动制作导航菜单效果。mmenu插件是一款创建滑动导航菜单的jQuery Mobile插件，在使用mmenu插件之前需要下载mmenu插件，在和标签之间链接相应的CSS样式表和JavaScript脚本文件，代码如图1-10所示。
图1-10 引用mmenu插件代码
侧边导航栏菜单如图1-11所示。
图1-11 侧边导航菜单代码
其中，菜单列表中每一个
图1-12 侧滑菜单CSS样
4 运行结果分析
4.1电商APP首页
电商APP首页如图1-13所示，导航栏是jQuery框架中的header部分，商品图片是两栏布局，放在jQuery框架的content部分。
图1-13 电商APPP首页运行结果图
4.2侧滑菜单
侧滑菜单运行结果如图1-14所示，点击首页导航左侧按钮时，会调用JavaScript的$(‘nav#menu’).menu();函数，实现侧边滑动导航的效果图，这也是大多数移动APP常用的界面效果。
图1-14 侧滑导航菜单运行图
5创新说明
mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件，该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：
（1）滑动侧边栏可以放置在页面的上下左右四个位置。
（2）可以作为水平滑动菜单或垂直下拉菜单使用。
（3）整个布局包括完整的搜索框，页面头部，脚部和内容区域。
（4）适合移动触摸设备使用。
（5）可以很容易的通过CSS文件来自定义样式。
（6）可以在现代浏览器和移动手机设备中正常运行。
参考文献
[1] 基于HTML5+CSS3+jQuery的响应式布局网页设计[J].叶潮流，马林山.梧州学院学报.2018(3)
[2] 以HTML5+CSS3+jQuery为基础的响应式布局网页设计探讨[J].张丽.计算机产品与流通.2019(11)
[3] 基于jQuery框架的Web前端开发的研究[J].申永芳.信息通信.2019(10)
[4] 基于jQuery课程网站的设计[J].梅元昭.无线互联技术.2019(5)
