|
高清视屏教程下载地址:
http://yun.baidu.com/s/1pJEztPL
课件以及源码下载地址:
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>
复制代码
|
|