jQuery Mobile是一个基于HTML5和CSS3的移动端框架，其内置了很多UI组件，其中“面板（panel）”就是其中一个非常重要的组件。面板是移动应用中常用的导航组件，通过滑动出来的面板，用户可以方便快捷地访问应用中的各个模块。
在jQuery Mobile中，面板组件有一个很有用的选项“classes.contentWrap”。下面我们来详细讲解一下这个选项的用法和作用。
classes.contentWrap的作用
classes.contentWrap是一个布尔值选项，用于控制面板中内容部分的容器是否对齐。当该选项设置为true时，面板内容容器将始终在面板中垂直居中，而不管面板的高度如何。当该选项设置为false时，面板内容容器将始终与面板顶部对齐。
使用示例
示例一
在下面的示例中，我们使用了两个面板“left-panel”和“right-panel”，分别通过设置不同的css样式来给它们赋予不同的颜色和宽度。同时，我们为“left-panel”和“right-panel”分别设置了navigation的列表，方便用户快速访问不同的页面。
<div data-role="panel" id="left-panel" data-display="push" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-push ui-body-a ui-panel-fixed ui-responsive">
<ul data-role="listview" data-inset="true" id="left-nav">
<li data-icon="home"><a href="#home">Home</a></li>
<li data-icon="star"><a href="#favorites">Favorites</a></li>
<li data-icon="gear"><a href="#settings">Settings</a></li>
</ul>
</div>
<div data-role="panel" id="right-panel" data-display="push" data-theme="b" class="ui-panel ui-panel-position-right ui-panel-display-push ui-body-b ui-panel-fixed ui-responsive">
<ul data-role="listview" data-inset="true" id="right-nav">
<li data-icon="search"><a href="#search">Search</a></li>
<li data-icon="info"><a href="#about">About</a></li>
<li data-icon="home"><a href="#home">Home</a></li>
</ul>
</div>
为了让面板内容容器始终垂直居中，在每个面板中添加选项“classes.contentWrap”.
<div data-role="panel" id="left-panel" data-display="push" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-push ui-body-a ui-panel-fixed ui-responsive" data-classes="contentWrap:false">
<ul data-role="listview" data-inset="true" id="left-nav">
<li data-icon="home"><a href="#home">Home</a></li>
<li data-icon="star"><a href="#favorites">Favorites</a></li>
<li data-icon="gear"><a href="#settings">Settings</a></li>
</ul>
</div>
<div data-role="panel" id="right-panel" data-display="push" data-theme="b" class="ui-panel ui-panel-position-right ui-panel-display-push ui-body-b ui-panel-fixed ui-responsive" data-classes="contentWrap:true">
<ul data-role="listview" data-inset="true" id="right-nav">
<li data-icon="search"><a href="#search">Search</a></li>
<li data-icon="info"><a href="#about">About</a></li>
<li data-icon="home"><a href="#home">Home</a></li>
</ul>
</div>
示例二
下面是另一个例子，在这个例子中，我们使用了一个面板，并将内容容器置于面板中央。
<div data-role="panel" id="mypanel" data-display="push" data-position="left" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-push ui-body-a ui-panel-fixed ui-responsive" data-classes="contentWrap:true;">
<h2>My Panel</h2>
<p>Panel content here.</p>
</div>
通过上述示例，我们可以发现通过设置classes.contentWrap选项，可以轻松让面板中的内容容器对齐，提高了应用程序的用户体验。