小强的HTML5移动开发之路(41)——jqMobi中Side M

当前位置 : 首页 > 网页制作 > html5 > 小强的HTML5移动开发之路(41)——jqMobi中Side M

小强的HTML5移动开发之路(41)——jqMobi中Side M

来源: 作者: 时间:2016-02-01 11:23
记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu 下面我们来一步一步实现该效果。首先新建一个

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

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

 






<script src=appframework.js type=text/javascript></script><script src=ui/appframework.ui.js type=text/javascript></script>
 
接下来再添加一个panel如下

 

 






<script src=appframework.js type=text/javascript></script><script src=ui/appframework.ui.js type=text/javascript></script>
 
\

 

接下来我们来添加一个

<script src=appframework.js type=text/javascript></script><script src=ui/appframework.ui.js type=text/javascript></script>
欢迎访问大碗干拌CSDN博客:http://blog.csdn.net/dawanganban
\
接下来我们再来添加一个panel,并添加header和footer

 

 






<script src=appframework.js type=text/javascript></script><script src=ui/appframework.ui.js type=text/javascript></script>
欢迎访问大碗干拌CSDN博客:http://blog.csdn.net/dawanganban
欢迎访问大碗干拌Android菜鸟开发历程专栏:http://blog.csdn.net/column/details/android-growup.html

大碗干拌欢迎您

\

 

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

 






<script src=appframework.js type=text/javascript></script><script src=ui/appframework.ui.js type=text/javascript></script>
欢迎访问大碗干拌CSDN博客:http://blog.csdn.net/dawanganban
欢迎访问大碗干拌Android菜鸟开发历程专栏:http://blog.csdn.net/column/details/android-growup.html

大碗干拌欢迎您

\

 

我们会发现side menu是属于panel的,每个panel都可以给自己指定一个side menu,也可以共用一个side menu

现在最大的问题是怎么使上面的side menu有左右滑动效果,引入如下js便可实现

 






<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>
欢迎访问大碗干拌CSDN博客:http://blog.csdn.net/dawanganban
欢迎访问大碗干拌Android菜鸟开发历程专栏:http://blog.csdn.net/column/details/android-growup.html

大碗干拌欢迎您


 

 

 


 


 

 



 

Tag:
网友评论

<