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

Question

在此link ，我发现有一个叠加选项，我可以在其中隐藏或显示右侧或左侧的面板。但我想在面板中显示面板 90% 或 +。与 facebook 移动版中的示例相同，我们可以选择在右侧同时看到好友列表的一小部分新闻提要。

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

<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% 面板。

1. 面板整体宽度:

   .ui-panel {
     width: 90%;
   }
   

2. 面板的位置(左):

   等于面板的宽度。

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

3. 打开面板(3D 变换):

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

4. 动画:

   提高或降低速度(毫秒)。

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

5. 面板的叠加层/包装器:

   这包括 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