就屏幕尺寸而言移动设备的屏幕比PC显示器小。 在查看网页或应用程序时某些元素会进行翻译以适应此屏幕限制。 通常在右侧或左侧有一个按钮，当点击它时它将顯示隐藏的元素。

以为例； 如果单击左侧的图标则将显示用于导航应用程序的链接菜单，而如果单击右侧的图标则将显示您的在线联系人。 当今大多数应用程序都采用类似的方法

在我们之前的文章中，Jake向您 今天，我们将探索另一种使用jQuery Mobile的方式

是一个专门设计用于為iOS，AndroidWindows Phone，Blackberry和Symbian等移动设备构建用户界面和交互的框架 在我们的讨论上下文中，它提供了一个名为Panel Slide的组件可以更轻松地构建该功能。

根据您构建的应用程序Panel可以是任何东西。 在此示例中我将按照Facebook进行简化。

在本文中我将创建左右两个面板。 左侧面板用于放置应用程序菜单导航左侧面板用于列出当前在线的人员。

我们的演示页面包括四个部分标题，内容和两个面板 在jQuery Mobile中 ，这些部分使用HTML5 data-role属性定义洳下所示。

reveal将通过滑动内容页面来显示面板 如果未明确指定属性，则将应用默认方法 push方法将通过同时滑动面板和内容来显示面板，而overlay方法将面板显示在页面内容的顶部

由于已链接jQuery Mobile样式表，因此我们的页面也已设置样式而无需其他样式规则。

您可以应用使用data-theme属性提供data-theme 但是，在此示例中我们将仅保留上面屏幕截图中所示的标题样式，然后自行设置页面和面板的样式 这是我们的样式规则。

正如我们茬之前的文章中已经讨论过的那样我将不会剖析这些样式的工作方式，例如和

这就是我们所需要的。 我们不需要添加额外JavaScript因为所有這些都已由框架处理，并且面板现在可以使用了

您可以从该演示中实际看到它。 您可以单击标题上的图标或者如果您在启用触摸功能嘚设备中查看它，也可以滑动屏幕以显示面板