这段时间开发一个网站的移动版本，由于没有移动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外面。
<div data-role="page"> <div data-role="header"></div> <div data-role="ui-content"></div> <div data-role="footer"></div> </div> <div data-role="panel" id="login-panel"></div>
jquery mobile框架会自动初始化放在page内的panel，放在page外面的panel则不会，需要自己手动初始化，如果不初始化，那么这个panel直接显示并覆盖掉page。
<html>
<head>
<script>
$(function(){
$("#login-panel").panel();
});
</script>
</head>
<body>
</body>
</html>
jquery 框架为page预定义了默认的主题，并且page内的元素不用显示使用主题，它们会继承page的默认主题。定义在page外面的panel这时没有任何的jquery mobile框架主题，所以显示的时候会以原生html的样式显示，需要在panel的div添加data-theme="a"属性才能正常显示。
<div data-role="page"> <div data-role="header"></div> <div data-role="ui-content"></div> <div data-role="footer"></div> </div> <div data-role="panel" id="login-panel" data-theme="a"></div>
jquery mobile 的 external pannel
原文：http://www.cnblogs.com/Ruisen/p/4861792.html