jquery Mobile's external pannel

This period of time to develop a mobile version of the Web site, because there is no mobile Web development related experience, online check, found that the jquery framework has a corresponding mobile version: jquery Mobile, on the opportunistic use of jquery Mobile to develop the Web site (a netizen said: using htm5+ native JS development most efficient).

The jquery Mobile Framework provides panel widgit, which we only need to add a data-role= ' panel ' attribute to the Div, and the location of the div is required. If your panel is designed for use on a single page, the panel should be placed inside the page and behind the header or footer, if your pannel is designed for use with multiple pages, put it outside the page.

I need to use the panel to implement user login, registration or display user information, need to open this Panel on the entire site page, so I put this panel outside the page.

<DivData-role= "page">    <DivData-role= "header"></Div>    <DivData-role= "Ui-content"></Div>    <DivData-role= "Footer"></Div></Div><DivData-role= "Panel"ID= "Login-panel"></Div>

　　The jquery mobile framework automatically initializes the panel that is placed within the page, and the panel outside the page does not need to be initialized manually, and if not initialized, the panel directly displays and overwrites the page.

            $(function() {                $ ("# Login-panel "). Panel ();             });         </script>    
The jquery framework pre-defines the default theme for page, and the elements within the page do not show usage themes, they inherit the page's default theme. The panel that is defined outside the page does not have any jquery mobile frame theme, so the display will be displayed in the original HTML style, and you will need to add the Data-theme= "a" attribute to the panel's div to display properly.
<DivData-role= "page">    <DivData-role= "header"></Div>    <DivData-role= "Ui-content"></Div>    <DivData-role= "Footer"></Div></Div><DivData-role= "Panel"ID= "Login-panel"Data-theme= "a"></Div>
jquery Mobile's external pannel