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

JQUERY教程手机阅读

高清视屏教程下载地址:
第九讲 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>