这段时间开发一个网站的移动版本，由于没有移动Web开发的相关经验，网上查了一下，发现jquery框架有对应移动端版本：jquery mobile，就投机取巧用jquery mobile来开发这个移动端网站（有网友说：使用htm5+原生的js开发最为高效）。

　　jquery mobile框架提供了panel widgit,我们使用的时候只需要在div中添加一个data-role='panel'的属性即可，并且这个div的位置是有要求的。如果你的panel是设计用于单个页面使用的，那么这个panel应该放在page内并且在header的前面或者footer的后面；如果你的pannel是设计用于多个页面共同使用的话，放在page外面。

　　我需要用panel实现用户登陆、注册或者显示用户信息的操作，需要在整个网站的页面都可以打开这个panel,所以我把这个panel放在page外面。

 

 

　　jquery mobile框架会自动初始化放在page内的panel，放在page外面的panel则不会，需要自己手动初始化，如果不初始化，那么这个panel直接显示并覆盖掉page。

 

 

　　jquery 框架为page预定义了默认的主题，并且page内的元素不用显示使用主题，它们会继承page的默认主题。定义在page外面的panel这时没有任何的jquery mobile框架主题，所以显示的时候会以原生html的样式显示，需要在panel的div添加data-theme="a"属性才能正常显示。