博客

jQuery Mobile面板 classes.contentFIxedToolbarClosed选项

  • Post category:jquery

jQuery Mobile是一个用于创建移动应用程序的框架。其中的面板（panel）组件提供了一个屏幕边缘的侧滑窗口，可以显示导航、设置等界面元素。在面板中，classes.contentFixedToolbarClosed选项可以加入固定工具栏，同时将工具栏关闭。

示例说明

  1. 在面板中添加固定工具栏
<div data-role="panel" id="myPanel" data-position="left" data-display="overlay">
  <div data-role="header" data-theme="b">
    <h1>我是面板</h1>
  </div>
  <div role="main" class="ui-content">
    <p>面板内容</p>
  </div>
  <div data-role="footer" data-position="fixed" data-theme="c" class="ui-content fixed-toolbar-closed">
    <h1>固定工具栏</h1>
  </div>
</div>

上述代码定义了一个id为“myPanel”的面板，在里面加入了一个固定工具栏。其中，class属性的值为“fixed-toolbar-closed”，可以通过这个class选择器来控制工具栏的关闭或打开。

  1. 手动控制固定工具栏的关闭或打开
$(document).on("click", "#togglePanel", function(){
  if($("#myPanel").hasClass("ui-panel-closed")){
    $("#myPanel").panel("open");
    $("#myPanel .ui-fixed-hidden").show();
    $("#myPanel .fixed-toolbar-closed").removeClass("ui-fixed-hidden");
  } else {
    $("#myPanel").panel("close");
    $("#myPanel .ui-fixed-hidden").hide();
    $("#myPanel .fixed-toolbar-closed").addClass("ui-fixed-hidden");
  }
});

此代码为一个点击事件的监听器。当点击某个元素时，判断面板是否已经关闭并将面板打开，在打开的同时把工具栏隐藏的类名“ui-fixed-hidden”移除，将class属性值为“fixed-toolbar-closed”的工具栏显示出来；当面板已经打开时，将面板关闭，并将工具栏隐藏的类名添加回来，将工具栏再次隐藏起来。

Tags: