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

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

博客访问： 72414
博文数量： 59
博客积分： 0
博客等级：民兵
技术积分： 600
用户组：普通用户
注册时间： 2016-08-22 10:54

文章分类

全部博文（59）

未分配的博文（59）

文章存档

2016年（59）

我的朋友

相关博文

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

分类：其他平台

2016-11-11 16:03:11

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

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

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

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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如下

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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>

接下来我们来添加一个

在panel同级标签下

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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">Homediv>
<ul>
<li><a class="icon home mini" href="">Androida>li>
<li><a class="icon home mini" href="">Linuxa>li>
<li><a class="icon home mini" href="">HTML5a>li>
ul>
nav>
div>
body>
html>

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

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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">HOMEa>
<a href="#android" class="icon info">Androida>
footer>
<nav>
<div class="title">Homediv>
<ul>
<li><a class="icon home mini" href="">Androida>li>
<li><a class="icon home mini" href="">Linuxa>li>
<li><a class="icon home mini" href="">HTML5a>li>
ul>
nav>
div>
body>
html>

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

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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">HOMEa>
<a href="#android" class="icon info">Androida>
footer>
<nav id="main_nav">
<div class="title">Homediv>
<ul>
<li><a class="icon home mini" href="">Androida>li>
<li><a class="icon home mini" href="">Linuxa>li>
<li><a class="icon home mini" href="">HTML5a>li>
ul>
nav>
<nav id="android_nav">
<div class="title">Homediv>
<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便可实现

[html] view plain copy

print?

>
<head>
<meta charset="utf-8">
<title>Side Menutitle>
<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">HOMEa>
<a id="footer_android" href="#android" class="icon info">Androida>
footer>
<nav id="main_nav">
<div class="title">Homediv>
<ul>
<li><a class="icon home mini" href="">Androida>li>
<li><a class="icon home mini" href="">Linuxa>li>
<li><a class="icon home mini" href="">HTML5a>li>
ul>
nav>
<nav id="android_nav">
<div class="title">Homediv>
<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>

阅读(464) | 评论(0) | 转发(0) |

上一篇：HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式

下一篇：HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6