jqMobi基础(4)--jqMobi中Side Menu实现（类似人人网）

于 2014-11-09 22:34:10 发布
阅读量1.1k 收藏
点赞数
文章标签： jqmobi sidemenu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdfkldjlkjdl/article/details/40957851
版权

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热，很多app仿照该效果进行开发，在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。

首先新建一个html文件，引入jqMobi的框架，如下：

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.     <div id="afui">  
  13.       
  14.     </div>  
  15. </body>  
  16. </html>  
接下来再添加一个panel如下

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" class="panel">  
  15.                 欢迎访问arthinking的CSDN博客：http://blog.csdn.net/jdfkldjlkjdl  
  16.             </div>  
  17.         </div>  
  18.     </div>  
  19. </body>  
  20. </html>  

接下来我们来添加一个<nav>在panel同级标签下

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" class="panel">  
  15.                 欢迎访问arthinking的新浪博客：http://blog.sina.com.cn/u/2014084844 
  16.             </div>  
  17.         </div>  
  18.         <nav>  
  19.             <div class="title">Home</div>  
  20.             <ul>  
  21.                 <li><a class="icon home mini" href="">Android</a></li>  
  22.                 <li><a class="icon home mini" href="">Linux</a></li>  
  23.                 <li><a class="icon home mini" href="">HTML5</a></li>  
  24.             </ul>  
  25.         </nav>  
  26.     </div>  
  27. </body>  
  28. </html>  

接下来我们再来添加一个panel，并添加header和footer

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">  
  15.                 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban  
  16.             </div>  
  17.             <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer">  
  18.                 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html  
  19.             </div>  
  20.         </div>  
  21.         <header id="custom_header">  
  22.             <h1>大碗干拌欢迎您</h1>  
  23.             <a class="button" style="float:right;" class="icon home"></a>  
  24.         </header>  
  25.         <footer id="custom_footer">  
  26.             <a href="#home" class="icon info">HOME</a>  
  27.             <a href="#android" class="icon info">Android</a>  
  28.         </footer>  
  29.         <nav>  
  30.             <div class="title">Home</div>  
  31.             <ul>  
  32.                 <li><a class="icon home mini" href="">Android</a></li>  
  33.                 <li><a class="icon home mini" href="">Linux</a></li>  
  34.                 <li><a class="icon home mini" href="">HTML5</a></li>  
  35.             </ul>  
  36.         </nav>  
  37.     </div>  
  38. </body>  
  39. </html>  

我们会发现此时两个panel对应的side menu是同一个，下面我们为各个panel分别指定一个side menu

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav">  
  15.                 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban  
  16.             </div>  
  17.             <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav">  
  18.                 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html  
  19.             </div>  
  20.         </div>  
  21.         <header id="custom_header">  
  22.             <h1>大碗干拌欢迎您</h1>  
  23.             <a class="button" style="float:right;" class="icon home"></a>  
  24.         </header>  
  25.         <footer id="custom_footer">  
  26.             <a href="#home" class="icon info">HOME</a>  
  27.             <a href="#android" class="icon info">Android</a>  
  28.         </footer>  
  29.         <nav id="main_nav">  
  30.             <div class="title">Home</div>  
  31.             <ul>  
  32.                 <li><a class="icon home mini" href="">Android</a></li>  
  33.                 <li><a class="icon home mini" href="">Linux</a></li>  
  34.                 <li><a class="icon home mini" href="">HTML5</a></li>  
  35.             </ul>  
  36.         </nav>  
  37.          <nav id="android_nav">  
  38.             <div class="title">Home</div>  
  39.             <ul>  
  40.                 <li><a class="icon home mini" href="">文章一</a></li>  
  41.                 <li><a class="icon home mini" href="">文章二</a></li>  
  42.                 <li><a class="icon home mini" href="">文章三</a></li>  
  43.             </ul>  
  44.         </nav>  
  45.     </div>  
  46. </body>  
  47. </html>  

我们会发现side menu是属于panel的，每个panel都可以给自己指定一个side menu，也可以共用一个side menu

现在最大的问题是怎么使上面的side menu有左右滑动效果，引入如下js便可实现

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>Side Menu</title>  
  5. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  6. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  7. <script src="appframework.js" type="text/javascript"></script>  
  8. <script src="ui/appframework.ui.js" type="text/javascript"></script>  
  9.   
  10. <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>  
  11. <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>  
  12. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>  
  13. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>  
  14.   
  15. <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>  
  16. <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>  
  17. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>  
  18. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>  
  19. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>  
  20.   
  21. <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>  
  22.   
  23. <script type="text/javascript">  
  24.     if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in  
  25.             window)) {  
  26.         var script = document.createElement("script");  
  27.         script.src = "plugins/af.desktopBrowsers.js";  
  28.         var tag = $("head").append(script);  
  29.     }  
  30. </script>  
  31. </head>  
  32.   
  33. <body>  
  34.     <div id="afui">  
  35.         <div id="content">  
  36.             <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav" data-tab="footer_home">  
  37.                 测试内容A 
  38.             </div>  
  39.             <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android">  
  40.                 测试内容B  
  41.             </div>  
  42.         </div>  
  43.         <header id="custom_header">  
  44.             <h1>大碗干拌欢迎您</h1>  
  45.             <a class="button" style="float:right;" class="icon home"></a>  
  46.         </header>  
  47.         <footer id="custom_footer">  
  48.             <a id="footer_home" href="#home" class="icon info">HOME</a>  
  49.             <a id="footer_android" href="#android" class="icon info">Android</a>  
  50.         </footer>  
  51.         <nav id="main_nav">  
  52.             <div class="title">Home</div>  
  53.             <ul>  
  54.                 <li><a class="icon home mini" href="">Android</a></li>  
  55.                 <li><a class="icon home mini" href="">Linux</a></li>  
  56.                 <li><a class="icon home mini" href="">HTML5</a></li>  
  57.             </ul>  
  58.         </nav>  
  59.          <nav id="android_nav">  
  60.             <div class="title">Home</div>  
  61.             <ul>  
  62.                 <li><a class="icon home mini" href="">文章一</a></li>  
  63.                 <li><a class="icon home mini" href="">文章二</a></li>  
  64.                 <li><a class="icon home mini" href="">文章三</a></li>  
  65.             </ul>  
  66.         </nav>  
  67.     </div>  
  68. </body>  
  69. </html>  





AndroidDev2022
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值