Jquerymobile - 生成类似FB menu的方法和自定义panel reveal的宽带
来源:互联网 发布:淘宝的天猫积分能干嘛 编辑:程序博客网 时间:2024/05/17 06:58
其实在jquerymobile里面生成类似facebook的非常容易。方法如下:
1。建立一个panel并建立一个listview
<div data-role="panel" id="category" data-position="left" data-display="reveal" data-dismissible="false" data-position-fixed="true"> <ul data-role="listview" data-count-theme="b" data-filter="true" data-filter-placeholder="搜索菜品" data-inset="true"> <li><a href="#">煲饭类<span class="ui-li-count">12</span></a></li> <li><a href="#">套饭类</a></li> <li><a href="#">每日打折</a></li> <li><a href="#">Cranberry</a></li> <li><a href="#">Grape</a></li> <li><a href="#">Orange</a></li> </ul> </div>
定义的panel 属性
data-display="reveal" 现实方式
data-dismissible="false" 打开后点击其他地方不能关闭该panel
data-position="left" 从哪一边滑动打开
默认的panel css 是设定的左边滑动打开17em,我们可以自己更改成自己的宽带,这时需要写jquerymobile的css, 仔细阅读注释
/*重写jquerymobile的panel css左右reveal的宽度,左边reveal的宽度是10em 右边宽带是15em 可以自己定义*重写文件需要放在jquery.mobile-1.4.0.min.css后面。注意文件加载顺序*/.ui-panel { width: 10em;}.ui-panel.ui-panel-position-right { width: 15em;}.ui-panel.ui-panel-closed { width: 0;}.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { -webkit-transform: translate3d(-10em, 0, 0); -moz-transform: translate3d(-10em, 0, 0); transform: translate3d(-10em, 0, 0)}.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push { -webkit-transform: translate3d(15em, 0, 0); -moz-transform: translate3d(15em, 0, 0); transform: translate3d(15em, 0, 0)}.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0)}.ui-panel-animate.ui-panel-page-content-position-left{ -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0);}.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(-15em, 0, 0); -moz-transform: translate3d(-15em, 0, 0); transform: translate3d(-15em, 0, 0)}/****************************panel重新css完*****************************/
0 0
- Jquerymobile - 生成类似FB menu的方法和自定义panel reveal的宽带
- Menu菜单的生成方法
- jquerymobile 的特有 事件 和 方法
- JqueryMobile动态生成listView并刷新的方法!
- InstallAnywhere的自定义PANEL
- Reveal 的安装和使用
- Android actionbar Menu 和 overflow的自定义
- 自定义menu的布局
- Android的几种按钮控件: Options Menu / Context Menu / Panel Menu
- FB的intern和准备的经历
- Ext.menu.Menu动态生成的菜单
- win7共享宽带的方法
- jQueryMobile中header不隐藏的方法
- 利用路由器台式电脑和笔记本电脑共享宽带的方法
- 程序事件打开自定义的菜单menu方法
- winform 动态生成panel 动态生成透明panel 带边框的panel 并注册事件
- 透明Panel的实现方法。
- 收集一些jQueryMobile的插件和案例
- cocos2dx 中去除float多余的“零”
- iOS多线程编程之NSThread的使用
- 关于代码风格的两篇文章
- linux别名永久有效(root及普通用户)
- spring mvc controller间跳转 重定向 传参
- Jquerymobile - 生成类似FB menu的方法和自定义panel reveal的宽带
- VirtualBox+Ubuntu12.04搭建全分布式Hadoop环境
- 指正与constexpr
- Socket方式上传图片实例
- 从ImputStream得到string
- 嵌入式 嵌入式工程师必备软件Valgrind交叉编译
- 传国宝玺 第一部 撞客 第七章 殍地
- C# WebBrowser 打印问题
- 我想说我不知道,也不想知道