小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)

本文主要是介绍小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

记得以前在做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' 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>











这篇关于小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/402095

相关文章

Redis分片集群的实现

《Redis分片集群的实现》Redis分片集群是一种将Redis数据库分散到多个节点上的方式,以提供更高的性能和可伸缩性,本文主要介绍了Redis分片集群的实现,具有一定的参考价值,感兴趣的可以了解一... 目录1. Redis Cluster的核心概念哈希槽(Hash Slots)主从复制与故障转移2.

springboot+dubbo实现时间轮算法

《springboot+dubbo实现时间轮算法》时间轮是一种高效利用线程资源进行批量化调度的算法,本文主要介绍了springboot+dubbo实现时间轮算法,文中通过示例代码介绍的非常详细,对大家... 目录前言一、参数说明二、具体实现1、HashedwheelTimer2、createWheel3、n

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

Mybatis 传参与排序模糊查询功能实现

《Mybatis传参与排序模糊查询功能实现》:本文主要介绍Mybatis传参与排序模糊查询功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、#{ }和${ }传参的区别二、排序三、like查询四、数据库连接池五、mysql 开发企业规范一、#{ }和${ }传参的

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》:本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进