phonegap教程第9讲 Jquery Mobile 面板(panel)
高清视屏教程下载地址:
第九讲 Jquery Mobile 面板(panel)详解
课件以及源码下载地址:
第九讲 Jquery Mobile 面板(panel)详解.
1. 面板具有灵活的设计,可以用于导航,注册登录,以及更多。可以实现几乎data-role="content" 完成的所有功能 用data-role="panel"来定义
data-display=“reveal” ,默认值,将页面像幻灯片一样从屏幕划出,将面板显示出来
data-display="overlay",面板出现在页面内容顶部上层。
data-display="push",是同时“推动”的面板和页面。
手指左右触摸 实现面板显示与隐藏js 代码
<script>
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
</script>
【phonegap教程第9讲 Jquery Mobile 面板(panel)】相关文章
1. phonegap教程第9讲 Jquery Mobile 面板(panel)
2. phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...
3. phonegap教程第二讲 Jquery Mobile页面与对话框
4. phonegap教程第三讲 Jquery Mobile中的按钮
5. PhoneGap教程第四讲 Jquery Mobile中的表单与列表
6. phonegap教程第六讲 Jquery Mobile默认主题以及自定义主题
7. phonegap教程第7讲 Jquery Mobile插件(上)
8. phonegap教程第7讲 Jquery Mobile插件(下)
9. Jquery Mobile html5 phonegap中 js 跨域请求数据 实现增删查
10. jQuery Mobile 以及PhoneGap开发在线公开课
本文来源:https://www.51html5.com/a1251.html
﹝phonegap教程第9讲 Jquery Mobile 面板(panel)﹞相关内容
- Telefónica与Mozilla开拓基于HTML5互联网设备
- PhoneGap新增开发工具AppMobi
- Adobe收购移动应用框架PhoneGap开发商Nitobi
- TIOBE 2014年7月编程语言排行榜:JavaScript排名第9
- PhoneGap开发初体验:用HTML5技术开发本地应用
- 我为什么从PhoneGap中逃离
- jQuery UI组件集Wijmo 支持移动Mobile UI库
- jQuery UI 组件集 Wijmo 五年最大更新,Mobile First!
- jQuery UI 组件集 Wijmo 五年最大更新,Mobile First!
- CSS3+jQuery的图像画廊Photobox