jQuery Mobile 面板 classes.pageContentPrefix 选项

简介

jQuery Mobile 是一个可以用于开发跨设备移动应用程序的 HTML5/CSS3 框架。其中的面板组件（Panel Widget）提供了一个可以在页面边缘滑动显示的栏目，常用于提供导航或设置等功能。

在 Panel Widget 中，classes.pageContentPrefix 选项是一个前缀字符串，可以用于定义面板中页面内容的 class 属性前缀。

用法

在 jQuery Mobile 中使用 Panel Widget，可以通过以下代码定义 classes.pageContentPrefix 选项：

$( ".selector" ).panel({
  classes: {
    pageContentPrefix: "my-page-"
  }
});

这里，".selector" 是绑定 Panel Widget 的选择器，"my-page-" 是自定义的 class 属性前缀。

返回值

如果将 classes.pageContentPrefix 选项设置为 "my-page-"，在 Panel Widget 中页面内容元素的 class 属性将会以 "my-page-" 作为前缀，例如：

<div data-role="page" class="my-page-main">
  <div data-role="panel" class="my-page-panel">
    <ul data-role="listview">
      <li><a href="#" class="my-page-link">Link 1</a></li>
      <li><a href="#" class="my-page-link">Link 2</a></li>
      <li><a href="#" class="my-page-link">Link 3</a></li>
    </ul>
  </div>
  <div data-role="header" class="my-page-header">
    <h1>My App</h1>
  </div>
  <div data-role="main" class="my-page-content">
    <p>Page content goes here.</p>
  </div>
</div>

这里的页面内容元素 class 属性包括 "my-page-header"、"my-page-content" 等，都以 "my-page-" 作为前缀。

注意事项

• 如果不设置 classes.pageContentPrefix 选项，页面内容元素的 class 属性将没有前缀。
• 当一个页面中有多个 Panel Widget 时，可以为每一个 Widget 定义自己的 classes.pageContentPrefix 选项。