`
shuai1234
  • 浏览: 972115 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

jqMobi中Side Menu实现

 
阅读更多

记得以前在做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.                 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban  
  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.                 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban  
  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.                 欢迎访问大碗干拌CSDN博客：http://blog.csdn.net/dawanganban  
  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.                 欢迎访问大碗干拌Android菜鸟开发历程专栏：http://blog.csdn.net/column/details/android-growup.html  
  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>  
分享到：
| jqMobi插件ActionSheet
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    appframework jqmobi demo

    同时，AF提供的数据绑定功能可以与JqMobi的AJAX请求结合，实现动态数据的实时更新，为用户提供更流畅的交互体验。 在"appframework jqmobi demo"这个项目中，www目录很可能是项目的根目录，包含着所有应用所需的...

    jqMobi参考手册

    为了在项目中使用`jqMobi`框架，开发者需首先下载并引用相应的脚本文件。访问`https://github.com/appmobi/jQ.Mobi`获取最新版本的框架资源。在HTML文件中，通过以下方式引入： - 引入`jqMobi`核心库： ```html ...

    jqmobi移动开发

    在实际开发中，开发者可以利用jqMobi和App Framework的组合，快速构建功能丰富的移动应用。首先，通过引入jqMobi和App Framework的脚本文件，然后使用它们提供的API进行DOM操作、事件绑定、数据请求等。接着，利用...

    jqmobi app-framework-2.1.0

    JQMobi 和 App Framework 是移动应用开发中的两个关键框架，它们在构建跨平台的移动Web应用和本地应用中发挥着重要作用。JQMobi 是一个轻量级的JavaScript库，而App Framework则是基于JQMobi的一个扩展，提供了更...

    jqmobi icon图标大全

    在jqMobi中，图标是UI设计的重要组成部分，它们有助于提升用户界面的可识别性和交互性。 **icomoon图标集** icomoon是一个流行的图标字体生成工具，允许开发者自定义、下载和使用图标库。在这个名为"jqmobi icon...

    jqmobi1.02rc1

    尽管jqMobi的大小比完整的jQuery小得多，但仍然提供了许多相似的功能，使其成为移动环境的理想选择。 在跨平台移动开发方面，jqMobi 支持多种操作系统，包括iOS、Android、Blackberry以及Windows Phone等，让开发者...

    Jqmobi做的百度地图,支持三维地图 源码

    【Jqmobi与百度地图集成实现三维地图】 Jqmobi是一款轻量级的JavaScript移动Web框架，它专注于为移动设备提供高效、简洁的交互体验。本项目是将Jqmobi与百度地图API结合，实现了在移动端展示三维地图的功能。通过这...

    jqmobi+phonegap+手机触屏滑动效果js

    在jqMobi中，可以使用它的滑动事件（swipe）来实现这一功能。例如： ```javascript document.addEventListener('swipeleft', function(e) { // 处理左滑事件 }, false); document.addEventListener('swiperight', ...

    JqMobi+PhoneGap项目实战

    JqMobi的源码最初发布于2012年3月13日，版本号为1.0，并在后来的版本中支持了W3C查询，不断有新功能的加入和现有功能的改进。其主要特点包括运行速度快，体积小，以及专为智能手机和平板电脑提供服务。JqMobi还提供...

    jqMobi学习笔记

    它在PhoneGap和Android等原生环境中的表现尤为出色，提供了与jQuery类似的功能，但体积更小，加载速度更快，更适合资源有限的移动设备。 首先，jqMobi的核心特性包括DOM操作、事件处理、动画效果以及AJAX请求。它...

    Jqmobi做的百度地图，支持三维地图 源码

    本项目是基于Jqmobi实现的百度地图功能，特别是实现了三维地图的展示，这对于地理信息展示和定位服务来说具有很高的实用价值。 首先，我们要了解Jqmobi框架的核心特点。Jqmobi 是一套轻量级的JavaScript库，它借鉴...

    appframework-master 2.0

    jqMobi源码最初在2012年1月份推出，基于MIT/X11许可证，托管在GitHub上，开发者可参与并通过插件不断改进该框架。 2012年3月13日，jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0 jqMobi的特点 速度快 适用于...

    mobiscroll时间控件支持jqmobi等

    在jqMobi的支持方面，Mobiscroll与这个轻量级的JavaScript库无缝集成，使得开发者能够在基于jqMobi构建的应用中快速添加时间控件。jqMobi是专为移动设备优化的JavaScript框架，它的轻巧和高效使得结合Mobiscroll时，...

    jqmobi微信

    使用jqmobi，模仿微信做工作管理系统

    intel appframework3.0测试版 jqmobi3.0测试版

    intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后，一直聚焦于修正系统的bug（比如安卓平台上的 CSS3 变换）、提供一个可靠的 scrolling ...

    jqm开发的音乐播放器

    综上所述，"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性，也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...

    jqmobile3.0

    jqMobile 3.0 是一个基于JavaScript的轻量级移动应用框架，专为HTML5浏览器和移动设备设计，旨在简化...通过结合jqMobi的底层功能和jqMobile的UI组件，开发者可以在不牺牲用户体验的前提下，实现跨平台的移动应用开发。

    Learning Node.js mobi

    Learning Node.js 英文mobi 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除

    webAPP开发教程

    总的来说，这个WebAPP开发教程覆盖了从基础到进阶的内容，包括使用JqMobi进行前端开发，以及通过PhoneGap实现跨平台的移动应用封装。通过学习，你将能够构建功能丰富的WebAPP，并了解如何优化它们以适应不同设备的...

    快速参考手册

    为了在项目中使用jqMobi及其组件，需要下载相应的框架文件，并按照以下步骤进行配置： ##### 3.1 下载框架 - 访问官方GitHub仓库下载最新版本：[https://github.com/appmobi/jQ.Mobi]...

Magicbox
Global site tag (gtag.js) - Google Analytics