当启用面板向左滚动时，如何显示我的页面在左侧部分可见？ [英] How can I display my page to be visible partially on left when the panel scroll left is enabled?

问题描述

在这个链接中，我可以找到那里我可以隐藏或显示右侧或左侧的面板。但我想在面板中显示90％或+的面板。与facebook mobile相同的例子，我们可以选择同时看到朋友列表的新闻提要的一小部分。

IN this link , I can find that there is over lay option where I can hide or show the panel on right or left. But I want to display the panel 90% or + in panel. The same example as in facebook mobile where we have option of seeing friends list on right simultaneously a little part of news feed.

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

I have tried some code in the link provided above which has the code as

<div data-role="page">

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

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

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

当面板仅可见时，必须实现更多功能才能使其进入状态我页面的百分比必须隐藏在页面的一侧。

what more must be implemented for this to bring it to the state when when the panel is visible only 90% of my page must be hidden towards one side of the page.

谢谢

推荐答案

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

You need to override many class in order to achieve 90% panel of page.

1. 面板总宽度：

1. Panel overall width:

.ui-panel {
  width: 90%;
}

小组位置（左）：

Panel's position (left):

等于Panel的宽度。

Equals to Panel's width.

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

打开面板（3D变换）：

Opening panel (3D transform):

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

动画：

Animation:

增加或减少速度（ms）。

Increase or reduce speed (ms).

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

Panel的叠加/包装：

Panel's overlay/wrapper:

这包括面板的可点击区域，数据不允许设置为true或false

This includes clickable area for panels with data-dismissible set to true or 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

这篇关于当启用面板向左滚动时，如何显示我的页面在左侧部分可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！