jquery mobile Panel (面板)

面板的设计是尽可能灵活,便于创建菜单、折叠组、方格和更多内容

面板事件 Panel Events beforeclose(event,ui)在关闭面板的过程开始时,触发。event:是第一个参数。类型:事件。ui:是第二个参数。类型:对象。//初始化,绑定一个函数$(".selector").panel({beforeclose:function(event,ui){}});////绑定一个监听函数$(".selector").on("panelbeforeclose",function(event,ui){});beforeopen(event,ui)在打开面板的过程开始时,触发。event:是第一个参数。类型:事件。ui:是第二个参数。类型:对象。//初始化,绑定一个函数$(".selector").panel({beforeopen:function(event,ui){}});////绑定一个监听函数$(".selector").on("panelbeforeopen",function(event,ui){});close(event,ui)当关闭面板的过程结束时,触发。event:是第一个参数。类型:事件。ui:是第二个参数。类型:对象。

面板方法 Panel Methods close()关闭面板关闭面板。此函数没有任何参数。$(".selector").panel("close");open()打开面板打开面板。此函数没有任何参数。$(".selector").panel("open");toggle()绑定面板绑定一个可见的面板,便于打开或关闭面板。此函数没有任何参数。$(".selector").panel("toggle");

面板选项 Panel Options animate动画。类型:布尔值。默认值:true。设置是否在关闭和开启面板将动画。如果设置为false,面板打开时,动画会消失。这是推荐的最快的性能。也可以在HTML中添加data-animate="false"属性来取消动画。//初始化$(".selector").panel({animate:false});//gettervaranimate=$(".selector").panel("option","animate");//setter$(".selector").panel("option","animate",false);dismissible类型:布尔值。默认值:true。点击网页外边可以关闭面板。//初始化$(".selector").panel({dismissible:false});//gettervardismissible=$(".selector").panel("option","dismissible");//setter$(".selector").panel("option","dismissible",false);display类型:字符串。默认值:"reveal"。面板显示位置

面板 data-role=panel 在一个jQueryMobile“page”中,面板与“header”、“footer”、“content”,必须是兄弟元素。可以在它们之前或之后添加面板的标记,但不在它们中间添加。注:此约束将在未来的版本中删除。<divdata-role="page"><divdata-role="panel"id="mypanel"><!--panelcontentgoeshere--></div><!--/panel--><!--header--><!--content--><!--footer--></div><!--page-->另外,添加面板的标记在页眉、内容、页脚的后面,也可能正好是“page”容器结束符之前。在代码顺序中的放置面板标记的位置,将取决于,在C等级(仅HTML)或屏幕阅读器,你想要的如何给读者展示内容。一个包含“panel”(面板)的“page”(页面),如果这个框架包含的标题,内容和页脚节在一个div,当以显示的模式"reveal"或"push"打开这个面板的时候,转场被应用于此容器。固定的页眉和页脚是个例外。那些不包括在此容器内的,