第九讲 phonegap 教程 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>