記得以前在做Native App的時候類似於人人網側邊滑動的效果非常的熱，很多app仿照該效果進行開發，在jqMobi中也有類似的效果被稱為Side Menu.下面我們來一步一步實現該效果。
首先建立一個html檔案，引入jqMobi的架構，如下：
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head><body><div id="afui"> </div></body></html>接下來再添加一個panel如下
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head><body><div id="afui"> <div id="content"> <div id="home" class="panel"> 歡迎訪問大碗幹拌CSDN部落格：http://blog.csdn.net/dawanganban </div> </div> </div></body></html>
接下來我們來添加一個<nav>在panel同級標籤下
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head><body><div id="afui"> <div id="content"> <div id="home" class="panel"> 歡迎訪問大碗幹拌CSDN部落格：http://blog.csdn.net/dawanganban </div> </div> <nav> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">Android</a></li> <li><a class="icon home mini" href="">Linux</a></li> <li><a class="icon home mini" href="">HTML5</a></li> </ul> </nav> </div></body></html>
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head><body><div id="afui"> <div id="content"> <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer"> 歡迎訪問大碗幹拌CSDN部落格：http://blog.csdn.net/dawanganban </div> <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer"> 歡迎訪問大碗幹拌Android菜鳥開發曆程專欄：http://blog.csdn.net/column/details/android-growup.html </div> </div> <header id="custom_header"> <h1>大碗幹拌歡迎您</h1> <a class="button" style="float:right;" class="icon home"></a> </header> <footer id="custom_footer"> <a href="#home" class="icon info">HOME</a> <a href="#android" class="icon info">Android</a> </footer> <nav> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">Android</a></li> <li><a class="icon home mini" href="">Linux</a></li> <li><a class="icon home mini" href="">HTML5</a></li> </ul> </nav> </div></body></html>
我們會發現此時兩個panel對應的side menu是同一個，下面我們為各個panel分別指定一個side menu
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head><body><div id="afui"> <div id="content"> <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav"> 歡迎訪問大碗幹拌CSDN部落格：http://blog.csdn.net/dawanganban </div> <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav"> 歡迎訪問大碗幹拌Android菜鳥開發曆程專欄：http://blog.csdn.net/column/details/android-growup.html </div> </div> <header id="custom_header"> <h1>大碗幹拌歡迎您</h1> <a class="button" style="float:right;" class="icon home"></a> </header> <footer id="custom_footer"> <a href="#home" class="icon info">HOME</a> <a href="#android" class="icon info">Android</a> </footer> <nav id="main_nav"> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">Android</a></li> <li><a class="icon home mini" href="">Linux</a></li> <li><a class="icon home mini" href="">HTML5</a></li> </ul> </nav> <nav id="android_nav"> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">文章一</a></li> <li><a class="icon home mini" href="">文章二</a></li> <li><a class="icon home mini" href="">文章三</a></li> </ul> </nav> </div></body></html>
我們會發現side menu是屬於panel的，每個panel都可以給自己指定一個side menu，也可以共用一個side menu
現在最大的問題是怎麼使上面的side menu有左右滑動效果，引入如下js便可實現
<!DOCTYPE html><head><meta charset="utf-8"><title>Side Menu</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script><script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script><script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script><script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script><script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script><script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script><script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script><script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script><script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script><script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script><script type="text/javascript">if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' inwindow)) {var script = document.createElement("script");script.src = "plugins/af.desktopBrowsers.js";var tag = $("head").append(script);}</script></head><body><div id="afui"> <div id="content"> <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav" data-tab="footer_home"> 歡迎訪問大碗幹拌CSDN部落格：http://blog.csdn.net/dawanganban </div> <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android"> 歡迎訪問大碗幹拌Android菜鳥開發曆程專欄：http://blog.csdn.net/column/details/android-growup.html </div> </div> <header id="custom_header"> <h1>大碗幹拌歡迎您</h1> <a class="button" style="float:right;" class="icon home"></a> </header> <footer id="custom_footer"> <a id="footer_home" href="#home" class="icon info">HOME</a> <a id="footer_android" href="#android" class="icon info">Android</a> </footer> <nav id="main_nav"> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">Android</a></li> <li><a class="icon home mini" href="">Linux</a></li> <li><a class="icon home mini" href="">HTML5</a></li> </ul> </nav> <nav id="android_nav"> <div class="title">Home</div> <ul> <li><a class="icon home mini" href="">文章一</a></li> <li><a class="icon home mini" href="">文章二</a></li> <li><a class="icon home mini" href="">文章三</a></li> </ul> </nav> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
