在此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% 的页面必须隐藏在页面一侧的状态。
谢谢
最佳答案
您需要覆盖许多类才能实现页面的 90% 面板。
面板整体宽度:
.ui-panel { width: 90%; }
面板的位置(左):
等于面板的宽度。
.ui-panel-position-left { left: -90% !important; }
打开面板(3D 变换):
.ui-panel-open { -webkit-transform: translate3d(97%, 0, 0) !important; transform: translate3d(97%, 0, 0) !important; }
动画:
提高或降低速度(毫秒)。
.ui-panel-animate { -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; transition: transform 500ms ease; }
面板的叠加层/包装器:
这包括
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; }
关于javascript - 当启用面板向左滚动时,如何显示我的页面在左侧部分可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20567884/