第九讲 phonegap 教程 Jquery Mobile 面板（panel）详解

admin

高清视屏教程下载地址:

http://yun.baidu.com/s/1pJEztPL


课件以及源码下载地址:

游客，如果您要查看本帖隐藏内容请回复

1. 面板具有灵活的设计，可以用于导航，注册登录，以及更多。可以实现几乎data-role="content" 完成的所有功能 用data-role="panel"来定义
data-display=“reveal” ，默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来
data-display="overlay"，面板出现在页面内容顶部上层。
data-display="push"，是同时“推动”的面板和页面。

手指左右触摸  实现面板显示与隐藏js 代码

1. <script>
   
2.                 $( document ).on( "pageinit", "#demo-page", function() {
   
3. 
   
4.                         $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
   
5.                                 // We check if there is no open panel on the page because otherwise
   
6.                                 // a swipe to close the left panel would also open the right panel (and v.v.).
   
7.                                 // We do this by checking the data that the framework stores on the page element (panel: open).
   
8.                                 if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
   
9.                                         if ( e.type === "swipeleft"  ) {
   
10.                                                 $( "#right-panel" ).panel( "open" );
    
11.                                         } else if ( e.type === "swiperight" ) {
    
12.                                                 $( "#left-panel" ).panel( "open" );
    
13.                                         }
    
14.                                 }
    
15.                         });
    
16.                 });
    
17.     </script>

复制代码

baweier

不管东西咋样 还是先谢谢了

18435111265

感谢感谢感谢

shit1234

谢谢老师，支持

yeyu007

熬到头富商大贾忽然抬头法国法国恢复供货十多个

大菠萝

                           

wgr1388

第九讲 phonegap 教程 Jquery Mobile 面板（panel）

sdwfxsf

谢谢分享，学习啦

575260603

5555555555555555555555555555

acer02

谢谢分享