jqMobi中Side Menu实现(类似人人网)

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

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

接下来再添加一个panel如下

接下来我们来添加一个<nav>在panel同级标签下


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

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

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

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

你报http://www.nibao.net/

jqMobi中Side Menu实现(类似人人网)

时间: 2024-10-10 21:51:18

jqMobi中Side Menu实现(类似人人网)的相关文章

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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(41)--jqMobi中Side Menu实现(类似人人网) 记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: [html] view plain copy print? <!DOCTYPE html> &l

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

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: 接下来再添加一个panel如下 接下来我们来添加一个<nav>在panel同级标签下 接下来我们再来添加一个panel,并添加header和footer 郑州男科医院 我们会发现此时两个panel对应的side menu是同一个,下面我们为各个pa

Caliburn框架中二级Menu无法调用ViewModel方法

公司WPF程序开发中应用了Caliburn框架,最近在做一个DataGrid上二级MenuItem时,发现Click方法无法调用ViewModel中的方法,但是回来后,在自己的机器上写了一个类似的测试程序时,却能够调用ViewModel中的方法 测试程序DataGrid 1 <DataGrid CanUserAddRows="False" AutoGenerateColumns="True" ItemsSource="{Binding Collect

Android菜单详解——理解android中的Menu

Android菜单详解--理解android中的Menu 前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至今为止看到的最好的一本android书,中文版出到<精通Android 2>. 理解Android的菜单 菜单是许多应用程序不可或缺的一部分,Android中更是如此,所有搭载Android系统的手机甚至都要有一个"Menu&qu

Android——在活动中创建menu

在手机中,屏幕有限的,当你有大量菜单需要在活动中显示时,界面设计将会很困难,并且不好看,此时就需要有一个menu来帮助了. 创建menu第一步: 如果你的res文件夹中没有menu文件夹,就右击res目录-New-Directory,输入文件夹名为menu,并点击OK.然后再右击该文件夹New-Menu resource file创建一个名为main的菜单文件,点击OK完成. 创建menu第二步: 在main.xml中写如下代码:在菜单中设定两个选项. 创建menu第三步: 在MainActiv

Android菜单详解(一)——理解android中的Menu

前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至今为止看到的最好的一本android书,中文版出到<精通Android 2>. 理解Android的菜单 菜单是许多应用程序不可或缺的一部分,Android中更是如此,所有搭载Android系统的手机甚至都要有一个"Menu"键,由此可见菜单在Android程序中的特殊性.An

mysql记录集中记录序号,MySQL中实现rownum功能类似的语句(转)

MySQL 如何实现 Oracle 的 ROWNUM mysql> SELECT * FROM frutas;+-----------+----------+| nombre    | color    |+-----------+----------+| fresa     | rojo     || platano   | amarillo || manzana   | verde    || uva       | verde    || pera      | verde    || m

Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

windows phone中做动画其实很方便的,可以使用Blend拖来拖去就做出一个简单的动画,下面做了一个 ios屏幕小白点的拖动效果,包括速度判断移动 使用Blend生成以下代码 <Storyboard x:Name="HandFunGTLSb"><!-- 向左滑动时动画 --> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransfo

Android studio 中R.menu的创建

对于Android开发中的menu没有声明的情况: 首先,将鼠标定位到红色的menu上面, 然后,Alt+enter组合键,建立文件menu, 然后将以下代码复制进去: <item android:id="@+id/item_store" app:showAsAction="always" android:title="" android:icon="@mipmap/ic_launcher" android:orderI