博客

jQuery Mobile 面板 classes.panelInner 选项

  • Post category:jquery

jQuery Mobile 面板组件提供了许多配置选项，其中包括 classes.panelInner，这个选项可以用来为面板内部元素设置 CSS 类，在面板上使用这些 CSS 类可以让开发者掌握更多的控制权，下面是详细的攻略。

classes.panelInner 选项的作用

通过 classes.panelInner 选项可以为面板内部的元素设置 CSS 类名，让开发者可以使用这些 CSS 类名来定制面板内部元素的样式，例如设置面板内部元素的字体，背景颜色，边框等等。

classes.panelInner 的语法

classes.panelInner 选项的语法如下：

$( ".selector" ).panel({
  classes: {
    panelInner: "custom-panel-inner"
  }
});

其中：

  • .selector 表示你要初始化的面板所在的选择器。
  • classes.panelInner 表示你要设置为面版内部元素的 CSS 类名。
  • "custom-panel-inner" 表示你要设置的 CSS 类名，可以设置多个类名，用空格分隔。

classes.panelInner 的示例

下面是两个使用 classes.panelInner 选项的示例。

示例一：修改面板内部元素的颜色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
    .custom-panel-inner {
      background-color: #eeffee;
      color: #333;
    }
  </style>
</head>
<body>
  <!-- 面板 content -->
  <div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a">
    <h3>Panel Title</h3>
    <p>This is a panel.</p>
  </div>
  <!-- 页面 content -->
  <div data-role="page">
    <div data-role="header" data-theme="a">
      <a href="#mypanel" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-left">Menu</a>
      <h1>Page Title</h1>
    </div>
    <div role="main" class="ui-content">
      <p>Page content goes here.</p>
    </div>
  </div>

  <script>
    $( "#mypanel" ).enhanceWithin().panel({
      classes: {
        panelInner: "custom-panel-inner"
      }
    });
  </script>
</body>
</html>

在这个示例中，我们为面板内部元素设置了 custom-panel-inner 类名，并设置了背景颜色和字体颜色，从而让面板内部元素样式发生了变化。

示例二：添加面板内部元素距离边界的边距

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
    .custom-panel-inner {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <!-- 面板 content -->
  <div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a">
    <h3>Panel Title</h3>
    <p>This is a panel.</p>
  </div>
  <!-- 页面 content -->
  <div data-role="page">
    <div data-role="header" data-theme="a">
      <a href="#mypanel" class="ui-btn ui-corner-all ui-shadow ui-icon-bars ui-btn-icon-left">Menu</a>
      <h1>Page Title</h1>
    </div>
    <div role="main" class="ui-content">
      <p>Page content goes here.</p>
    </div>
  </div>

  <script>
    $( "#mypanel" ).enhanceWithin().panel({
      classes: {
        panelInner: "custom-panel-inner"
      }
    });
  </script>
</body>
</html>

在这个示例中，我们为面板内部元素设置了 custom-panel-inner 类名，并设置了内边距，从而让面板内部元素距离边界有了一定的距离，看起来更舒适一些。

Tags: