HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

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

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

[html] view plain copy

print?

  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. <body>
  11. <div id="afui">
  12. </div>
  13. </body>
  14. </html>

接下来再添加一个panel如下

[html] view plain copy

print?

  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. <body>
  11. <div id="afui">
  12. <div id="content">
  13. <div id="home" class="panel">
  14. 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban
  15. </div>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

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

[html] view plain copy

print?

  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. <body>
  11. <div id="afui">
  12. <div id="content">
  13. <div id="home" class="panel">
  14. 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban
  15. </div>
  16. </div>
  17. <nav>
  18. <div class="title">Home</div>
  19. <ul>
  20. <li><a class="icon home mini" href="">Android</a></li>
  21. <li><a class="icon home mini" href="">Linux</a></li>
  22. <li><a class="icon home mini" href="">HTML5</a></li>
  23. </ul>
  24. </nav>
  25. </div>
  26. </body>
  27. </html>


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

[html] view plain copy

print?

  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. <body>
  11. <div id="afui">
  12. <div id="content">
  13. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
  14. 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban
  15. </div>
  16. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer">
  17. 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html
  18. </div>
  19. </div>
  20. <header id="custom_header">
  21. <h1>大碗干拌欢迎您</h1>
  22. <a class="button" style="float:right;" class="icon home"></a>
  23. </header>
  24. <footer id="custom_footer">
  25. <a href="#home" class="icon info">HOME</a>
  26. <a href="#android" class="icon info">Android</a>
  27. </footer>
  28. <nav>
  29. <div class="title">Home</div>
  30. <ul>
  31. <li><a class="icon home mini" href="">Android</a></li>
  32. <li><a class="icon home mini" href="">Linux</a></li>
  33. <li><a class="icon home mini" href="">HTML5</a></li>
  34. </ul>
  35. </nav>
  36. </div>
  37. </body>
  38. </html>

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

[html] view plain copy

print?

  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. <body>
  11. <div id="afui">
  12. <div id="content">
  13. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav">
  14. 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban
  15. </div>
  16. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav">
  17. 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html
  18. </div>
  19. </div>
  20. <header id="custom_header">
  21. <h1>大碗干拌欢迎您</h1>
  22. <a class="button" style="float:right;" class="icon home"></a>
  23. </header>
  24. <footer id="custom_footer">
  25. <a href="#home" class="icon info">HOME</a>
  26. <a href="#android" class="icon info">Android</a>
  27. </footer>
  28. <nav id="main_nav">
  29. <div class="title">Home</div>
  30. <ul>
  31. <li><a class="icon home mini" href="">Android</a></li>
  32. <li><a class="icon home mini" href="">Linux</a></li>
  33. <li><a class="icon home mini" href="">HTML5</a></li>
  34. </ul>
  35. </nav>
  36. <nav id="android_nav">
  37. <div class="title">Home</div>
  38. <ul>
  39. <li><a class="icon home mini" href="">文章一</a></li>
  40. <li><a class="icon home mini" href="">文章二</a></li>
  41. <li><a class="icon home mini" href="">文章三</a></li>
  42. </ul>
  43. </nav>
  44. </div>
  45. </body>
  46. </html>

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

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

[html] view plain copy

print?

  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. <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>
  10. <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>
  11. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>
  12. <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>
  13. <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
  14. <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>
  15. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>
  16. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>
  17. <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>
  18. <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>
  19. <script type="text/javascript">
  20. if (!((window.DocumentTouch && document instanceof DocumentTouch) || ‘ontouchstart‘ in
  21. window)) {
  22. var script = document.createElement("script");
  23. script.src = "plugins/af.desktopBrowsers.js";
  24. var tag = $("head").append(script);
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div id="afui">
  30. <div id="content">
  31. <div id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav" data-tab="footer_home">
  32. 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban
  33. </div>
  34. <div id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android">
  35. 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html
  36. </div>
  37. </div>
  38. <header id="custom_header">
  39. <h1>大碗干拌欢迎您</h1>
  40. <a class="button" style="float:right;" class="icon home"></a>
  41. </header>
  42. <footer id="custom_footer">
  43. <a id="footer_home" href="#home" class="icon info">HOME</a>
  44. <a id="footer_android" href="#android" class="icon info">Android</a>
  45. </footer>
  46. <nav id="main_nav">
  47. <div class="title">Home</div>
  48. <ul>
  49. <li><a class="icon home mini" href="">Android</a></li>
  50. <li><a class="icon home mini" href="">Linux</a></li>
  51. <li><a class="icon home mini" href="">HTML5</a></li>
  52. </ul>
  53. </nav>
  54. <nav id="android_nav">
  55. <div class="title">Home</div>
  56. <ul>
  57. <li><a class="icon home mini" href="">文章一</a></li>
  58. <li><a class="icon home mini" href="">文章二</a></li>
  59. <li><a class="icon home mini" href="">文章三</a></li>
  60. </ul>
  61. </nav>
  62. </div>
  63. </body>
  64. </html>
时间： 2024-08-05 23:41:23

HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）的相关文章

HTML5移动开发之路（1）——jqMobi中Side Menu实现（类似人人网）

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: 接下来再添加一个panel如下 接下来我们来添加一个<nav>在panel同级标签下 接下来我们再来添加一个panel,并添加header和footer 郑州男科医院 我们会发现此时两个panel对应的side menu是同一个,下面我们为各个pa

HTML5移动开发之路（37）——jqMobi快速入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(37)--jqMobi快速入门 在<HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugins目录./ui目录./appframework.js文件,如下图所示. 如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02.html 接

HTML5移动开发之路（38）——jqMobi插件ActionSheet

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(38)--jqMobi插件ActionSheet 现在在手机客户端上Action Sheet非常常见,比如微信中的分享按钮菜单,下面我们使用jqMobi实现一个Action Sheet,如下: 首先右击上面的按钮选择审查元素(我用的是Chrome浏览器,先按F12) [html] view plain copy print? <a class="button" onclick="s

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（33）—— jqMobi基础

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(33)-- jqMobi基础 一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的JavaScript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架. 2012年3月13日,jqMobi 1.0版本正式发布.现在最新的版本是jqMobi

HTML5移动开发之路（34）——jQuery中的选择器

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(34)--jQuery中的选择器 一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多JavaScript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师.著有<Pro JavaScript Techniques>(即<精通JavaScript>)等经典JavaScript书籍. jQu

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

HTML5移动开发之路（15）——HTML5中的音频

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(15)--HTML5中的音频 浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准.现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的.然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦.在HTML5的新标准中规定了一种通过