IN this link http://view.jquerymobile.com/1.3.2/dist/demos/widgets/panels/,我可以发现有一个覆盖选项,我可以在其中隐藏或显示右侧或左侧的面板。但我想在面板中显示面板 90% 或 +。与 Facebook 移动版相同的示例,我们可以选择在右侧同时看到朋友列表的一小部分新闻源。
我在上面提供的链接中尝试了一些代码,其中的代码为
<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div><!-- page -->
为此还必须实现什么才能使其达到当面板可见时只有 90% 的页面必须隐藏到页面一侧的状态。
Thanks
您需要重写许多类才能实现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;
}
Demo http://jsfiddle.net/Palestinian/jLhvy/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)