jQuery Moblile Demos学习记录Panel

时间：2021-04-08 08:57:21

本文来源于www.ifyao.com禁止转载！www.ifyao.com

我就简短的总结一下：

Panel位置：data-position属性控制：值：left,right,

显示方式：data-display属性   值：reveal默认在页面之下，overlay页面上，push和页面统一，将页面推开。

Panel应该放在header，content，footer之前或者之后，但是不能再page外面。

比如这样

Source code jQuery Moblile Demos学习记录Panel jQuery Moblile Demos学习记录Panel jQuery Moblile Demos学习记录Panel  
<div data-role="page">
 
<div data-role="panel" id="mypanel">
    <!-- panel content goes here -->
</div><!-- /panel -->
 
<!-- header -->
<!-- content -->
<!-- footer -->
 
</div><!-- page -->

当想要动态添加content或者是隐藏的内容可见是，应该触发事件：

$( "#mypanel" ).trigger( "updatelayout" );
框架会检查panel的高度，当content的高度超过了屏幕的高度时，它将会被设置成min-height，同时，panel会滚动。
data-swipe-close="false"可以设置Panel打开后不能通过点击页面关闭Panel
data-dismissible="false"

panel里面添加一个按钮， 加上data-rel="close"可以关闭Panel
data-animate="false"关闭panel动画

data-position-fixed="true"会防止panel滚动和无法访问。
overflow有可能只显示没有被绝对定位的Panel。
当Panel内的菜单内容太长以至于超出屏幕宽度时，fixed状态会被取消，使得Panel可以滚动。

框架，panel用DIV包含，class="ui-panel-inner" 默认有15个像素padding

Panel有一个固定宽度17em
可以在Panel框架上添加data-theme或者设置data-theme="none"并设置自己的样式。注意加Padding。

以上内容取自官方demo，本人翻译，未经允许禁止转载！

本文来源于www.ifyao.com禁止转载！www.ifyao.com

相关文章