Question

在这个link中，我可以发现有一个覆盖选项，我可以隐藏或显示右侧或左侧的面板。但我想在面板中显示90％或+的面板。与facebook mobile中的例子相同，我们可以选择同时看到朋友列表中的一小部分新闻。

我在上面提供的链接中尝试了一些代码为

的代码

<div data-role="page">

<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->

 <!-- header -->
  <!-- content -->
  <!-- footer -->

  </div><!-- page -->

当面板可见时，必须实现更多的目的才能使其进入状态，只有90％的页面必须隐藏在页面的一侧。

由于

Answer 1

您需要覆盖多个类才能实现 90％页面。

面板总宽度：
```
.ui-panel {
  width: 90%;
}
```

小组的位置（左）：

等于Panel的宽度。

.ui-panel-position-left {
  left: -90% !important;
}

打开面板（3D变换）：

.ui-panel-open {
  -webkit-transform: translate3d(97%, 0, 0) !important;
  transform: translate3d(97%, 0, 0) !important;
}

动画：

增加或减少速度（ms）。

.ui-panel-animate {
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  transition: transform 500ms ease;
}

Panel的overlay / wrapper：

这包括data-dismissible设置为true或false

的面板的可点击区域

.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
  left: 90% !important;
  right: -90% !important;
}

<强> Demo

当启用面板向左滚动时，如何显示我的页面在左侧部分可见？

1 个答案: