记得以前在做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>
接下来我们再来添加一个panel,并添加header和footer
- <!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' in
- window)) {
- 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>
相关推荐
jqMobi参考手册
bapp-framework-2.1.0
有利于优化移动端代码,快速简单实现所需功能的框架集
结合appframework 精简化适合开发和学习的一个框架;
JqMobi+PhoneGap项目实战 JqMobi基础知识
这是一整套完整的jqmobi icon图标大全
jqmobi1.02rc1 轻量级跨平台移动开发框架
jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架。 2012年3月13日,jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0 jqMobi的特点 速度快 适用于...
使用jqmobi,模仿微信做工作管理系统
jqMobi学习笔记,方便查询使用,学习笔记,方便查询使用
jqmobi+phonegap+手机触屏滑动效果js 动态设置手机高宽度
Jqmobi做的百度地图,支持三维地图 源码
intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后,一直聚焦于修正系统的bug(比如安卓平台上的 CSS3 变换)、提供一个可靠的 scrolling ...
利用Jqmobi框架做的百度地图,支持三维地图,附上全部源码,初学者可以看一下
支持大部分时间控件还有下拉选择功能,支持大多移动web框架
Learning Node.js 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
JqMobi快速参考手册
jqmobi的帮助文档,全面的UI,使用浏览器打开F12调试查看源代码即可
appframework3.0 jqmobi3.0.0测试版,好多bug已被修复,赶紧下砸使用吧! ps: 交流企鹅群:333492644
jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极其快速的查询选择库,支持W3C查询。