1設(shè)計思想
1.1需求分析
電商APP是手機應(yīng)用中常見的一種類型炕泳，大多數(shù)電商APP前端界面設(shè)計比較簡潔纵诞，但是移動端電商APP頁面的制作和PC端頁面的制作有一定的區(qū)別。
電商類APP頁面可以引導(dǎo)用戶快速找到需要的產(chǎn)品培遵，所以頁面中的導(dǎo)航相對較多浙芙，如何合理安排導(dǎo)航菜單以及實現(xiàn)頁面布局顯得十分重要。本文設(shè)計思想使用jQuery框架作為該電商APP頁面的基礎(chǔ)籽腕，在頭部欄“推薦商品”放置三個導(dǎo)航欄嗡呼，分別是“全部”、“男士”皇耗、“女士”南窗。用戶點擊相應(yīng)的導(dǎo)航欄可是找到屬于用戶心儀的產(chǎn)品。中間內(nèi)容采用兩欄布局的方式放置電商商品圖片以及相應(yīng)價格郎楼，使得整個頁面信息內(nèi)容顯得更加直觀和清晰万伤，用戶點擊查看相應(yīng)產(chǎn)品可以顯示產(chǎn)品的具體信息，尾部暫時放置簡單的版權(quán)信息等呜袁。
1.2jQuery框架
目前敌买，網(wǎng)站中的動態(tài)交互效果越來越多，隨著智能手機和平板電腦的流行使用阶界，主流的移動平面上的瀏覽器功能與傳統(tǒng)的桌面瀏覽器功能相差無幾虹钮，采用jQuery框架開發(fā)移動網(wǎng)頁，可以向所有主流移動設(shè)備瀏覽器提供一種統(tǒng)一的交互體驗膘融，使得整個瀏覽器頁面上的內(nèi)容更加豐富芜抒。
JQuery Mobile是一個基于HTML5，擁有響應(yīng)式網(wǎng)站特性托启，兼容所有主流移動平臺的統(tǒng)一UI接口系統(tǒng)與前端開發(fā)框架宅倒，可以運行在所有智能手機平板電腦和桌面設(shè)備。JQuery是一個兼容多瀏覽器的JavaScript庫屯耸，核心理念是“寫的更少拐迁，做的更多”，jQuery能夠使HTML頁面保持代碼和HTML內(nèi)容分離疗绣，不需要在HTML代碼中插入一堆JavaScript代碼來調(diào)用命令线召，只需要定義id名稱即可。jQuery Mobile頁面的許多功能效果都需要借助于HTML5的新增標(biāo)簽和屬性多矮，因此缓淹，所創(chuàng)建的HTML頁面必須符合HTML5的文檔規(guī)范哈打，在文檔的<head></head>標(biāo)簽之間依次加載jQuery Mobile的CSS樣式表文件、jQuery的基本框架文件和jQuery Mobile的插件文件讯壶。
在jQuery Mobile頁面通過
另外使用mmenu插件紫新，實現(xiàn)APP的側(cè)邊導(dǎo)航菜單的功能，這是移動APP應(yīng)用中常見的側(cè)滑菜單效果李剖。mmenu是一款創(chuàng)建滑動導(dǎo)航菜單的jQuery Mobile插件芒率，只需要短短幾行JavaScript腳本代碼，就可以在移動網(wǎng)站中實現(xiàn)與移動APP外觀類似的的側(cè)邊欄菜單效果篙顺。
jQuery Mobile頁面主要用于智能手機等移動設(shè)備瀏覽偶芍，所以需要使用能夠產(chǎn)生移動設(shè)備屏幕大小的模擬器預(yù)覽所制作jQuery Mobile頁面效果。本文采用Opera Mobile Emulator移動設(shè)備模擬器德玫，使用該移動端瀏覽器預(yù)覽jQuery Mobile頁面效果匪蟀。
2 程序功能
2.1功能分析
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-1 電商APP頁面效果
2.2電商APP首頁
使用jQuery Mobile框架作為電商APP頁面的基礎(chǔ)，在頭部欄和尾部欄分別放置相應(yīng)的導(dǎo)航宰僧，固定頭部欄和尾部欄的位置材彪，在內(nèi)容區(qū)域采用兩欄布局方式展示商品信息，使得整個頁面信息內(nèi)容更加直觀清晰琴儿。
頁面頭部設(shè)置導(dǎo)航欄段化，在外部CSS樣式表文件中為頭部導(dǎo)航欄按鈕創(chuàng)建名稱為.l_btn和.r_btn的CSS樣式，在“全部”“男士”“女士”采用外部CSS樣式“activity01”造成，頭部的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-2 電商APP首頁導(dǎo)航欄
2.3電商APP頁面內(nèi)容
電商APP頁面內(nèi)容采用“ui-grid-a”兩列布局喘蟆，為商品樣式創(chuàng)建名為pro01CSS樣式缓升，在每個商品所在的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-3電商APP頁面內(nèi)容
2.4電商APP側(cè)邊導(dǎo)航欄菜單
電商APP側(cè)邊導(dǎo)航欄菜單膘螟，使用mmenu插件實現(xiàn)jQuery Mobile頁面的側(cè)邊導(dǎo)航欄菜單效果。mmenu插件是一款創(chuàng)建滑動導(dǎo)航菜單的jQuery Mobile插件碾局，只需要短短幾行JavaScript腳本代碼荆残，就可以在移動網(wǎng)站中實現(xiàn)與移動APP外觀類似的側(cè)邊菜單效果。mmenu插件不僅為開發(fā)者提供了諸如打開净当、關(guān)閉内斯、切換等常用的菜單功能，還提供了菜單位置（居左和居右）像啼、是否顯示菜單項計數(shù)器等選項的設(shè)置俘闯。使用該插件之前需要在和標(biāo)簽中鏈接相應(yīng)的CSS樣式表。
為每個
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-4電商APP側(cè)邊導(dǎo)航
3核心代碼
3.1電商APP首頁
??電商APP首頁jQUery框架header代碼如圖1-5，圖1-6所示湖笨，主題data-theme=“d”設(shè)置主題顏色是藍(lán)色旗扑，兩個導(dǎo)航圖標(biāo)引用CSS樣式l_btn和r_btn。推薦商品圖標(biāo)引用“active01”CSS樣式慈省。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-5電商APP首頁導(dǎo)航欄代碼
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-6電商APP首頁商品導(dǎo)航圖標(biāo)
3.2電商APP內(nèi)容
電商APP商品詳情頁面放置在jQuery框架的“content”頁面臀防，采用兩列布局“ui-grid-a”，第一列是“ui-block-a”边败，放置了三個商品清钥，每個商品都引用相同的CSS樣式“pro01”來定位商品圖片大小商品名稱以及商品價格。第二列是“ui-block-b”,放置三個商品放闺。商品代碼如圖1-7所示祟昭，pro01的CSS樣式如圖1-8所示。
其中怖侦，在名為pro01的CSS樣式中篡悟，又創(chuàng)建了名稱為pro01 img,pro01 h1,pro01 h4的CSS樣式谜叹，分別對應(yīng)商品圖片，商品名稱搬葬，商品價格布局樣式荷腊。pro01樣式如圖1-8所示。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-7電商APP首頁商品代碼
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-9 名為pro01的CSS樣式
3.3電商APP側(cè)邊導(dǎo)航
制作電商APP頁面的側(cè)邊導(dǎo)航菜單急凰，這里使用mmenu插件實現(xiàn)jQuery Mobile頁面的側(cè)邊滑動制作導(dǎo)航菜單效果女仰。mmenu插件是一款創(chuàng)建滑動導(dǎo)航菜單的jQuery Mobile插件，在使用mmenu插件之前需要下載mmenu插件抡锈，在和標(biāo)簽之間鏈接相應(yīng)的CSS樣式表和JavaScript腳本文件疾忍，代碼如圖1-10所示。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-10 引用mmenu插件代碼
側(cè)邊導(dǎo)航欄菜單如圖1-11所示床三。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-11 側(cè)邊導(dǎo)航菜單代碼
其中一罩，菜單列表中每一個
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-12 側(cè)滑菜單CSS樣
4 運行結(jié)果分析
4.1電商APP首頁
電商APP首頁如圖1-13所示聂渊，導(dǎo)航欄是jQuery框架中的header部分，商品圖片是兩欄布局四瘫，放在jQuery框架的content部分汉嗽。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-13 電商APPP首頁運行結(jié)果圖
4.2側(cè)滑菜單
??側(cè)滑菜單運行結(jié)果如圖1-14所示，點擊首頁導(dǎo)航左側(cè)按鈕時找蜜，會調(diào)用JavaScript的$(‘nav#menu’).menu();函數(shù)诊胞，實現(xiàn)側(cè)邊滑動導(dǎo)航的效果圖，這也是大多數(shù)移動APP常用的界面效果锹杈。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-14 側(cè)滑導(dǎo)航菜單運行圖
5創(chuàng)新說明
mmenu是一款高仿真移動手機滑動側(cè)邊欄效果的jQuery插件撵孤，該jQuery插件能夠制作出和手機應(yīng)用程序效果完全相同的隱藏滑動側(cè)邊欄和多級菜單效果。它的特點有：
（1）滑動側(cè)邊欄可以放置在頁面的上下左右四個位置竭望。
（2）可以作為水平滑動菜單或垂直下拉菜單使用邪码。
（3）整個布局包括完整的搜索框，頁面頭部咬清，腳部和內(nèi)容區(qū)域闭专。
（4）適合移動觸摸設(shè)備使用。
（5）可以很容易的通過CSS文件來自定義樣式旧烧。
（6）可以在現(xiàn)代瀏覽器和移動手機設(shè)備中正常運行影钉。
參考文獻
[1]? 基于HTML5+CSS3+jQuery的響應(yīng)式布局網(wǎng)頁設(shè)計[J].葉潮流，馬林山.梧州學(xué)院學(xué)報.2018(3)
[2] 以HTML5+CSS3+jQuery為基礎(chǔ)的響應(yīng)式布局網(wǎng)頁設(shè)計探討[J].張麗.計算機產(chǎn)品與流通.2019(11)
[3] 基于jQuery框架的Web前端開發(fā)的研究[J].申永芳.信息通信.2019(10)
[4] 基于jQuery課程網(wǎng)站的設(shè)計[J].梅元昭.無線互聯(lián)技術(shù).2019(5)
