小强的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' 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>

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

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

84.setlocale
用法示例 #include <Windows.h> #include <stdio.h> #include<locale.h> void main() { //se ...
调色板原理 & 编程
调色板原理 & 编程逻辑调色板结构LOGPALETTE,该结构定义如下: typedef struct tagLOGPALETTE { WORD palVersion; //调色板的板本号, ...
Java 学习（17）： Java 泛型
Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说将 ...
hdu5384 AC自己主动机模板题，统计模式串在给定串中出现的个数
http://acm.hdu.edu.cn/showproblem.php?pid=5384 Problem Description Danganronpa is a video game franc ...
SQL Server2008 Hierarchyid数据类型
以往我们在关系数据库中建立树状结构的时候,通常使用ID+ParentID来实现两条纪录间的父子关系.但这种方式只能标示其相对位置.解决这类问题在SqlServer2005出现之前通常是采用游标来操作 ...
自旋锁spinlock解析
1 基础概念自旋锁与相互排斥锁有点类似,仅仅是自旋锁不会引起调用者睡眠.假设自旋锁已经被别的运行单元保持.调用者就一直循环在那里看是否该自旋锁的保持者已经释放了锁."自旋"一词就 ...
源码笔记---MBProgressHUD
前言作为初学者,想要快速提高自己的水平,阅读一些优秀的第三方源代码是一个非常好的途径.通过看别人的代码,可以学习不一样的编程思路,了解一些没有接触过的类和方法. MBProgressHUD是一个非常 ...
(转)Vim练级攻略
(转)Vim练级攻略原文链接:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆 ...
MySQL的安装及使用教程
MySQL的安装及使用教程一. MySQL的下载及安装首先登陆MySQL的官网,选择Downloads→Windows→MySQL Installer→Windows(x86,32-bit),M ...
Django 学习笔记（二）《models》
python 2.7.6 Django1.8.3 IDE eclipse+pydev Django开发的模式就是MTV(c)模式(model. template, view(urls)). 对于mod ...

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

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

随机推荐

热门专题